/*
Theme Name: Lucid Stories
Theme URI:
Description: Customised for Lucid Stories
Author: Evidently So
Author URI: http://evidentlyso.com.au
Version: 0.1
Tags: Evidently So

*/


/*** 
Contents
  Reset
  Structure
  Page layout
  Search
  Responsive search
  Menu
  Responsive menu
  Posts and pages
  Sidebar
  Footer
  Fontface
  Media queries
***/



/*** Reset ***/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
	margin-bottom: 1em;
}

ul li {
  margin: 0 0 4px 2em;
}

ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #4fc5df;
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*** Structure ***/
html {
	margin: 0;
	padding: 0;
}

body {
	background: #fff;
	margin:0;
}


.wrapper {
	max-width: 800px;
	margin: 0 8%;
/*	margin-left: 7.38%;*/
	width: 84%;
	height:100%;
}

main {
	padding-top: 2em;
}

.clear {
	clear: both;
}

.white {
	fill: #fff;
	color: #fff;
}

.lucidRed {
	fill: #9f3a0d;
	color: #9f3a0d;
}

.lucidLightBlue {
	fill: #4fc6e0;
	color: #4fc6e0;
}

#logo {
	width: 68%;
	/*margin-left: 7.38%;*/
	margin-bottom: 2em;
}

#logo img {
	width: 100%;
	height: auto;
}

body, input, textarea {
	font-family: GothamLight, sans-serif;
	line-height: 1.2em;
}

h1, h2, h3 {
	font-family: GothamLight, sans-serif;
	font-weight: normal;
}	

h4, h5, h6 { 
	font-family: GothamBold, sans-serif;
}

h1 {
	font-size: 2.8rem;
	line-height: 1em;
}

h2 {
	font-size: 2.2rem;
	margin: 1.8em 0 2em 0;
}

h3 {
	font-family: GothamBold, sans-serif;
	font-size: 1.8rem;
	line-height: 1.2em;
	margin-top: 0.8em;
	text-transform: uppercase;
}

h4 {
	font-size: 1.4rem;
	margin: 0.2em 0 1em 0;
	text-transform: uppercase;
	color: #b7da9b;
}

h5 {
	font-size: 1.2rem;
	margin-top: 0.2em;
}

p {
	margin: 0.4em 0 1.2em 0;
	font-family: GothamLight, sans-serif;
	font-size: 1rem;
	line-height: 1.4em;
}

a, a:visited {
	color: #00b5cb;
	text-decoration: none;
}

a:hover, a:active {
	color: #393939;
	text-decoration: underline;
}


/*** Header ***/
.headerPanel {
	display: grid;
	grid-template-columns: 7.38% auto 1.42% 16% 7.35%;
	grid-template-rows: 32px;
}

footer .headerPanel {
	grid-template-rows: 220px;
}

footer .headerPanel div {
	padding-top: 2em;
}

#headerPanel1 {
    grid-column: 1;
    grid-row: 1;
  	background: #4fc5df;
}

#headerPanel2 {
    grid-column: 2;
    grid-row: 1;
	background: #00839c;
}

#headerPanel3 {
    grid-column: 3;
    grid-row: 1;
	background: #681e00;
}

#headerPanel4 {
    grid-column: 4;
    grid-row: 1;
	background: #9f3a0d;
}

#headerPanel5 {
    grid-column: 5;
    grid-row: 1;
	background: #b7da9b;
}

/*** Page layout ***/
#content {
	width: 92%;
	min-height: 600px;
  	margin: 2em 4%;
  	margin-right: 4%;
}

.overlay-cont {
	height: 800px;
}

.overlay {
	position: sticky;
	position: -webkit-sticky;
	top: 230px;
	background: rgba(0, 0, 0, 0.6);
	padding: 20px 24px;
	color: #fff;
	border-radius: 6px;
	width: 60%;
	margin: 1000px 0 800px 20%;
}

/*.first-overlay {
	margin-top: 200px;
}
*/
.fixed-bg {
    min-height: 100vh;
    height: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: initial;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 4em 0 500px 0;
    position: relative;
}

#data-collection {
	background-color: #00839c;
	background-image: none;	
}

#content-creation {
	background-color: #b7da9b;
	background-image: none;	
}

#data-vis {
	background-color: #9f3a0d;
	background-image: none;	
}

#web-dev {
	background-color: #4fc5df;
	background-image: none;	
}

.fixed-bg h3 {
	position: sticky;
	top: 100px;
}

/*** Footer ***/
footer {
	clear: both;
	width: 100%;
	/*margin-top: 6em;*/
}

#headerPanel2 p {
    margin-left: 12px;
    color: #fff;
}

#headerPanel2 a {
	color: #96deea;
}

#headerPanel2 a:hover {
	color: #4fc5df;
}


/*** Fontface ***/

@font-face {
    font-family: 'GothamLight';
    src: url('fonts/GothamLight.eot');
    src: url('fonts/GothamLight.eot?#iefix') format('embedded-opentype'),
         url('fonts/GothamLight.woff') format('woff'), /* format was 'woff' but chrome was having issues with the mime type - font/opentype */
         url('fonts/GothamLight.ttf') format('truetype');
    font-weight: regular;
    font-style: normal;
}

@font-face {
    font-family: 'GothamLightItalic';
    src: url('fonts/GothamLightItalic.eot');
    src: url('fonts/GothamLightItalic.eot?#iefix') format('embedded-opentype'),
         url('fonts/GothamLightItalic.woff') format('woff'), /* format was 'woff' but chrome was having issues with the mime type - font/opentype */
         url('fonts/GothamLightItalic.ttf') format('truetype');
    font-weight: regular;
    font-style: normal;
}

@font-face {
    font-family: 'GothamBook';
    src: url('fonts/GothamBook.eot');
    src: url('fonts/GothamBook.eot?#iefix') format('embedded-opentype'),
         url('fonts/GothamBook.woff') format('woff'), /* format was 'woff' but chrome was having issues with the mime type - font/opentype */
         url('fonts/GothamBook.ttf') format('truetype');
    font-weight: regular;
    font-style: normal;
}

@font-face {
    font-family: 'GothamBookItalic';
    src: url('fonts/GothamBookItalic.eot');
    src: url('fonts/GothamBookItalic.eot?#iefix') format('embedded-opentype'),
         url('fonts/GothamBookItalic.woff') format('woff'), /* format was 'woff' but chrome was having issues with the mime type - font/opentype */
         url('fonts/GothamBookItalic.ttf') format('truetype');
    font-weight: regular;
    font-style: normal;
}

@font-face {
    font-family: 'GothamRegular';
    src: url('fonts/GothamRegular.eot');
    src: url('fonts/GothamRegular.eot?#iefix') format('embedded-opentype'),
         url('fonts/GothamRegular.woff') format('woff'), /* format was 'woff' but chrome was having issues with the mime type - font/opentype */
         url('fonts/GothamRegular.ttf') format('truetype');
    font-weight: regular;
    font-style: normal;
}

@font-face {
    font-family: 'GothamMedium';
    src: url('fonts/GothamMedium.eot');
    src: url('fonts/GothamMedium.eot?#iefix') format('embedded-opentype'),
         url('fonts/GothamMedium.woff') format('woff'), /* format was 'woff' but chrome was having issues with the mime type - font/opentype */
         url('fonts/GothamMedium.ttf') format('truetype');
    font-weight: regular;
    font-style: normal;
}

@font-face {
    font-family: 'GothamMediumItalic';
    src: url('fonts/GothamMediumItalic.eot');
    src: url('fonts/GothamMediumItalic.eot?#iefix') format('embedded-opentype'),
         url('fonts/GothamMediumItalic.woff') format('woff'), /* format was 'woff' but chrome was having issues with the mime type - font/opentype */
         url('fonts/GothamMediumItalic.ttf') format('truetype');
    font-weight: regular;
    font-style: normal;
}

@font-face {
    font-family: 'GothamMedium';
    src: url('fonts/GothamMedium.eot');
    src: url('fonts/GothamMedium.eot?#iefix') format('embedded-opentype'),
         url('fonts/GothamMedium.woff') format('woff'), /* format was 'woff' but chrome was having issues with the mime type - font/opentype */
         url('fonts/GothamMedium.ttf') format('truetype');
    font-weight: regular;
    font-style: normal;
}

@font-face {
    font-family: 'GothamBold';
    src: url('fonts/GothamBold.eot');
    src: url('fonts/GothamBold.eot?#iefix') format('embedded-opentype'),
         url('fonts/GothamBold.woff') format('woff'), /* format was 'woff' but chrome was having issues with the mime type - font/opentype */
         url('fonts/GothamBold.ttf') format('truetype');
    font-weight: regular;
    font-style: normal;
}

@font-face {
    font-family: 'GothamBlack';
    src: url('fonts/GothamBlack.eot');
    src: url('fonts/GothamBlack.eot?#iefix') format('embedded-opentype'),
         url('fonts/GothamBlack.woff') format('woff'), /* format was 'woff' but chrome was having issues with the mime type - font/opentype */
         url('fonts/GothamBlack.ttf') format('truetype');
    font-weight: regular;
    font-style: normal;
}

@font-face {
    font-family: 'GothamBlackItalic';
    src: url('fonts/GothamBlackItalic.eot');
    src: url('fonts/GothamBlackItalic.eot?#iefix') format('embedded-opentype'),
         url('fonts/GothamBlackItalic.woff') format('woff'), /* format was 'woff' but chrome was having issues with the mime type - font/opentype */
         url('fonts/GothamBlackItalic.ttf') format('truetype');
    font-weight: regular;
    font-style: normal;
}

@font-face {
    font-family: 'GothamUltra';
    src: url('fonts/GothamUltra.eot');
    src: url('fonts/GothamUltra.eot?#iefix') format('embedded-opentype'),
         url('fonts/GothamUltra.woff') format('woff'), /* format was 'woff' but chrome was having issues with the mime type - font/opentype */
         url('fonts/GothamUltra.ttf') format('truetype');
    font-weight: regular;
    font-style: normal;
}



/*** Media queries ***/


@media only screen and (min-width: 479px) {

}

@media only screen and (min-width: 640px) {

	#content {
		width: 80%;
	  	margin-left: 10%;
	  	margin-right: 10%;
	  	padding: 0;
	}

	#logo {
		width: 82%;
	}

	.fixed-bg { 
		background-attachment: fixed; 
	}

}

@media only screen and (min-width: 940px) {

	#content {
		width: 67.85%;
		padding: 0 0 0 7.38%;
	  	margin-left: 0;
	  	margin-right: 0;
	}

	#logo {
		width: 72%;
	}

	.wrapper {
		margin: 0 auto;
	}

	#data-collection {
		background-image: url(img/Bay_bg.jpg);	
	}

	#content-creation {
		background-image: url(img/Mossman_bg.jpg);	
	}

	#data-vis {
		background-image: url(img/Tree_root_bg.jpg);	
	}

	#web-dev {
		background-image: url(img/Forest_bg.jpg);	
	}

}
	
@media only screen and (min-width: 1100px) {

	#logo {
		width: 60%;
	}

}
	
	

@media print {

	@page {
		margin: 1.2cm;
	}


	/* Add the stuff that needs removing */
	 {
		display: none;
	}

	/* Any elements that need to keep their background etc. */
	 {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
	}

	#main {
		background: none !important;
	}
	
	h1, h2, h3, h4, h5, p {
		color: #000;
	}

	h1, h2, h3, h4, h5, h6 {
		page-break-after:avoid;
		page-break-inside:avoid
	}
	 
	ul {
		page-break-inside: avoid;
	}

	article a {
	    font-weight: bolder;
	    text-decoration: none;
   }

   /* Adds the url after links if they're external links and they're in an article */
   article a:not(:local-link):after {
	   content:" <" attr(href) "> ";
	}

}