@import 'narrow/speakers.css';
@import 'narrow/partners.css';
@import 'narrow/videos.css';
@import 'narrow/register.css';
@import 'custom-properties.css';

body {
  font: 400 16px/1.5 var(--body-font)
}


strong {
  font-weight: 600
}

em {
  font-style: italic
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--heading-font);
  font-weight: 300
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--main-theme-color)
}

a:link,
a:visited {
  text-decoration: underline;
  color: inherit
}


a:link,
a:visited {
  text-decoration: underline;
  color: inherit
}


body>* {
  display: none;
}

body>header,
nav#site,
main {
  display: block
}


#event {
  display: none
}


/*header*/

body>header {
  background-color: var(--main-theme-color);
  padding-top: 2em;
  padding-bottom: 1em;
background-image: var(--header-highlight-image), var(--header-bg-image) ; 
background-repeat: no-repeat, repeat-x;
background-position: 50% 50%, 50% 5%;
background-size: contain, 3%;
}

header h1 {
  color: var(--reverse-text-color);
  text-align: left;
  line-height: 1;
}

header h1 {
  font-size: 4em;
  font-size: 18vw;
  margin-bottom: 1em;
  width: intrinsic;
  /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;
  /* Firefox/Gecko */
  width: -webkit-max-content;
  /* Chrome */
  margin: .6em auto .6em auto
}

header h1 span {
  display: block
}

#wd-event {
  font-size: .2em
}

#event-name {
  font-size: .6em;
  display: block;
  width: 100%;
  text-align: right;
  margin-top: -.1em
}

#event-year {
  font-size: .5em;
  display: block;
  text-transform: capitalize;
  text-align: right;
  width: 100%
}

.event-tag {
  font-family: var(--body-font)
  font-size: .17em;
  padding-right: 36%;
  display: none
}


header h2 {
  font-size: 1.6em;
  color: var(--reverse-text-color);
  text-align: center;
  font-family: var(--body-font)
  line-height: 1;

}

header h2 span {
  display: block
}

header h2 .city {
  font-weight: 600
}

header h2 .dates {
  font-size: .8em
}

header h2 {
  display: block;
  margin-top: 1em
}


header h2 strong {
  font-weight: 900
}

header h3 {
  font-size: 1.3em;
  color: var(--reverse-text-color);
  text-align: center;
  font-family: var(--body-font)
  font-weight: 100;
  line-height: 1.1;
}

header .tagline {
  color: var(--reverse-text-color);
  width: 100%;
  font-size: 1.8em;
  font-weight: 400;
  font-family: var(--heading-font);
  margin: 1em auto 2em auto;
  line-height: 1.1;
  text-align: center;
  width: 90%
}

header .conference-description {
  color: var(--reverse-text-color);
  font-family: var(--body-font)
  font-size: 1.2em;
  width: 90%;
  margin: 0 auto 1.4em auto;
  text-align: center
}

header img {
  width: 100%
}

.conference-description+.conference-description {
  margin-top: 1.4em
}


header h3 {
  font-size: 1.4em;
  color: var(--reverse-text-color);
  text-align: center;
  font-family: var(--body-font)
  line-height: 1;
  margin-top: 2.2em
}

header h3 span {
  display: block
}

header h3 .city {
  font-weight: 600
}

header h3 .dates,
header h3 .location,
header h3 .venue {
  font-size: .8em
}

header h3 .venue {
  margin-top: 1em
}


header h4 {
  font-size: 1.6em;
  color: var(--reverse-text-color);
  text-align: center;
  font-family: var(--body-font)
  line-height: 1;
  margin-top: 2.2em;

}

header form,
#speakers form {
  width: 80%;
  margin: 1em auto;
  padding: 1em 0;
  text-align: center
}


button,
a.register,
a.email {
  -webkit-appearance: none;
  appearance: none;
  padding: .7em 2em;
  color: var(--main-theme-button-color);
  font-size: .9em;
  background: #fff;
  text-decoration: none;
  font-family: var(--body-font)
  display: block;
  width: 70%;
  margin: 1em auto;
  font-size: 1.2em;
}

a+button,
a.email {
  background: transparent;
  color: var(--reverse-text-color);
  border: solid thin #fff;
  margin-left: 0
}

a.register:nth-of-type(2),
a:first-of-type+button {
  margin-left: 0;
}

/*event dates and times*/

#date-time {
	text-align:  center;
}

#date-time h2, #date-time h3 {
	width: auto;
	display: block;
	text-align: center;
	margin: auto 
}

#date-time h2 {
	font-weight: 500;
	font-size: 1.1em
}


#date-time h3 {
	font-weight: 500;
	font-size: .9em
}

#date-time li {
	display: inline-block;
	width: 30%;
	margin-bottom: 1em;
	font-size: 1.2em
}


/*page nav*/

nav.page {
  display: block;
  padding: .6em 4% .5em 4%;
  width: 92%;
  background-color: var(--main-theme-color);
  z-index: 10;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

nav.page li {
  font-size: 1em;
  font-size: 3vw;
  display: inline-block;
  width: 30%;
  text-align: center;
  margin-right: 0;
  color: var(--reverse-text-color);
  /*   width: 100% */

}

/* nav.page li:first-child, nav.page li:nth-child(4) {
	display: none

} */

nav.page li {
  display: none
}

nav.page li:last-of-type {
  display: inline-block
}

nav.page li:nth-child(3),
nav.page li:nth-child(4),
nav.page li:nth-child(5),
nav.page li:nth-child(7) {
  display: inline-block
}


nav.page a:link,
nav.page a:visited {
  text-decoration: none;
  color: var(--reverse-text-color);
  font-weight: 600;
  font-size: 1em;
  border-bottom: 2px solid rgba(255, 255, 255, 0);
  transition: .2s border
}

nav.page a:hover {
  border-bottom: 2px solid rgba(255, 255, 255, .9)
}


nav.page li:last-of-type a:link,
nav.page li:last-of-type a:visited {
  padding: .1em 1em .2em 1em;
  border-radius: 3px;
  font-size: 1.3em;
  width: 95%
}

nav.page li:last-of-type a:hover {
  background-color: rgba(140, 0, 0, .7)
}

/*need page navigation to be sticky*/


/*main*/

main {
  font-size: 1.1em;
/*   overflow: hidden */
}

.part {
  padding-left: 4%;
  padding-right: 4%;
  overflow: hidden;
  clear: both
}

.part p,
.part ul {
  margin-bottom: 1em
}

#streamed {
	margin-top: 1em;

}

#remote {
  width: 100%;
}

#conffab {
	display: none
}

#streamed h2 {
	font-size: 1.6em;
	line-height: 1.2
}

#conffab img {
	display: block;
	width: 100%
}

/* overview */

#why-and-who {
  padding: 2em 4%
}

#why-and-who h2 {
  color: var(--main-theme-color);
  font-family: var(--heading-font);
  font-size: 2.4em;
  font-weight: 600;
  line-height: 1;
  width: 92%;
  margin-bottom: 1em;
}

#why-and-who img {
  display: none
}

#why-and-who h3 {
  font-size: 1.8em;
  color: var(--main-theme-color);
  font-family: var(--heading-font);
  margin-top: .4em;
  line-height: 1;
}

#why-and-who>p:first-of-type {
  width: 52%;
  padding-right: 6%;
  font-size: 1.25em;
  line-height: 1.2;
  float: left
}

#tldr {
  display: none
}



/*signup*/

#signup {
  position: relative;
  overflow: hidden;
  background-color: var(--page-bg-color);
}

#signup>img:first-of-type {
  width: 100%;
  margin-top: -95%;
  display: block;
}

#signup>h2:first-of-type {
  font-size: 2em;
  margin-top: 1em;
  font-weight: 600;
  line-height: 1.1
}

#signup>* {
  width: 100%;
  margin: 0 auto;
  font-weight: 200;
  text-align: left;
}

#signup form {
  margin: 2em auto
}

#signup>p,
#signup form {
  padding: 0 3%;
  line-height: 1.3;
  font-size: 1.3em
}

/*this mess is due to active campaigns inserted HTML*/

#signup form._inline-style ._form-content div input,
#signup form._inline-style ._form-content div button {
  width: 100%;
  padding: .6em 2.5%;
  font-size: .9em;
  margin-bottom: .5em
}

#signup form input:first-of-type {}

#signup form div.sign {
  text-align: left;
  margin-right: 0%;
  margin-top: .5em;
  width: 100%
}

#signup form p {}

#signup form button,
#signup form input[type="submit"] {

  -webkit-appearance: none;
  appearance: none;
  border: none;
  color: var(--reverse-text-color);
  background-color: var(--main-theme-highlight-color);
  font-size: .9em;
  font-weight: 600;
  padding: .5em .8em;
  font-family: var(--body-font)
  width: 86%;
  padding: .6em 2.5%;
  font-size: .9em;
  margin: 0 0 .5em 0
}

#signup form button:disabled,
#signup form input[type="submit"]:disabled {
  opacity: .4;
}

#signup a:link,
#signup a:visited {
  color: var(--main-theme-highlight-color)
}

#signup form button:enabled {
  opacity: .9
}

#signup form button:enabled:hover {
  opacity: 1
}

/*remote sessions*/

#bigideas {
background-color: var(--reverse-text-color)
} 

.remote-session {
	text-align: left;
}

.remote-session {
	margin: 1% 2%;
} 

.remote-session p {
	font-size: .7em
}

.remote-session h3 {
	font-size: 1em
}
.remote-session h4 {
	font-size: .8em
}

#bigideas > h3, #bigideas > h4 {
	width: 100%;
	text-align: left;
	margin: 0;
	background-color: var(--bigideas-heading-color);
	color: var(--reverse-text-color);
	padding: .5em;
	line-height: 1
}

#bigideas > h3 {
	font-size: 1.2em;
	padding-bottom: 0

}

#bigideas > h4 {
	font-size: .9em;

}

/* host */

#host > section:last-of-type {
	text-align: center;
}

#host > section:last-of-type img {
	width: 80%;
	border-radius: 5%;
	margin: 0 auto;
}

#host h2 {
	font-size: 2em
}


/*venue*/

#venue {
  background-image: url('../images/chrome/venue-remote.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--venue-bg-color);
  padding: 3em 3%;
  margin: 0 auto;
  width: 94%
}

#venue .details{
padding: .5em;
background-color: var(--semi-transparent-bg-color);
}


#venue>* {
  width: 92%;
  margin: 1em auto;
  color: var(--reverse-text-color)
}


#venue h2 {
  font-size: 1.5em;
  color: white
}

#venue p {
  font-size: 1.3em;
}

#venue h3 {
  font-variant: small-caps;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 1em;
  line-height: 1.1;
  color: white
}

#venue h3+p {
  margin-top: 0
}

.melbourne>.details>*,
.sydney>.details>* {
  display: none
}


.melbourne>.details>h2:first-of-type,
.sydney>.details>h2:first-of-type {
  display: block;
  font-size: 2em;
  color: var(--reverse-text-color)
}

.melbourne>.details>p:first-of-type,
.melbourne>.details>p:nth-of-type(2),
.sydney>.details>p:first-of-type,
.sydney>.details>p:nth-of-type(2) {
  display: block;
  font-size: 1em;
  color: var(--reverse-text-color)
}


/* individual speaker page stuff */

#speaker>header a {
  text-decoration: none
}

#speaker #session-details {
  width: 92%;
  padding: 1em 2%;
  margin: 0 auto;
  background-color: var(--page-bg-color);


}

#speaker #session-details h2 {
  display: none
}

#speaker #session-details img {
  display: block;
  float: right;
  width: 40%;
  margin-left: 1%;
  border-radius: 50%
}

#speaker #session-details h3 {
  font-family: var(--heading-font);
  color: var(--main-theme-color);
  font-style: italic;
  font-size: 3em;
  line-height: 1.1;
  text-align: left;
  width: 100%;
  margin: .3em auto .2em auto;
  background-image: url('../images/chrome/grey-wave.svg');
  background-position: left 100%;
  background-repeat: no-repeat;
  background-size: 60px auto;
  padding-bottom: .5em;
}

#speaker #session-details h4 span {
  display: block
}

#speaker #session-details h4 {
  font-size: 1.6em;
  color: var(--page-text-color);
  text-align: left;
  font-family: var(--body-font)
  line-height: 1;
  margin-top: .4em;
  margin-bottom: 1em
}

#speaker #session-details h4 .speaker-role {
  font-size: .7em;
  font-family: var(--body-font)
  font-weight: 500;
}

#speaker #session-details p {
  font-size: 1.4em
}

#speaker #speaker-details h3 {
  font-family: var(--heading-font);
  color: var(--bigideas-heading-color);
  font-size: 2em;
  text-align: left;
  font-style: normal;
  margin: .5em auto .5em auto
}

#speaker #registration-details h3 {

  display: block;
  font-family: var(--heading-font);
  color: var(--main-theme-highlight-color);
  font-size: 2.6em;
  text-align: left;
  font-style: italic;
}

#registration-details a:link,
#registration-details a:visited {
  display: inline-block;
  color: var(--reverse-text-color);
  background-color: var(--main-theme-color);
  text-decoration: none;
  padding: .2em 5%;
  border-radius: 3px;
  font-weight: 500;
  width: 90%;
  text-align: center;
  transition: .2s background-color;
  margin-top: 1em
}


/*schedule*/

.schedule header {
  padding-bottom: 2em
}

.schedule main {
  margin-top: -2.5em
}

.day {
  overflow: hidden
}

#schedule {
	background-color: var(--schedule-bg-dark);
}

#schedule h2 {
  width: 100%;
  margin: .5em 15% 0 30%;
  font-size: 2.4em;
	color: var(--schedule-text-highlight);
  padding-top: .5em
}

#schedule ul {
  color: var(--reverse-text-color);
  width: 100%;
  margin: 0 15% 1em 30%;
}


#schedule img {
  border-radius: 50%
}

#schedule .session {
  width: 100%;
  padding: 1em 5%;
  color: var(--reverse-text-color);
  background-image: url("../images/chrome/vertical-line.svg");
  background-repeat: repeat-y;
  background-position: 23.08%;
}

#schedule a:first-of-type .session {
  background-position: 23.08% 20px;
  background-repeat: no-repeat
}

#schedule a:last-of-type .session {
  background-position: 23.15% -500px;
  background-repeat: no-repeat
}


#schedule .session .time,
#schedule .session .image,
#schedule .session .details {
  display: inline-block;
  vertical-align: top
}

#schedule .session .time {
  width: 15%;
  text-align: right;
  font-size: .85em
}


#schedule .session .image {
  width: 10%;
  text-align: center;
}

#schedule .session .image img {
  width: 100%
}

#schedule .housekeeping {
  background-color: var(--schedule-bg-light)
}

#schedule .housekeeping .image img {
  width: 70%
}

#schedule .session .details {
  width: 60%
}

#schedule .session .details p {
  display: none
}

#schedule .session .details p:first-of-type {
  display: block
}

.session h3 {
	color: var(--schedule-text-highlight);
  font-family: var(--body-font)
  font-weight: 500;
  font-size: 1.1em;
  line-height: 1
}

.session h4 {
  color: var(--reverse-text-color);
  font-family: var(--body-font)
  font-weight: 500;
  font-size: .8em;
  line-height: 1.1
}


.housekeeping h4 {
  display: none
}

.session.content {
  background-color: var(--schedule-bg-dark)
}

.session .abstract {
  width: 100%;
  font-size: .8em;
  padding: 0;
  background-color: transparent
}

.session .name {
  font-weight: 600
}

.session .abstract p {
  font-size: 1em
}


/*speaking*/

#speaking {
  margin-top: 2em;
  font-size: 1.2em
}


#speakers-list {
  display: none;
}

/*partner*/

/* individual speaker page stuff */

#partner>header a {
  text-decoration: none
}

#partner #partner-details {
  width: 92%;
  padding: 1em 2%;
  margin: 0 auto;
  background-color: var(--page-bg-color);
  overflow: auto


}

#partner #partner-details h2 {
  display: none
}

#partner #partner-details img {
  display: block;
  width: 70%;
  margin: 0 auto

}

#partner #partner-details h3 {
  font-family: var(--heading-font);
  color: var(--main-theme-color);
  font-style: italic;
  font-size: 3em;
  line-height: 1.1;
  text-align: left;
  width: 100%;
  margin: .3em auto .2em auto;
  background-image: url('../images/chrome/grey-wave.svg');
  background-position: left 100%;
  background-repeat: no-repeat;
  background-size: 60px auto;
  padding-bottom: .5em;
}

#partner #partner-details h4 span {
  display: block
}

#partner #partner-details h4 {
  font-size: 1.6em;
  color: var(--page-text-color);
  text-align: left;
  font-family: var(--body-font)
  line-height: 1;
  margin-top: .4em;
  margin-bottom: 1em
}

#partner #partner-details h4 .speaker-role {
  font-size: .7em;
  font-family: var(--body-font)
  font-weight: 500;
}

#partner #partner-details p {
  font-size: 1.4em
}

#partner #partner-details h3 {
  font-family: var(--heading-font);
  color: var(--partner-heading-color);
  font-size: 2em;
  text-align: left;
  font-style: normal;
  margin: .5em auto .5em auto
}

#partner #registration-details h3 {

  display: block;
  font-family: var(--heading-font);
  color: var(--partner-heading-color);
  font-size: 2.6em;
  text-align: left;
  font-style: italic;
}

#partner-details a {
display: block;
width: 100%}

#partner .community-partner {
    width: 96%;
    float: left;
    margin: 0 0 1em 0;
    padding: 0 2%;
    clear: none
}

#partner .community-partner img {
    width: 100%;
    margin-bottom: .5em
}

#partner .community-partner h3, #partner .community-partner p {
	margin: 0
}

#partner .community-partner h3 {
	text-align: center
}

main {
	clear: both
}

/*register iframe */

#register-now.sr-only {
	opacity: 0;
}

#register-now {
	width: 96%;
	height: 96vh;
	border: none;
	box-shadow:2px 2px 9px #B0B0B0;
	margin: 0;
	position: fixed;
	top: 0%;
	left: 0;
	background: rgba(100, 100, 100, .5);
	padding: 2vh 2%;
	z-index: 10;
	opacity: 1;
	transition: opacity 2s;
	transition-delay: .1s
}

/*on the day*/
 
#on-the-day {
	background-color: var(--main-theme-contrast-color);
	color: var(--reverse-text-color);
	padding: 2em inherit

}

#on-the-day h2 {
	color: var(--reverse-text-color);
	margin-top: 1em;
	font-size: 1.6em;
}