@import 'custom-properties.css';

body {
    scroll-behavior: smooth
}

/*speak for us insert*/

#speakforus {
    background-color: var(--speak-theme-color);
    color: var(--speak-reverse-text-color);
    padding-top: 2em;
    padding-bottom: 2em;
    background-image: url('/event-common-images/blue-bars-vertical.svg');
    background-repeat: repeat-y;
    background-size: 5%;
    background-position: 1% 5%
}


#speakforus h2 {
    font-size: 1.8em;
    color: var(--speak-reverse-text-color);
}


#speakforus h3 {
    font-size: 1.6em;
    color: var(--speak-reverse-text-color);
}

#speakforus h4 {
    font-size: 1.4em;
    color: var(--speak-reverse-text-color);
}

#speakforus h5 {
    font-size: 1.2em;
    color: var(--speak-reverse-text-color);
}

/*diversity insert*/

#diversity {
    background-color: var(--speak-theme-color);
    color: var(--speak-reverse-text-color);
    padding-top: 2em;
    padding-bottom: 2em;
    background-image: url('/event-common-images/blue-bars-vertical.svg');
    background-repeat: no-repeat;
    background-size: auto 80%;
    background-position: 1%
}

#diversity h3 {
    font-size: 1.6em;
    color: var(--speak-reverse-text-color);
}

#diversity h4 {
    font-size: 1.4em;
    color: var(--speak-reverse-text-color);
}

#diversity h5 {
    font-size: 1.2em;
    color: var(--speak-reverse-text-color);
}

#diversity {
    background-color: var(--speak-theme-color);
    color: var(--speak-reverse-text-color);
    padding-top: 2em;
    padding-bottom: 2em;
    background-image: url('/event-common-images/blue-bars-vertical.svg');
    background-repeat: no-repeat;
    background-size: auto 80%;
    background-position: 1%
}

#diversity h2 {    font-size: 1.6em;
    color: var(--speak-reverse-text-color);
}

#diversity h3 {
    font-size: 1.6em;
    color: var(--speak-reverse-text-color);
}

#diversity h4 {
    font-size: 1.4em;
    color: var(--speak-reverse-text-color);
}

#diversity h5 {
    font-size: 1.2em;
    color: var(--speak-reverse-text-color);
}


/*partner pages*/

/*partners*/

#partners h2 {
    font-size: 2.9em;
    color: var(--partner-heading-color)
}

#partners h3 {
    font-family: var(--body-font);
    font-weight: 600
}

#partners h3 {
    margin-top: 0
}

#partners>section,
#community-partners>section {
    margin-left: 5%
}

#partners img {
    width: 100%
}

#partners img {
    width: 100%
}

#partner-details {
    width: 26%;
    float: left
}

/* 
#partners,
#community-partners {
    width: 70%;
    float: right;
    margin-bottom: 4em
}
 */

#partners .major-partner img {
    width: 45%;
    float: left;
    margin-bottom: 4em
}

#partners .major-partner img:nth-of-type(2) {
    margin-left: 12%
}


#partners .exhibitor {
    float: right;
    width: 13.28%;
    margin-left: 1%;
    margin-bottom: 5%;
}


#partners h3,
#community-partners h3 {
    font-variant: small-caps;
    text-transform: uppercase;
    font-size: .9em;
    color: var(--light-text-color);
    margin: 0 0 1.6em 0;
    clear: both;
    text-align: center
}

.community-partner {
    width: 12%;
    float: left;
    margin-right: 2%
}

.community-partner img {
    width: 100%
}
/*site wide partners*/



/*register*/

.sold-out {
    opacity: .5
}

/*override*/

nav#site #collapsed {
	display: none;
}

nav#site {
    padding: 0;
}

nav#site ul {
    display: flex;
    justify-content: space-between;
}

nav#site ul li {
    display: block;
    width: auto;
    margin-right: 1em;
    font-weight: 500;
    padding-top: 1em;
}

nav#site ul li:first-of-type {
    width: 20%;
    font-weight: 900;
    background-image: url('/event-common-images/wdlogo.svg');
    background-repeat: no-repeat;
    background-size: 1em;
    padding-left: 2.5em;
    background-position: 1em 22%;
    margin-left: 1em
}

nav#site ul li a:link,
nav#site ul li a:visited {
    color: inherit;
    text-decoration: none;
    padding-top: .5em
}

nav#site ul li a, nav#site ul li span {
	display: block;
	text-align: left;
	/* margin: 0 5% */
}

nav#site ul li:first-of-type a, nav#site ul li:first-of-type span {
	text-align: left;
	width: auto;
	margin: 0;
	width: 80%;
}

nav#site ul li span {
	color: var(--site-light-text-color);
	padding: 0 2%;
    line-height: 1;
    margin-bottom: .4em;
}


nav#site .name {
	font-size: .8em;
	color: var(--page-text-color);
	font-weight: 500;
}

nav#site .desc {
	font-size: .65em
}


nav#site .date {
	font-size: .6em
}

.past {
    color: var(--light-text-color);
}

nav#site ul li.current {
    font-weight: 600;
    position: relative;
    color: var(--main-theme-color)
}


nav#site ul li a>span.desc {
    font-weight: normal;
    display: block;
    font-size: .75em;
    color: var(--light-text-color);
    /* width: 30%; */
    line-height: 1.1;
/* 
    margin: 0
 */
}

nav#site>ul>li.minor,
nav#site>ul>li {
    margin: 0 -1px;
    padding-top: 5px;
    font-size: 1em;
    width: 13%;
}

nav#site>ul>li>* {
	padding-left: 1%;
	padding-right: 1%;
}

nav#site>ul>li strong {
    padding-right: .8em;
}

nav#site ul>li>a[class*="events-"] {
    border-top-width: 7px;
    border-top-style: solid;
    margin: -6px 0 0;
    opacity: 1;
    transition: background-color .3s;
    font-size: 1em;
    font-weight: bold;
    padding-bottom: 1em;
	min-height: 3.6em;
}

nav#site ul>li.minor>a {
    background: none;
    font-weight: normal;
}



nav#site .events-hover {
	background-color: var(--site-neutral-bg-color);
    border-color: var(--hover-highlight-color);
}

nav#site .events-hover:hover, #hover nav#site .events-hover {
    background-color: var(--hover-bg-color);
}

nav#site .events-lazyload {
	background-color: var(--site-neutral-bg-color);
    border-color: var(--lazyload-highlight-color);
}

nav#site .events-lazyload:hover, #lazyload nav#site .events-lazyload {
    background-color: var(--lazyload-bg-color);
}

nav#site .events-globalscope {
	background-color: var(--site-neutral-bg-color);
    border-color: var(--globalscope-highlight-color);
}

nav#site .events-globalscope:hover, #globalscope nav#site .events-globalscope{
    background-color: var(--globalscope-bg-color);
}

nav#site .events-code {
	background-color: var(--site-neutral-bg-color);
    border-color: var(--code-highlight-color);
}

nav#site .events-code:hover, #codeconf nav#site .events-code {
    background-color: var(--code-bg-color);
}

nav#site .events-summit {
	background-color: var(--site-neutral-bg-color);
    border-color: var(--summit-highlight-color);
}

nav#site .events-summit:hover, #summit nav#site .events-summit {
    background-color: var(--summit-bg-color);
}

nav#site .events-aaa {
	background-color: var(--site-neutral-bg-color);
    border-color: var(--aaa-highlight-color);
}

nav#site .events-aaa:hover, #aaa nav#site .events-aaa {
    background-color: var(--aaa-bg-color);
}

nav#site .events-safe {
	background-color: var(--site-neutral-bg-color);
    border-color: var(--safe-highlight-color);
}

nav#site .events-safe:hover, #safe nav#site .events-safe {
    background-color: var(--safe-bg-color);
}

nav#site .events-remixed {
	background-color: var(--site-neutral-bg-color);
    border-color: var(--remixed-highlight-color);
}

nav#site .events-remixed:hover, #remixed nav#site .events-remixed {
    background-color: var(--remixed-bg-hover-color);
}

nav#site .events-product {
	background-color: var(--site-neutral-bg-color);
    border-color: var(--product-highlight-color);
}

nav#site .events-product:hover, #product nav#site .events-product {
    background-color: var(--product-bg-color);
}




/*speaker list*/

nav#respond li a.current-speaker,
nav#respond li a:hover {
    font-weight: 600
}


/*about-conffab*/

#about-conffab {
    background-color: var(--conffab-bg-color);
    color: var(--conffab-text-color);
    text-align: center;
    background-image: url('/event-common-images/chrome/about-conffab-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2em 20%;

}

#about-conffab header h1 {
    margin-bottom: .2em;
    color: var(--conffab-text-color);
    margin-left: 25%;
	font-size: 4em;
	margin-bottom: .5em
}

#about-conffab header h1 #wd-event {
	font-size: .3em;
	margin-bottom: .4em;
}

#about-conffab header h1 #event-name {
	font-size: 1em;
	line-height: .4;
}

#about-conffab h2 {
    color: var(--conffab-text-color);
    line-height: 1.1;
    font-size: 2em;
    margin-bottom: .5em
}

#about-conffab h3 {
    color: var(--conffab-text-color);
    line-height: 1.1;
    font-size: 1.4em;
    margin-bottom: .5em;
    color: var(--conffab-text-color)
}

#about-conffab p {
    font-size: 1.2em
}

#about-conffab a {
    text-decoration: none;
    display: inline-block;
    width: 20%;
    margin 0 auto;
    background-color: var(--button-bg-color);
    border-radius: .2em;
    padding: .2em;
}

#about-conffab a+a {
    margin-left: 2em
}

.sr-only {
    display: none;
}

/*email signup*/

#signup>* {
    width: 58%;
    margin: 1em auto 0 auto;
    text-align: center
}

#signup form {
    /* overflow: auto */
}

#signup h2 {
    font-size: 2.2em;
    line-height: 1.1;
    margin-bottom: .5em
}


#signup form>div {
    width: 150%;
    display: inline-block
}

#signup form input {
    width: 100%;
    padding: .6em;
    font-size: .9em
}


#signup form>div:first-of-type {
    margin-right: 5%
}

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

#signup form div.sign input {
    width: 66%
}


#signup form button,
#signup form input[type="submit"] {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    color: var(--signup-text-color);
    background-color: var(--signup-button-bg-color);
    font-size: .9em;
    font-weight: 600;
    font-family: var(--body-font);
    border-radius: 3px;
    transition: .2s background-color;
    border: none
}

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

#signup a:link,
#signup a:visited {
    color: var(--signup-button-bg-color)
}

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

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

/*register iframe */

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

#register-now {
    width: 90%;
    height: 90vh;
    border: none;
    box-shadow: 2px 2px 9px #B0B0B0;
    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
}

/*about*/

#about {	
	margin-top: 3em;
	padding-top: 1em;
	padding-left: 4%;
	padding-right: 4%
}



#about img[src*="wide.jpg"] {
display: block;
width: 110%;
position: relative;
left: -10%
}

#about img[src*="about.jpg"] {
	width: 100%;
	display: block

}

#aboutus {
	width:60%;
	float: left;
	margin-left: 5%
}

#aboutus p {
	margin-right: 15%
}

#johnallsopp {
	width:38%;
	float: right;
	font-size: .8em;
}

#johnallsopp h3 {
	font-size: 1.1em;
	color: var(--light-text-color);	
	font-family: var(--body-font);
	font-weight: 500;
	margin-top: 1em
}

#johnallsopp > p {
	margin-right: 15%;
	color: var(--light-text-color);	
}


/*code of conduct*/

#code {
	background-color: var(--page-bg-color);
	color: var(--page-text-color);
	padding: 2em 25%;
	text-align: center
}

#code h2 {
	color: var(--coc-heading-color);
	font-size: 3em}

/*footer*/

body footer {
	font-size: .9em;
	color: var(--reverse-text-color);
	background-color:var(--reverse-bg-color);
	width: 84%;
	padding: 3em 8% 0 8%;
	overflow: hidden;
	display: block
}


footer > section {
	width: 16%;
	float: left

}

footer > section:first-of-type {
	float: left;
	margin-left: 8%
}

footer > section:last-of-type {
	float: right;
	margin-right: 0%;
	margin-bottom: 3em
}

footer h3 {
	font-variant: small-caps;
	text-transform: uppercase;
	font-size: inherit;
	font-weight: 500;
	color: var(--reverse-text-color);
	font-family: var(--body-font);
	
}

footer > p {
	clear: both;
	width: 50%;
	padding: 0 25%;
	margin-bottom: 2em;
	text-align: center
}


#testimonials, #remote-team {
	padding: 2em 8%;
	background-color: var(--testimonial-bg-color);
	overflow: hidden;
	color: var(--reverse-text-color)
}

#remote-team {
	margin-top: 1em
}

#testimonials h3, #remote-team h3 {
	color: var(--reverse-text-color);
	width: 65%;
	margin: 0 auto 1em auto;
	font-size: 1.2em;
	text-align: center;
	font-style: italic
}


#remote-team > p {
	text-align: center;
	margin-bottom: 1.6em 
}

.testimonial {width: 27%;
float: left;
margin: 0 6% 0 0;
vertical-align: baseline
}

.testimonial img {
	width: 25%;
	float: left;
	margin-bottom: 50%;
	margin-right: 5%;
	border-radius: 50%
}


.testimonial:last-childs {
	width: 20%
}

.testimonial blockquote {
font-size: .9em;
color: var(--reverse-text-color);
margin-right: 2%;
display: inline-block;
font-weight: 600;
line-height: 1.3;
width: 60%
}

.testimonial p {
	font-size: .8em; 
	font-weight: 300;
	line-height: 1.1;
	color: var(--reverse-text-color);
	margin-top: .5em 
}

/*about*/

#about, #cfp {	
	margin-top: 3em;
	margin: 0;
	overflow: hidden;
	background-color: var(--page-bg-color)
}

#cfp {
	width: 72%;
	padding: 0 8%;
	margin-top: 4em
}

#cfp h3 {
	font-size: 2em
}


#cfp h4 {
	font-size: 1.6em
}

#about h2, #cfp h2 {
font-family: "freight-display-pro", Georgia,  Helvetica, Arial,  sans-serif;
color: var(--about-heading-color); /*burntorange*/
font-size: 3em;
line-height: 1;
margin-top: 0;
}

#cfp li {
	list-style-type: disc;
	margin-left: 6%
}

#aboutus {
	width:55%;
	float: left
}

#aboutus p {
	font-size: 1.1em;
	margin-bottom: 1.5em;
}

#johnallsopp {
	width:38%;
	float: right;
	font-size: .9em
}

#johnallsopp h3 {
	font-variant: small-caps;
	text-transform: uppercase;
	font-size: .9em;
	color: var(--light-text-color)
}

#johnallsopp img {
	width: 25%;
	float: right;
	margin: 0 0 5% 5%
}



/*events part*/

/*paired eleemnts dfisplay side by side*/

#remote-conferences .conferences {
	display: flex;	
	flex-wrap: wrap;
	font-size: .8em;
	margin-bottom: 1em;
}

#remote-conferences > h1 {
	width: 84%;
	font-size: 2em;
	margin: 1em auto .5em auto;
	text-align: center
}

#remote-conferences a:link, #remote-conferences a:visited {
	text-decoration: none;
	color: var(--global-reverse-text-color)
}

#remote-conferences header h1 {
	margin-left: auto;
	margin-right: auto;
	font-size: 8em;
	margin-bottom: 1em;
}

#event-extra {
	font-size: .35em;
	display: block;
	line-height: 1;
	margin-top: -.1em;
	text-align: right;
}

#remote-conferences header 	 {
	font-size: .6em;
}

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

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

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

#remote-conferences #hoverconference .event-name, #remote-conferences #safeconference .event-name, #remote-conferences #codeconference .event-name {
	font-size: .8em;
	}
	
/* 
#remote-conferences #safeconference .event-name {
		font-size: 1em;
}
 */
	
#remote-conferences #aaaconference .event-name {
	font-size: 1.2em;
	line-height: .8;
	margin-top: -0.2em
}

	
#remote-conferences #lazyloadconference .event-name {
	margin-bottom: 0em;
	font-size: .7em;
}

#remote-conferences #globalscopeconference .event-name {
	margin-bottom: .25em;
	font-size: .5em;
}

#remote-conferences #remixedconference .event-name {
	font-size: 1.2em;
	line-height: .8;
	margin-top: -0.2em
}


/*hide the conference block on the page of the conference*/


/* #hover #remote-conferences #hoverconference {
	display: none
}

#lazyload #remote-conferences #lazyloadconference {
	display: none
}

#globalscope #remote-conferences #globalscopeconference {
	display: none
}

#codeconf #remote-conferences #codeconference {
	display: none
}

#aaa #remote-conferences #aaaconference {
	display: none
}

#safe #remote-conferences #safeconference {
	display: none
}

#remixed #remote-conferences #remixedconference {
	display: none
} */


.conference-block {
	width: 25%;
	padding-bottom:1em;
	padding-top: 48px;
	margin: 0;
  	flex-grow: 1;
  	font-size: .5em
}


.conference-block > p:last-of-type {
	display: none;
}

.conferences header .tagline {
	width: 50%;
    margin: 1em 24% 2em auto;

}

.conferences header h2:first-of-type, .conference-block header h3:first-of-type {
	width: 60%;
	margin: 0 20%;
}

/*rounded corners on the block */

.conferences header:nth-child(1) {
	border-top-left-radius: 20px;
}

.conferences header:nth-child(4) {
	border-top-right-radius: 20px;
}

.conferences header:nth-child(5) {
	border-bottom-left-radius: 20px;
}

.conferences header:nth-child(7) {
	border-bottom-right-radius: 20px;
}
/* hover */


header#hoverconference {
background-color: var(--hover-highlight-color);
background-image: var(--map-image), var(--hover-bg-image);
background-repeat: no-repeat,repeat-x;
background-position: 50% 50%,50% 5%;
background-size: contain, 10%;
}


/* global scope */


header#globalscopeconference {
background-color: var(--globalscope-highlight-color);
background-image: var(--map-image), var(--globalscope-bg-image);
background-repeat: no-repeat,repeat-x;
background-position: 50% 50%,50% 5%;
background-size: contain, 15%;
}

/* lazy load */


header#lazyloadconference {
background-color: var(--lazyload-highlight-color);
background-image: var(--map-image), var(--lazyload-bg-image);
background-repeat: no-repeat,repeat-x;
background-position: 50% 50%,50% 5%;
background-size: contain, 10%;
}


/*code*/


header#codeconference {
background-color: var(--code-highlight-color);
background-image: var(--map-image), var(--code-bg-image);
background-repeat: no-repeat,repeat-x;
background-position: 50% 50%,50% 5%;
background-size: contain, 15%;
}

/*safe*/


header#safeconference {
background-color: var(--safe-highlight-color);
background-image: var(--map-image), var(--safe-bg-image);
background-repeat: no-repeat,repeat-x;
background-position: 50% 50%,50% 5%;
background-size: contain, 9%;
}



body header.conference-block * {
	color: var(--global-reverse-text-color);

}

/*aaa*/


header#aaaconference {
background-color: var(--aaa-highlight-color);
background-image: var(--map-image), var(--product-bg-image);
background-repeat: no-repeat,repeat-x;
background-position: 50% 50%,50% 5%;
background-size: contain, 9%;
}

body header.conference-block * {
	color: var(--global-reverse-text-color);

}

/*remixed*/


header#remixedconference {
background-color: var(--remixed-highlight-color);
background-image: var(--map-image), var(--remixed-bg-image);
background-repeat: no-repeat,repeat-x;
background-position: 50% 50%, 0% 0%;
background-size: contain, 25%;
width: 50%;
font-size: .8em;
border-bottom-right-radius: 20px;
}

#remote-conferences header#remixedconference * {
	color: var(--remixed-bg-color);
}

body header.conference-block * {
	color: var(--global-reverse-text-color);
}


/*speakers*/

/* topic list for speakers section */

#topics {
	width: 85%;
	margin: 1em auto
}

#topics h3 {
	color: var(--reverse-text-color)
}

#topics p {
	text-align: justify;
	margin-bottom: .5em
}

#topics ul {
	margin-bottom: 1em;
}

.topic {
	font-size: .6em;
	display: inline-block;
	padding: .5em;
	border-radius: .4em;
	background-color: var(--main-theme-contrast-color);
	color: var(--reverse-text-color);
	/* color: black */
	 
}

.topic code {
	font-size: .8em 
}

.presenter {
	font-size: .6em;
	display: inline-block;
	padding: .5em;
	border-radius: .4em;
	background-color: var(--main-theme-highlight-color);
	color: var(--reverse-text-color) 
}

.presenter a {
	text-decoration: none;
}

/*for taking SVG snapshots*/

.snapshot #site, .snapshot .page, .snapshot main, .snapshot footer, .snapshot #date-time {
	display: none;
}

.snapshot header {
	background-image: var(--header-highlight-images), var(--header-bg-image);
}
.snapshot header .tagline {
	width: 30%
}

/*snaphot for thumbnail*/

.thumbshot #site, .thumbshot .page, .thumbshot h2,  .thumbshot main, .thumbshot footer, .thumbshot #date-time {
	display: none;
}

.thumbshot header {
	background-image: var(--header-highlight-images), var(--header-bg-image);
}
.thumbshot header .tagline {
	width: 50%
}