@import url("https://use.typekit.net/oly4kpp.css");

:root{

	--text-color: #000;
	--reverse-text-color: #fff;

	--summit-highlight-color: rgba(0, 0, 0, 1);
	--summit-bg-color: rgba(29, 211, 175, 1);
	--summit-bg-color: rgb(165, 223, 0);
	--summit-bg-hover-color: rgba(29, 211, 175, .1);
	--summit-contrast-color: #086375;
	--summit-header-bg-color: #1dd3b0;
	
	--ai-theme-color: #ff6e61;
	--ai-highlight-color: #0f2f52;
	--ai-contrast-color: #086375;
	--ai-header-bg-color: #1dd3b0;
	--reverse-heading-color: #f2f2f2;
	
	--design-color: #F26178;
	--career-color: #AFE2E3;
	
	--summit-header-bg-image: url(/event-common-images/chrome/summit22-yiying-header.svg);
	--summit-header-bg-image-square: url(/event-common-images/chrome/summit22-yiying-header–square.jpg);
	
	--summit-bg-images: url(/event-common-images/chrome/aqua-arrows-single.svg);
	--summit-highlight-image: url(/event-common-images/chrome/summit-header-highlight.svg);
	--summit-font: "montserrat", "Helvetica Neue",  Helvetica, Arial, sans-serif;

}

/* about-summit embed */
/* implements the new summit style for embed */

@media (min-width: 768px) {

	.events37 {
		display: flex;
	}
}

@media (min-width: 768px) {

	#about-summit {
		font-family: var(--summit-font);
		width: 60%;
		margin: 0 auto;
		padding: 0;
		background-image: var(--summit-header-bg-image-square);
/* 		aspect-ratio: 16/9; */
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 50%;
	}
	
	#about-summit header h1 {
		color: var(--summit-highlight-color);
		font-size: 3em;
		font-family: var(--summit-font);
		font-weight: 900;
		text-align: left;
		width: fit-content;
		margin: 0;
		text-transform: uppercase;
	}


	#about-summit h1 > span {
		display: block;
		margin-bottom: .1em;
		padding: .1em .2em;
		background-color: var(--summit-bg-color);
		width: fit-content;
		}


	#about-summit .tagline, #about-summit section.details {
		color: var(--global-reverse-text-color);
		background-color: var(--site-neutral-text-color);
		width: fit-content;
		font-size: 1.2em;
		font-weight: 600;
		font-family: var(--body-font);
		margin: 0;
		line-height: 1.1;
		text-align: left;
		padding: .4em;
		margin-bottom: .5em;
		max-width: 90%
	}

	#about-summit > p:last-child {
		text-align: right;
	}

	#about-summit header {
		margin-bottom: 5em
	}

	#about-summit .button {
		display: block;
		width: fit-content;
		margin: 2em 10% 2em auto;
		background-color: var(--summit-highlight-color);
		color: var(--global-reverse-text-color);
		text-decoration: none;
		padding: .5em 2em;
		text-align: center;
		font-weight: 600;
		background-color: var(--design-color);
		box-shadow: .25em .25em var(--career-color);
	}

	#about-summit .button:hover {
		background-color: var(--career-color);
		box-shadow: .25em .25em var(--design-color);
		color: var(--site-neutral-text-color)
	}
}

@media (max-width: 767px) {

/* about-summit embed */

	#about-summit {
	font-family: var(--summit-font);
	width: 100%;
	margin: 1em auto;
	padding: 5em 0;
	background-image: var(--summit-header-bg-image-square);
	background-size: cover;
	background-position: 50%;
	font-size: .7em
	}

	#about-summit header {
		padding-top: 5em;
		padding-bottom: 0
	}

	#about-summit header h1 {
	color: var(--summit-highlight-color);
	font-size: 3em;
	font-family: var(--summit-font);
	font-weight: 900;
	text-align: left;
	width: fit-content;
	margin: 0;
	text-transform: uppercase;
	}


	#about-summit h1 > span {
		display: block;
		margin-bottom: .1em;
		padding: .1em .2em;
		background-color: var(--summit-bg-color);
		width: fit-content;
		}


		#about-summit .tagline, #about-summit section.details {
			color: var(--global-reverse-text-color);
			background-color: var(--site-neutral-text-color);
			width: fit-content;
			font-size: 1.2em;
			font-weight: 600;
			font-family: var(--body-font);
			margin: 0;
			line-height: 1.1;
			text-align: left;
			padding: .4em;
			margin-bottom: .5em;
			max-width: 100%
		}

	#about-summit > p:last-child {
		text-align: right;
	}

	#about-summit header {
		margin-bottom: 5em
	}

	#about-summit .button {
		display: block;
		width: fit-content;
		margin: 2em 10% 2em auto;
		background-color: var(--summit-highlight-color);
		color: var(--global-reverse-text-color);
		text-decoration: none;
		padding: .5em 2em;
		text-align: center;
		font-weight: 600;
	background-color: var(--design-color);
	box-shadow: .25em .25em var(--career-color);
	}

	#about-summit .button:hover {
	background-color: var(--career-color);
	box-shadow: .25em .25em var(--design-color);
	color: var(--site-neutral-text-color)
	}
}

/* ai */

@media (min-width: 768px) {
	#about-ai {
		width: 40%;
		font-family: var(--summit-font);
	}
	
	 #about-ai header {
        padding-top: 2.5em;
        background-color: var(--ai-theme-color);
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		border-bottom: solid 1em #000
		
    }
	
	#about-ai h1 {
		font-family: var(--summit-font);
		font-weight: 900;
		text-transform: uppercase;
		color: var(--reverse-heading-color);
		font-size: 2em;
		width: 60%;
	}
	
	#about-ai h1 span {
		display: block;
		margin-bottom: .1em;
		padding: .1em .2em;
		background-color: var(--ai-highlight-color);
		width: fit-content;
	}
	
	#about-ai .intro {
		width: 40%
	}
	
	#about-ai .tagline {
		display: block;
		margin-bottom: .1em;
		padding: .1em .2em;
		background-color: var(--ai-highlight-color);
		width: fit-content;
		color: var(--reverse-heading-color);
		font-weight: 600

	}

	#about-ai .description {
		width: 100%;
		margin-inline: 0;
		padding: .5em 5%;
		margin-block-start: 2em;
		color: var(--text-color);
		font-weight: 600;
		background-color: var(--career-color);
		margin-block: 0;
		border-top: solid 1em #000;
		font-size: 1.2em;
	}
	
	#about-ai .description strong {
		color: var(--ai-theme-color)
	}
	
	#about-ai .intro p {
	}
	
	#about-ai .button {
		display: block;
		width: fit-content;
		margin: 2em 10% 2em auto;
		background-color: var(--summit-highlight-color);
		color: var(--text-color);
		text-decoration: none;
		padding: .5em 2em;
		text-align: center;
		font-weight: 600;
		background-color: var(--summit-bg-color);
		box-shadow: .25em .25em var(--ai-highlight-color);
	}
	
	#about-ai .button:hover {
		color: var(--reverse-text-color);
		background-color: var(--ai-highlight-color);
		box-shadow: .25em .25em var(--summit-bg-color);
	}

}

@media (max-width: 767px) {
	#about-ai {
		width: 100%;
		font-family: var(--summit-font);
	}
	
	 #about-ai header {
        padding-top: 2.5em;
        background-color: var(--ai-theme-color);
		height: 100%;
/* 
		display: flex;
		flex-wrap: wrap;
 */
		border-bottom: solid 1em #000
		
    }
	
	#about-ai h1 {
		font-family: var(--summit-font);
		font-weight: 900;
		text-transform: uppercase;
		color: var(--reverse-heading-color);
		font-size: 2em;
/* 
		width: 60%;
 */
	}
	
	#about-ai h1 span {
		display: block;
		margin-bottom: .1em;
		padding: .1em .2em;
		background-color: var(--ai-highlight-color);
		width: fit-content;
	}
	
	#about-ai .intro {
/* 
		width: 40%
 */
	}
	
	#about-ai .tagline {
		display: block;
		margin-bottom: .1em;
		padding: .1em .2em;
		background-color: var(--ai-highlight-color);
		width: fit-content;
		color: var(--reverse-heading-color);
		font-weight: 600

	}

	#about-ai .description {
		width: 100%;
		margin-inline: 0;
		padding: .5em 5%;
		margin-block-start: 2em;
		color: var(--text-color);
		font-weight: 600;
		background-color: var(--career-color);
		margin-block: 0;
		border-top: solid 1em #000;
		font-size: 1.2em;
	}
	
	#about-ai .description strong {
		color: var(--ai-theme-color)
	}
	
	#about-ai .intro p {
	}
	
	#about-ai .button {
		display: block;
		width: fit-content;
		margin: 2em 10% 2em auto;
		background-color: var(--summit-highlight-color);
		color: var(--text-color);
		text-decoration: none;
		padding: .5em 2em;
		text-align: center;
		font-weight: 600;
		background-color: var(--summit-bg-color);
		box-shadow: .25em .25em var(--ai-highlight-color);
	}
	
	#about-ai .button:hover {
		color: var(--reverse-text-color);
		background-color: var(--ai-highlight-color);
		box-shadow: .25em .25em var(--summit-bg-color);
	}

}