@charset "utf-8";
/* Default stylesheet - developed by Wayne Hunt 2024 */

/* Reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, 
hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
body { line-height:1;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
nav ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}
ins {text-decoration:none;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;}
table {border-collapse:collapse; border-spacing:0;}
:focus {outline: none;}
hr {display:block; height:1px; border:0; margin:1em 0; padding:0;}
input, select {vertical-align:middle;}
html {scroll-behavior: smooth;}

/* Set some variables */
:root {
  --white: #ffffff;
	--blue: #0090cf;
	--black: #000000;
	--dark-grey: #242222;
	--pink: #f52789;
	--fb-blue: #3b579d;
	--li-blue: #0274b3;
	--copy-font: "Raleway", sans-serif;
	--awesome-font: "Font Awesome 5 Free";
}

/* Begin styles */
a {color: var(--blue); text-decoration: none; transition: all .25s ease-in-out;}
a:hover {color: var(--pink);}

body {font-size: 1em; font-family: var(--copy-font); color: var(--white);}

main {float: left; width: 100%; height: 100vh; display: flex; flex-wrap: wrap;}

section {float: left; width: 25%; height: 33.33%;}

section article {display: flex; position: relative; justify-content: center; align-items: center; width: 100%; height: 100%;}
section article img {display: block; margin: 0 auto; position: relative; z-index: 5; width: auto; height: auto; transition: all .15s ease-in-out;}
section article img.wh80 {max-width: 80%; max-height: 80%;}
section article img.wh70 {max-width: 70%; max-height: 70%;}
section article img.wh60 {max-width: 60%; max-height: 60%;}

section article a.ext {position: absolute; z-index: 10; width: 100%; height: 100%; top: 0; left: 0;}
section article a.ext:hover {background: rgba(255,255,255,0.2);}

section aside.full-image {width: 100%; height: 100%; overflow: hidden;}
section aside.full-image img {width: 100%; height: auto;}

section aside.gig-list {width: 100%; height: 100%; overflow: hidden; background: url("../images/bg-giglist.jpg") no-repeat top center; background-size: cover;}
section aside.gig-list .internal {width: calc(100% - 30px); height: calc(100% - 30px); margin: 15px; overflow-y: auto; overflow-x: hidden;}
section aside.gig-list .internal::-webkit-scrollbar {width: 10px; border-radius: 5px; background: #484848;}
section aside.gig-list .internal::-webkit-scrollbar-thumb {background: #fafafa; border-radius: 5px;}
section aside.gig-list .internal .content {float: left; width: calc(100% - 30px); margin: 15px;}
section aside.gig-list .internal .content .row-gig {float: left; display: flex; align-items: center; width: 100%; margin-bottom: 15px;}
section aside.gig-list .internal .content .row-gig .graphic {float: left; width: 50px; margin-right: 20px;}
section aside.gig-list .internal .content .row-gig .graphic img {width: 100%; height: auto;}
section aside.gig-list .internal .content .row-gig .detail {float: left; width: calc(100% - 70px);}
section aside.gig-list .internal .content .row-gig .detail p {font-size: 0.9em; font-family: var(--copy-font); color: var(--white); line-height: 145%;}

section aside.intro {width: 100%; height: 100%; overflow: hidden;}
section aside.intro .internal {width: calc(100% - 30px); height: calc(100% - 30px); margin: 15px; overflow-y: auto; overflow-x: hidden;}
section aside.intro .internal::-webkit-scrollbar {width: 10px; border-radius: 5px; background: #484848;}
section aside.intro .internal::-webkit-scrollbar-thumb {background: #fafafa; border-radius: 5px;}
section aside.intro .internal .content {float: left; width: calc(100% - 30px); margin: 15px;}
section aside.intro .internal .content h1 {font-size: 1.4em; font-family: var(--copy-font); font-weight: 600; color: var(--white); line-height: 145%; padding-bottom: 15px;}
section aside.intro .internal .content h2 {font-size: 1.0em; font-family: var(--copy-font); color: var(--white); line-height: 145%; padding-bottom: 15px;}
section aside.intro .internal .content p {font-size: 0.9em; font-family: var(--copy-font); color: var(--white); line-height: 145%; padding-bottom: 15px;}
section aside.intro .internal .content p:last-child {padding-bottom: 0px;}

.container {float: left; min-height: 100vh; width: 100%; background: url("../images/pagebg-giglist.jpg") no-repeat center top; background-size: cover;}
.container article {float: left; padding: 50px; min-height: calc(100vh - 100px); width: calc(100% - 100px); background: rgba(0,0,0,0.5);}
.container article aside.gig-list {float: left; width: 100%; margin-bottom: 25px;}
.container article aside.gig-list .row-gig {float: left; width: 100%; padding-bottom: 15px; margin-bottom: 35px; border-bottom: 1px dotted var(--white);}
.container article aside.gig-list .row-gig .graphic {float: left; width: 100%; margin-bottom: 10px;}
.container article aside.gig-list .row-gig.d90s .graphic {height: 50px;}
.container article aside.gig-list .row-gig.ob9 .graphic {height: 75px;}
.container article aside.gig-list .row-gig.t45s .graphic {height: 100px;}
.container article aside.gig-list .row-gig.myth .graphic {height: 100px;}
.container article aside.gig-list .row-gig .graphic img {width: auto; height: 100%; display: block; margin: 0 auto;}
.container article aside.gig-list .row-gig .detail {float: left; width: 100%;}
.container article aside.gig-list .row-gig .detail p {font-size: 1.2em; text-align: center; font-family: var(--copy-font); color: var(--white); line-height: 135%;}

.container article aside.sites {float: left; width: 100%; margin-bottom: 25px;}
.container article aside.sites p {font-size: 0.9em; font-family: var(--copy-font); color: var(--white); line-height: 145%; padding-bottom: 5px;}
.container article aside.sites .col3:nth-child(1) p {text-align: left;}
.container article aside.sites .col3:nth-child(2) p {text-align: center;}
.container article aside.sites .col3:nth-child(3) p {text-align: right;}
.container article aside.sites p a {color: var(--white); text-decoration: underline;}
.container article aside.sites p a:hover {color: var(--pink);}


section:nth-child(1) {background: var(--dark-grey); order: 6;} /* Main logo */
section:nth-child(2) {background: var(--black); order: 5;} /* Picture */
section:nth-child(3) {background: var(--blue); order: 7;} /* Intro */
section:nth-child(4) {background: var(--black); order: 1;} /* Definitely 90s */
section:nth-child(5) {background: var(--fb-blue); order: 2;} /* Facebook */
section:nth-child(6) {background: var(--black); order: 3;} /* The 45s */
section:nth-child(7) {background: var(--white); order: 4;} /* Instagram */
section:nth-child(8) {background: var(--black); order: 8;} /* Out By Nine */
section:nth-child(9) {background: var(--black); order: 9;} /* Gig List */
section:nth-child(10) {background: var(--white); order: 10;} /* WH Internet */
section:nth-child(11) {background: var(--pink); order: 11;} /* Bull Marketing */
section:nth-child(12) {background: var(--li-blue); order: 12;} /* LinkedIn */



/* generic styling */
.inner {width: 1200px; margin: 0 auto;}
.inner-full {width: 95%; margin: 0 2.5%;}
.row {float: left; width: 100%; display: block; clear: both;}
.col1 {float: left; width: 100%;}
.col2 {float: left; width: 50%;}
.col3 {float: left; width: 33.3%;}
.col3-span2 {float: left; width: 66.6%;}
.col4 {float: left; width: 25%;}
.col4-span3 {float: left; width: 75%;}
.col5 {float: left; width: 20%;}
.col5-span2 {float: left; width: 40%;}
.col5-span3 {float: left; width: 60%;}
.col5-span4 {float: left; width: 80%;}
.col6 {float: left; width: 16.6%;}
.col-switch {float: right !important;}
.left {float: left;}
.right {float: right;}
.flex {display: flex; align-content: center; justify-content: center;}
.pad25 {padding-top: 25px !important; padding-bottom: 25px !important;}
.padtop25 {padding-top: 25px !important;}
.padbot25 {padding-bottom: 25px !important;}
.mar0 {margin-top: 0px !important; margin-bottom: 0px !important;}
.martop0 {margin-top: 0px !important;}
.marbot0 {margin-bottom: 0px !important;}
.mar25 {margin-top: 25px !important; margin-bottom: 25px !important;}
.martop25 {margin-top: 25px !important;}
.marbot25 {margin-bottom: 25px !important;}
.pad50 {padding-top: 50px !important; padding-bottom: 50px !important;}
.padtop50 {padding-top: 50px !important;}
.padbot50 {padding-bottom: 50px !important;}
.pad75 {padding-top: 75px !important; padding-bottom: 75px !important;}
.padtop75 {padding-top: 75px !important;}
.padbot75 {padding-bottom: 75px !important;}
.pad100 {padding-top: 100px !important; padding-bottom: 100px !important;}
.padtop100 {padding-top: 100px !important;}
.padbot100 {padding-bottom: 100px !important;}
.pad125 {padding-top: 125px !important; padding-bottom: 125px !important;}
.padtop125 {padding-top: 125px !important;}
.padbot125 {padding-bottom: 125px !important;}
.pad150 {padding-top: 150px !important; padding-bottom: 150px !important;}
.padtop150 {padding-top: 150px !important;}
.padbot150 {padding-bottom: 150px !important;}
.txtcenter {text-align: center;}
.txtleft {text-align: left;}
.txtright {text-align: right;}