@font-face {
  font-family: 'Arcade2';
  src:  url('./Fonts/arcade2/G7StarForceTtf-OEg6.ttf') format('truetype');  
}

@font-face {
  font-family: 'Arcade1';
  src:  url('./Fonts/arcade1/PressStart2P-vaV7.ttf') format('truetype');  
}

@font-face {
  font-family: 'Games';
  src:  url('./Fonts/games-font/Games-XvD2.ttf') format('truetype');  
}

@font-face {
  font-family: 'Miedinger-Book';
  src: url('./Fonts/miedinger/Miedinger--Book.woff') format('woff');
}
    

@font-face {
  font-family: 'Miedinger-Book-Italic';
  src: url('./Fonts/miedinger/Miedinger--Book-Italic.woff') format('woff');
}
    

@font-face {
  font-family: 'Miedinger-Bold';
  src: url('./Fonts/miedinger/Miedinger--Bold.woff') format('woff');
}
    

@font-face {
  font-family: 'Miedinger-Bold-Italic';
  src: url('./Fonts/miedinger/Miedinger--Bold-Italic.woff') format('woff');
}

body { background-image:url(./PF/l4d2Backgroundbl.jpg);background-attachment: fixed;background-size:cover;background-repeat:no-repeat; font: normal normal normal 10px/1.8 'Arcade1'; color: #8702a9; margin: 0 0; box-sizing:border-box; }
ul { margin: 0 0; padding: 0 0; list-style: none;}
img { max-width: 100%; height: auto; }
a {margin: 0;padding: 0;border: 0;font-size: 100%;border-bottom: none; color: black; text-decoration: none;font: inherit;}
h1{margin: 0;padding: 0;border: 0; vertical-align: baseline;font: normal normal normal 10px/1.2 'Games';}
h2 {margin: 0;padding: 0;border: 0; vertical-align: baseline;font: normal normal normal 10px/1.2 'Arcade1';}
h3 {margin: 0;padding: 0;border: 0; vertical-align: baseline; }
p {margin: 0;padding: 0;border: 0; vertical-align: baseline;}
span {color: #43da01;}

.wrap { box-sizing: border-box; max-width: 1200px; padding: 0 30px; margin: 0 auto;}

.header {padding: 2.5em 0;background-color:black;opacity:0.8;}
.header .wrap {max-width:1600px;display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.header ul {display: flex; flex-direction: row; justify-content: flex-end;align-items: center;}
.header li {padding-left:30px;}
.header li a {color:#9a9998;font-size:1.8em;text-shadow: 2px 2px #1c0220;}
.header li a:hover {background-color:#9a9998;color:#494a4d;font-size:1.8em;transition-duration:0.5s;}
.social {margin-bottom:0.5em;}
.social li a:hover {background-color:#494a4d;font-size:1.8em;}

.banner {text-align:left; color:white;position:relative;padding: 22em 0; }
.banner .wrap {max-width:700px;}
.banner h2 {font-size:3em;font-family:'Arcade1';text-align: center;color:white;text-shadow: 3px 3px #0d2200;}
.banner h2:hover {color:red;}
.bgr {position:absolute;left:0;right:0;top:0;bottom:0;z-index:-1;background-size:cover;background-repeat:no-repeat;}

.block1 {opacity:0.8;padding: 7em 0;text-align:left;border-width: 1px; border-bottom: solid;border-bottom-color: rgba(0, 0, 0, 0.1);background-color:black;}
.block1 .wrap {display: flex; flex-direction: row;}
.leftside {width:50%; padding-right:3%;}
.rightside {width:50%; padding-left:3%;}
.block1 h1 {font-size:7em;color: #9a9998;text-shadow: 3px 3px #1c0220;}
.block1 h2 {font-size:2.5em;color: #9a9998;text-shadow: 2px 2px #1c0220;}
.block1 p {margin: 1em 0;margin-bottom:2.5em; color:gray;font-size:1.7em;}
.block1 a {margin-top:1em;background-color:#494a4d;color:#9a9998;font-size: 1.4em;padding: 1em 40px;text-shadow: 2px 2px #1c0220;}
.block1 a:hover {background-color:#9a9998;color:#494a4d;text-shadow: none;transition-duration: 0.3s;}

.block2 {padding: 8em 0;}
.block2 h1 {font-size:7em;text-align:center;text-shadow: 3px 3px #1c0220;}
.block2 h2 {font-size:2.5em;text-align:center;margin-bottom:3em;text-shadow: 2px 2px #1c0220;}
.block2 h3 {font-size:2.2em;padding-bottom:0.3em;color: #e6a52c;text-shadow: 3px 3px #0d2200;}
.block2 img {border: solid;border-width:3px;border-color:#0d2200;}
.grweb {display: grid;grid-template-columns: 30% 30% 30%; grid-template-rows: 100%;grid-column-gap: 5%;grid-row-gap: 50px;}
.grweb div:not(.icon-holder) {background-color:#8702a9;padding:2em 2em 3em 2em; text-align:center;box-shadow: 3px 3px #1c0220; }
.grweb div:not(.icon-holder):hover {background-color:red;transition-duration: 0.3s; }
.grweb .icon-holder { display: flex; align-items: center; justify-content:center; }


.block2s {background-image:url(./PF/l4d2Background2bbl.jpg);background-attachment: fixed;background-size:cover;background-repeat:no-repeat;padding: 7em 0;text-align:left;border-width: 1px; border-bottom: solid;border-bottom-color: rgba(0, 0, 0, 0.1);background-color:black;}
.block2s .wrap {display: flex; flex-direction: row;align-items: flex-start;}
.block2s h1 {font-size:7em;color: white;text-shadow: 3px 3px #1c0220;}
.block2s h2 {font-size:2.5em;color: white;text-shadow: 3px 3px #1c0220;}
.block2s h3 {font-size:2.2em;color: white;padding-bottom:0.3em;text-shadow: 3px 3px #0d2200;}
.block2s img {border: solid;border-width:3px;border-color:#0d2200;}
.block2s a {color: #8702a9;}
.block2s a:hover {color:red;}

/*L4D2*/

.headerdn {padding: 2.5em 0;background-color:black;opacity:0.8;}
.headerdn .wrap {max-width:1600px;display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.headerdn ul {display: flex; flex-direction: row; justify-content: flex-end;align-items: center;}
.headerdn li {padding-left:30px;}
.headerdn li a {color:#96080b;font-size:1.8em;text-shadow: 2px 2px #1c0220;}
.headerdn li a:hover {background-color:#96080b;color:#cb53d2;font-size:1.8em;transition-duration:0.5s;}
.socialdn {margin-bottom:0.5em;}
.socialdn li a:hover {background-color:#cb53d2;font-size:1.8em;}

.blockdn {background-image:url(./PF/l4d2.jpg);background-size:cover;background-repeat:no-repeat;padding: 7em 0;text-align:left;border-width: 1px; background-color:black;}
.blockdn .wrap {display: flex; flex-direction: row;align-items: flex-start;}
.blockdn div {height:15em;}

video {position:relative;}
.videoholder {position:relative;padding-top:4em;padding-bottom:0;}

.block1dn {background-image:url(./PF/l4d2Backgroundbl.jpg);background-attachment: fixed;background-size:cover;background-repeat:no-repeat;padding: 5em 0;text-align:left;}
.block1dn .wrap {display: flex; flex-direction: row;align-items: flex-start;}
.block1dn h1 {font-size:7em;color: white;text-shadow: 3px 3px #1c0220;padding-bottom:0.1em;}
.block1dn h2 {font-size:2.5em;font-family:'Miedinger-Bold';color: white;text-shadow: 3px 3px #1c0220;padding-bottom:0.5em;}
.block1dn h4 {font-size:1.2em;font-family:'Miedinger-Book';color: white;text-shadow: 3px 3px #1c0220;padding-bottom:1em;padding-top:0;margin:0;}
.block1dn p {font-size:2em;font-family:'Miedinger-Book';color:white;text-shadow: 2px 2px #1c0220;padding-bottom:1em;}
.block1dn ol {font-size:2em;font-family:'Miedinger-Book';color:white;text-shadow: 2px 2px #1c0220;padding-bottom:1em;}
.block1dn a {font-size:1em;font-family:'Miedinger-Book';color:grey;text-shadow: 2px 2px #1c0220;}
.block1dn a:hover {font-size:1em;font-family:'Miedinger-Book';color:white;text-shadow: 2px 2px #1c0220;}

.block2dn {background-image:url(./PF/l4d2Backgroundbbl.jpg);background-attachment: fixed;background-size:cover;background-repeat:no-repeat;padding: 5em 0;text-align:left;}
.block2dn .wrap {display: flex; flex-direction: row;align-items: flex-start;}
.block2dn h1 {font-size:7em;color: white;text-shadow: 3px 3px #1c0220;padding-bottom:0.1em;}
.block2dn h2 {font-size:2.5em;font-family:'Miedinger-Bold';color: white;text-shadow: 3px 3px #1c0220;padding-bottom:0.5em;}
.block2dn h4 {font-size:1.2em;font-family:'Miedinger-Book';color: white;text-shadow: 3px 3px #1c0220;padding-bottom:1em;padding-top:0;margin:0;}
.block2dn p {font-size:2em;font-family:'Miedinger-Book';color:white;text-shadow: 2px 2px #1c0220;padding-bottom:1em;}
.block2dn ol {font-size:2em;font-family:'Miedinger-Book';color:white;text-shadow: 2px 2px #1c0220;padding-bottom:1em;}
.block2dn ul {list-style-position:inside;}
.block2dn a {font-size:1em;font-family:'Miedinger-Book';color:grey;text-shadow: 2px 2px #1c0220;}
.block2dn a:hover {font-size:1em;font-family:'Miedinger-Book';color:white;text-shadow: 2px 2px #1c0220;}
.block2dn .images li:after {border: 6px solid #e6a52c;}
.block2dn .images li:hover:after { border-color:#ca001a;}

.button a {font-family:'Arcade1';margin-top:0.7em;background-color:#349309;color:#8702a9;font-size: 0.8em;padding: 0.7em 40px;text-shadow: 2px 2px #1c0220;}
.button a:hover {font-family:'Arcade1';margin-top:0.7em;background-color:#8702a9;color:#43da01;font-size: 0.8em;padding: 0.7em 40px;text-shadow: none;transition-duration: 0.3s;}

.a {list-style-type: disc;}
.as {list-style-type: square;color:gray;font-size:1.7em;text-align: left;margin-left:30px;}
.b {margin-left:50px;}

/* Footer*/

.footer {font-family:'Arcade1';color:#9a9998;text-shadow: 3px 3px black; padding: 4em 0;background-color:#29042f;opacity:0.8;}
.footer .wrap {max-width:1600px;}
.footer h3 {font-size: 1.5em;}
.footer a {color:#494a4d;text-shadow: 3px 3px black;}
.footer a:hover {color:#9a9998;background-color:#494a4d;transition-duration: 0.3s;text-shadow: none;}
.contact {display: flex; flex-direction: row; justify-content: space-between;}
.contact ul {display: flex; flex-direction: row; justify-content: space-between;}
.copyright {display: flex; flex-direction: row; text-align:center;border-top: solid;border-color: gray;padding:1em 0;}
.copyright li {text-size:0.75em;}
.copyright a {color: white;}

.no-flex .wrap { display: block; }
.images { display: block; margin-top: 3.6em; }
.images ul { display: flex; flex-wrap: wrap; flex-direction: row; margin-left: -2em; }
.images li { position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; width: 33.33%; max-height: 21.3em; overflow: hidden; padding-left: 2em; margin-bottom: 2em; }
.images li:after { position: absolute; content: ''; display: block; left: 2em; right: 0; top: 0; bottom: 0; border: 6px solid #8702a9; transition: all 0.3s ease-in-out; }
.images li:hover { cursor: pointer; }
.images li:hover:after { border-color: #494a4d; }
.images.videos li:after { display: none; }

.pdfs { display: block; margin-top: 3.6em; }
.pdfs ul { display: flex; flex-wrap: wrap; flex-direction: row; margin-left: -2em; }
.pdfs li { height: 60vh; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; width: 33.33%; overflow: hidden; padding-left: 2em; margin-bottom: 2em; }
.pdfs li .holder { position: relative; widows: 100%; height: 100%; }
.pdfs li embed { position: absolute; left: 0; right: 0; bottom: 0; top: 0; width: 100%; height: 100%; }
.pdfs li .buttons a { display: inline-block; }