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

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

body {
max-width: 1280px;
margin: 0 auto}

strong {
font-weight: 600}

em {
	font-style: italic
}

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

h1, h2 {
color: var(--main-theme-color)
}

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


h5, h6 {
color: var(--main-theme-highlight-color)
}


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


body > * {
	display: none;
}

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

abbr {
	font-variant: small-caps
}


/*header*/

body > header {
background-color: var(--main-theme-color);
padding-top: 2.5em;
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, 1.5%;
padding-top: 94px;
padding-bottom: .1em
}


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

header h1 {
width: intrinsic;
/* Safari/WebKit uses a non-standard name */
width: -moz-max-content;
/* Firefox/Gecko */
width: -webkit-max-content;
/* Chrome */
margin-left: 38%;
font-size: 6.2em;
margin-bottom: .6em;
/* margin: 0 auto */
}

header h1 span {
display: block;
}

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

#event-name {
	font-size: .6em;
	display: block;
	line-height: 1
}

#event-year {
font-size: .35em;
display: inline-block;
text-transform: capitalize;
text-align: right;
float: right;
margin-top: -.3em
}

.event-tag {
	font-family: var(--body-font);
	font-size: .2em;
	display: inline-block;
float: left;
padding-top: .4em;
font-weight: 500;
padding-left: .5em;
display: none
}


/*logo block from event*/

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 {
	width: 24%;
	display: inline-block
}

header h2:first-of-type {
	margin-left: 18%;
	
}

header h2 strong {
font-weight: 900}

header h3 {
font-size: 1.3em;
/* font-size: 1.8vw; */
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: 52%;
/* font-size: 2.6vw; */
font-size: 1.6em;
font-weight: 400;
font-family: "freight-big-pro", "Big Caslon", Palatino, Georgia, serif;
margin: 1em auto 2em auto;
line-height: 1.1;
text-align: center

}

header .conference-description {
	color: var(--reverse-text-color);
	font-family: var(--body-font);
	font-size: .7em;
/* 	font-size: 1.3vw; */
	width: 52%;
	margin: 0 auto 1.4em auto;
	text-align: center
}

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


header h3 {
font-size: 2em;
/* font-size: 1.6vw; */
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 h2, header h3 {
	width: 30%;
	display: inline-block
}

header h2:first-of-type, header h3:first-of-type {
	margin-left: 33%;
	
}


header h4 {
	font-size: 2em;
/* 	font-size: 2vw; */
	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: 56%;
	margin: 1em auto;
	padding: 1em 0;
	text-align: center
}


button, a.register, a.email {
	-webkit-appearance: none;
	appearance: none;
	padding: .7em 2em;
	color: var(--button-bg-color);
	font-size: .9em;
	background: #fff;
	text-decoration: none;
	font-family: var(--body-font);
}

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

}

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


#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: 33%
}

/*page nav*/

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

nav.page > ul {
	display: flex;
    align-items: flex-end;
    justify-content: space-between;
	padding-bottom: .5em
}

/* for speakers page*/

#speaker nav.page {
	display: none
} 

nav.page li {
display: inline-block;
width: 8%;
text-align: center;
margin-right: 2%;
	color: var(--reverse-text-color);
	  width: intrinsic;           /* Safari/WebKit uses a non-standard name */
  width: -moz-max-content;    /* Firefox/Gecko */
  width: -webkit-max-content; /* Chrome */

}

nav.page li:first-child {
width: 50%;
text-align: left;
margin-right: 1%;
font-size: 1.2em
}

nav.page li:first-child span {
	font-size: .8em;
	margin-left: 1%
}

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:first-of-type a:link {
	font-family: var(--heading-font);
	font-size: 1.6em;
	font-weight: 100
}

nav.page li:last-of-type a:link, nav.page li:last-of-type a:visited {
	color: var(--reverse-text-color);
	background-color: var(--main-theme-highlight-color);
	padding: .1em 1em .2em 1em;
	border-radius: 3px;
	transition: .2s;
	background-color: var(--main-theme-highlight-color);
	border: solid 2px var(--main-theme-contrast-color)
}

nav.page li:last-of-type a:hover {
	background-color: var(--main-theme-color)
}

/*need page navigation to be sticky*/


/*main*/

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




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

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


/* streaming */

#streamed {
	margin-top: 1em;
	display: flex;
	justify-content: space-between;
	width: 90%
}

#remote {
  width: 60%;
}

#conffab {
   width: 37%;
   margin-left: 3%;
   margin-top: 2em;
}

#streamed h2 {
	font-size: 2em
}

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

/*logistics*/


#how-works {
  width: 90%;
  background-image: url('../images/chrome/map-inline.svg');
  background-repeat: no-repeat;
  background-size: 30%;
  background-position: 90% 50%
  
}

#logistics {
	padding-right: 40%
}

#map {
   width: 37%;
   margin-left: 3%;
   margin-top: 2em;
}

#logistics h2 {
	font-size: 2em
}

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



#related-events {}


#why-and-who {
background-color: fff;
overflow: auto;
padding: 0;
font-size: 1.07em;
background-image: url('../images/chrome/left-balls.svg');
background-repeat: no-repeat;
background-position: 1em 3.6em;
overflow: auto}

#reasons {width: 40%;
float: left;
margin: 3em 4% 4em 8%;
padding-right: 4%} 

#who {
width: 41%;
float: right;
margin: 0 0 4em 0;
padding-right: 0 }

#who ul {
}

#who img {display: block;
width: 95%;
margin: 1em
}

#why-and-who h2 {
font-size: 1.8em;
margin-bottom: .5em;
line-height: 1.2;
font-weight: 700
}

#why-and-who h2 + p {
	font-size: 1em;
	margin-bottom: 1.4em
}

#why-and-who h3 {
	font-family: var(--body-font);
margin-bottom: .2em;
font-weight: 600;
font-size: 1.1em
}

#why-and-who p {
margin-bottom: .6em;
line-height: 1.5}

#why-and-who li {
margin-bottom: .1em;
font-size: .95em}

#tldr {
	float: left;
	margin-left: 20%;
	width: 80%}
	
	#tldr li {line-height: 1.2}

#tldr li span:first-child {
	font-family: var(--heading-font);
	font-size: 3em;
	color: var(--main-theme-contrast-color);
	text-align: right;
	display: inline-block;
	width: 30%;
	margin-right: .1em
}

#tldr li span:last-child {
	text-align: left;
	display: inline-block
}

/* host*/

#host {
   	display: flex;
    justify-content: space-between;
	padding-bottom: 1em
}

#host > section:last-of-type {
	width: 25%;
	margin-right: 5%;
	margin-top: 5%
}

#host > section:last-of-type img {
	width: 80%;
	border-radius: 5%;
	border: solid .5em var(--main-theme-highlight-color)

}

#host > section:first-of-type {
	width: 60%
}

#host h2 {
	font-size: 2em
}

/*venue*/

#venue {
	background-color: var(--reverse-text-color);
	padding: 4em 2%;
	background-image: var(--venue-image);
	background-size: 100% auto;
	background-repeat: no-repeat;
	margin: 0%

}

#venue .melbourne, #venue .sydney {
	width: 33%;
	float: right
} 

#venue .current {
	width: 62.7%;
	margin-right: .3%;
	float: left
}

#venue .melbourne {

}

#venue .sydney {
}


#venue .details {
	padding: 2%;
	width: 50%;
	height: 96%;
	font-size: .9em;
	background-color: var(--semi-transparent-bg-color);
	margin-left: 40%
}

#venue h2 {
	font-size: 2.6em
}


#venue h3 {
	font-family: var(--body-font);
	font-weight: 600;
	font-variant: normal;
	text-transform: none;
	font-size: .9em;
	line-height: 1.1

}

#venue .details * {
	color: var(--reverse-text-color)
}

#venue .current .details {
		width: 60%;
	margin: 0% 0% 7% 10%;
	font-size: 1em;
		background-color: rgba(44, 69, 136, .8);

}


#venue > * {
	width: 46%;
	color: var(--reverse-text-color)
}

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

#venue li {
line-height: 1;
font-size: .9em}

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



/*schedule*/


.schedule header {
	padding-bottom: 2em
}

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

#schedule {
	background-color: var(--schedule-bg-dark);
	padding-bottom: 1em;
	display: flex;
}

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

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

#schedule ul li {
	line-height: 1.1
	}

#schedule  .day > a:link {
	display: block;
	text-decoration: none
}

#schedule img {
	border-radius: 50%
}

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


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

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




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

#schedule .session .time {
	width: 10%;
	text-align: right
}


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

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

#schedule .session .image img[src$='speechbubble.svg'] {
	width: 40%
}


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

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

#schedule .session .details {
	width: 50%;
	font-size: 1.1em
}

#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	
}


.housekeeping h4 {
	display: none
}

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

.session .speakerName {font-weight: 600}


/*diversity*/

#diverse {
	margin-top: 2em
}

#diverse h2 {
font-size: 1.8em;
margin-bottom: .5em;
line-height: 1.2;
font-weight: 700
}

#diverse h2 + p {
	font-size: 1em;
	margin-bottom: 1.4em
}

#diverse h3 {
	font-family: var(--body-font);
margin-bottom: .2em;
font-weight: 600;
font-size: 1.1em
}


/*speaking*/

#speaking {
 background-color: var(--reverse-text-color);
 padding-top: 2em;
 padding-bottom: 2em;
 font-size: 1.1em
}

#speaking h2 {
font-size: 2em
}

/* tidying */

#partners {
	padding-top: 3em
}

#about {
	padding-top: 3em
}

/*register iframe */

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

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

/* override common*/


    #partners .exhibitor {
        width: 13%;
        padding: 0 5%;
        margin-left: 2%;        
    }
    
 /*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;
}