@import url('custom-properties.css');
@import url('events-on-frontpage.css');
@import url('conffab.css');
@import url('all-access.css');

/* overriding  */

@media (min-width: 768px) {
    body #masthead .logo {
        width: 20%;
    }
}

@media (min-width: 768px) {
    body #masthead {
        padding: 0 0 0 5%;
    }
}

#masthead .logo .wdlogo {
	font-family: var(--body-font);
	color: var(--global-text-color);
	font-weight: 600;
	font-size: .5em;
	padding-left: 15%;
	background-image: var(--wdlogo);
	background-repeat: no-repeat;
	background-size: 13%;
	background-position: 3% 50%
}

body #masthead #main-navigation a span {
	font-size: .9em;
	color: var(--site-light-text-color);
	line-height: 1.2;
}

body #masthead #main-navigation ul {
}

body #masthead #main-navigation ul li {
	flex-grow: 1;
}

@media (max-width: 767px) {

	#masthead .logo .wdlogo {
		font-size: .4em;
	}
	
	body #masthead #main-navigation a span {
	font-size: .9em;
	color: var(--site-x-light-text-color);
	line-height: 1.2;
}

}


body #masthead .logo .desc {
    font-weight: normal;
    font-family: var(--body-font);
    margin-left: 15%;
	font-size: .9rem;
	color: var(--site-light-text-color);
	line-height: 1.2;}

 @media (min-width: 768px) {
   body #masthead #main-navigation {
        display: block;
        float: right;
        max-width: 80%;
    }
}
.conferences h1, .conferences h2, h3, h4, h5, h6, h7 {
	font-family: var(--heading-font);
}


#heroshot header, #heroshot blockquote{
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}


@media (min-width: 768px) {
	body #heroshot > header h2 {
		font-size: 2.6rem;
		text-decoration: none;
		line-height: 1.1;
	}
}

@media(max-width: 767px) {
	body #heroshot > header h2 {
		font-size: 1.6rem;
		text-decoration: none;
		line-height: 1.1;
	}
}

body #heroshot h2 a {
    text-decoration: none;
    color: #13C2BB;
}

/*events part*/

#remote-conferences {
	width: 94%;
	margin: 0 auto; 
}

 @media (max-width: 767px) {
 
	body .events-list.container {
	margin: 0
	}


	body #remote-conferences {
		width: auto
	}

	body #remote-conferences > p {
		width:80%;
	}
	
}

#remote-conferences > p {
	width: 50%;
	margin: 1em auto
}

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

#remote-conferences 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 */
}

 @media (max-width: 767px) {
 	body #remote-conferences header  {
		font-size: .5em
	}
 
 }

#remote-conferences header h1 span {
display: block;
}

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

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

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

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

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

#remote-conferences header h2 span{
	display: block
}

#remote-conferences header h2 .city {
	font-weight: 600
}

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

#remote-conferences header h2 {
	width: 24%;
	display: inline-block
}

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

#remote-conferences header h2 strong {
font-weight: 900}

#remote-conferences 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;
}

#remote-conferences header .tagline {
color: var(--reverse-text-color);
width: 60%;
font-size: 1.6em;
font-weight: 600;
font-family: var(--body-font);
margin: 1em auto 2em auto;
line-height: 1.1;
text-align: center;
}

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


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

#remote-conferences header h3 span{
	display: block
}

#remote-conferences header h3 .city {
	font-weight: 600
}

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

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

#remote-conferences header h2, #remote-conferences header h3 {
	width: 50%;
	display: inline-block;
	margin: 0 auto;
}

#remote-conferences header h2:first-of-type, #remote-conferences header h3:first-of-type {
	margin-left: 30%;
	
}


#remote-conferences 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;

}

/*paired eleemnts dfisplay side by side*/

@media (min-width: 768px) {

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

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

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

#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 #safeconference .event-name {
	font-size: 1em;
	line-height: .8;
}

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

@media (min-width: 768px) {
	#remote-conferences #remixedconference .event-name {
		font-size: 1.2em;
	}
}

	.conference-block {
		width: 100%;
		padding:1em 0;
		margin: 0;
	}
	
	
@media (min-width: 768px) {

	.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 {
	margin-left: 36%;
}

/*rounded corners on the block */

@media (min-width: 768px) {


	.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%;
font-size: .8em;
}

@media (min-width: 768px) {
	header#remixedconference {
		width: 50%;
	}
}
#remote-conferences header#remixedconference * {
	color: var(--remixed-bg-color);
}

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


#masthead #main-navigation li.hover {
  border-color: var(--hover-highlight-color);
}
#masthead #main-navigation li.lazyload {
  border-color: var(--lazyload-highlight-color);
}
#masthead #main-navigation li.globalscope {
  border-color: var(--globalscope-highlight-color);
}

#masthead #main-navigation li.code {
  border-color: var(--code-highlight-color);
}

#masthead #main-navigation li.aaa {
  border-color: var(--aaa-highlight-color);
}

#masthead #main-navigation li.safe {
  border-color: var(--safe-highlight-color);
}

#masthead #main-navigation li.remixed {
  border-color: var(--remixed-highlight-color);
}

#masthead #main-navigation li.summit {
  border-color: var(--summit-highlight-color);
}

#masthead #main-navigation li.leaders {
  border-color: var(--leaders-highlight-color);
}

#masthead #main-navigation li.product {
  border-color: var(--product-highlight-color);
}


#masthead #main-navigation li.dev-summit {
  border-color: var(--dev-summit-highlight-color);
}

#masthead #main-navigation li.next {
  border-color: var(--next-highlight-color);
}



#masthead #main-navigation li.more {
  border-color: #ceced9;
}

/* side by side comonents */

/* 
.sidexside {
	display: flex
}

.sidexside > * {
	width: 50%
}
 */



body .featured-wrapper .featured-list .first h3 {
	font-size: 2em;
	margin-bottom: 3em
}

#masthead #main-navigation.mobile {
	z-index: 1;
}