@import 'custom-properties.css';
@import 'narrow/top-navigation.css';

/*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: 10%;
	/* background-position: 1%; */
}

#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: repeat-y;
	background-size: 10%;
	/* 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);
}



/*partners*/

#partners h2 {
  font-size: 2.9em;
  color: var(--main-theme-highlight-color)
}

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

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

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

#our-partners img {
  width: 100%
}


#our-partners {
  width: 100%;
  margin-bottom: 2em
}

#partners img {
  width: 100%
}

#our-partners .major-partner {
  margin-bottom: 2em
}


#our-partners h3 {
  font-variant: small-caps;
  text-transform: uppercase;
  font-size: .9em;
  color: var(--light-text-color);
  margin: 1.6em 0
}

#community-partners {
  overflow: auto;
  margin-bottom: 2em
}

.exhibitor {
  width: 40%;
  float: left;
}

.community-partner:nth-of-type(even) {
  margin-left: 15%
}


/*partners*/

#partners h2 {
    font-size: 2.9em;
    color: #5c5f71
}

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

#our-partners h3,
#community-partners h3 {
    font-variant: small-caps;
    text-transform: uppercase;
    font-size: .9em;
    color: #676767;
    margin: 0 0 1.6em 0
}

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

#our-partners img {
    width: 100%
}


#our-partners {
    width: 100%;
    margin-bottom: 2em
}

#partners img {
    width: 100%
}

#our-partners .major-partner {
    margin-bottom: 2em
}


#our-partners h3 {
    font-variant: small-caps;
    text-transform: uppercase;
    font-size: .9em;
    color: #676767;
    margin: 1.6em 0
}

#community-partners {
    overflow: auto;
    margin-bottom: 2em
}

.community-partner,
.exhibitor {
    width: 40%;
    float: left;
}

.community-partner:nth-of-type(odd),
.exhibitor:nth-of-type(odd) {
    margin-left: 15%
}

/*register*/

.sold-out {
    opacity: .5
}



#respond {
    display: none;
}


/*about-conffab*/

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

#about-conffab header h1 {
    margin-bottom: .2em
}



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

#about-conffab h3 {
    color: #fff;
    line-height: 1.1;
    font-size: 1.6em;
    margin-bottom: .5em
}

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

#about-conffab a {
    text-decoration: none;
    display: block;
    width: 100%;
    margin 0 auto;
    background-color: #4885ed;
    border-radius: .2em;
    padding: .2em;
    margin-bottom: .75em;
}

#about-conffab a {
    display: inline-block;
    width: 44%;
    margin 0 auto;

}

.sr-only {
    display: none;
}

/*code of conduct*/

#code {
  background-color: var(--page-bg-color);
  color: var(--page-text-color);
  text-align: center;
  width: 80%;
  margin: 0 auto
}

#code h2 {
  color: var(--coc-heading-color);
  font-size: 3em;
  line-height: 1;
  margin-top: 1em
}

/*footer*/

body footer {
  font-size: 1.1em;
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: 66%;
  margin: 0 auto 2em auto
}


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: 100%;
  margin-bottom: 2em;
  text-align: center
}

/*testimonials*/

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

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


#testimonials h3 {
  display: none
}

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


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

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

.testimonial {
  width: 100%;
  margin: 0 auto;
  vertical-align: baseline;
  clear: both
}


/*about*/

#about {
  margin-top: 3em;
  margin: 0;
  overflow: hidden;
  background-color: var(--reverse-text-color)
}

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

#aboutus {
  width: 100%;
}

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

#johnallsopp {
  width: 100%;
  font-size: 1em
}

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

/*conference lineup*/

#remote-conferences {
	display: block;
}

#remote-conferences > h1 {
	display: none
}

/*speakers*/

/* topic list for speakers section */

#topics {
	width: 100%;
	margin: 0 auto
}

#topics > * {
	padding: 0 2%
}

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

.topic {
	font-size: .8em;
	display: inline-block;
	padding: .5em;
	border-radius: .4em;
	background-color: var(--main-theme-contrast-color);
	color: var(--reverse-text-color);
	margin-bottom: .3em;

}


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

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


/* remote events*/

/*header*/

#remote-conferences header * {
	color: var(--reverse-text-color)
}

body > header {
padding-top: 2em;
padding-bottom:3em;
background-size: 10vw;

}


.conference-block p:last-of-type {
	text-align: center;
	padding-top: 2em;
	font-size: 1.5em;
	font-weight: 700;
}

.conference-block p:last-of-type a {
	padding: .4em 1em;
	border: solid .1em;
	border-radius: .3em;
	color: var(--reverse-text-color)
}

/* hover */


body 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, 5%;
}


/* global scope */


body 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 */


body 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, 5%;
}


/*code*/


body 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%;
}

/* aaa */

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


/*safe*/


body 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, 4.5%;
}

/*product*/


body header#productconference {
background-color: var(--product-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, 4.5%;
}


/*summit*/

body header#summit {
background-color: var(--summit-highlight-color);
color: var(--summit-contrast-color);
background-image: var(--summit-highlight-image), var(--summit-bg-image); 
background-repeat: no-repeat, repeat-x;
background-position: 0% 100%, 50% 5%;
background-size: contain, 3%;
padding-top: 94px;
width: 100%;
font-size: .8em
}

#summit * {
	color: inherit
}

/*remixed*/

body 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: 0% 50%, 50% 5%;
background-size: contain, 20%;
}

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


body header {
padding-top: 2em;
padding-bottom:3em;
}

body header a:link {
	text-decoration: none
}


header h1 {
color: #fff;
text-align: left;
line-height: 1;}

header h1 {
font-size: 4em;
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: .3em
}

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

#hoverconference .event-name {
	font-size: 1em;
}

#aaaconference .event-name {
	font-size: 1.3em;
}


#codeconference .event-name, #safeconference .event-name {
	font-size: 1.2em;
}

#aiconference .event-name {
	font-size: 3em
}

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

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


header h2 {
font-size: 1.6em;
color: #fff;
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 .venue {
	font-size: .8em
}

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


header h2 strong {
font-weight: 900}

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

header .tagline {
	color: #fff;
	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: #fff;
	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: #fff;
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;
	font-size: .7em
}




header h4 {
	font-size: 1.6em;
	color: #fff;
	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: rgb(36, 104, 190 );
	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: #fff;
	border: solid thin #fff;
	margin-left: 0

}

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