/*
  GraphConnect 2022 style
  graphconnect.com
  Style by Alex Schemagin, Snacks Studio
  madebysnacks.com
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&family=Nunito+Sans:wght@300;400;700&display=swap');
@import "app.min.css";
:root {
  --blue:#0087ff;
  --purple:#1934CB;
  --gold:#ffd964;
  --teal:#54f5de;
  --darkBlue:#09297d;
  --darkDark:#112344;
  --notBlack:#151E2A;
  --icon-triangle:url('img/icon-triangle-fill.svg');
  --logo-stacked:url('img/logo-graphconnect-stacked.svg');
  --logo-stacked-white:url('img/logo-graphconnect-line.svg');
  --logo-line:url('img/logo-graphconnect-line.svg');
  --logo-line-white:url('img/logo-graphconnect-line.svg');
  --font-primary:"Nunito Sans","Helvetica Neue",helvetica,roboto,arial,sans-serif;
  --font-secondary:"Noto Sans","Helvetica Neue",helvetica,roboto,arial,sans-serif;
}
*, *:before, *:after {-webkit-box-sizing:border-box; box-sizing:border-box; font-size:16px;}
*:focus {outline:none;}
html, body {
  -webkit-touch-callout:none;
  touch-action:manipulation;
  -ms-touch-action:manipulation;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth;
  margin:0; padding:0;
  background:var(--darkBlue); color:white;
}
-moz-::selection {background:var(--gold); color:var(--darkDark);}
-webkit-::selection {background:var(--gold); color:var(--darkDark);}
::selection {background:var(--gold); color:var(--darkDark);}
section {position:relative; display:flex; align-items:center; flex-flow:column nowrap; overflow-x:hidden;}
ul, ul li {list-style:none; padding:0; margin:0;}
img {z-index:1;}
h1, h2. h3, h4, h5, h6 {font-family:var(--font-primary);}

div.grid-container {display:flex; flex-flow:row wrap;}
a.button {background:none; border:1px solid white; transition:all 0.05s ease-in-out;}
a.button:hover {border:1px solid var(--blue); background:var(--blue);}
a.button.primary {
  background:var(--gold);
  border:1px solid var(--gold);
  color:var(--darkDark);
  margin-right:10px;
}
a.button.primary:hover {background:#FFCB2C; border:1px solid #FFCB2C;}
main section img {min-width:30%; max-width:160px; margin:0 0 30px;}
main section a,
main section a:hover {color:var(--teal);}

header {position:fixed;width:100%; z-index:100; transition:all 0.2s ease-in-out; display:flex; justify-content:flex-start;}
  header .menu {clear:both; max-height:0; transition:all .1s ease-in-out; position:absolute; top:0; left:0; width:100%; z-index:-1; box-sizing:border-box; padding:0 20px; background:var(--notBlack); display:flex; flex-flow:column nowrap;}
    header .buttons, header .header_logo, header .menu>div {display:none;}
    header.scrolled {background:var(--notBlack);}
    header.scrolled .header_logo,
    header .menu-btn:checked ~ .header_logo {display:inline-flex; height:40px; width:170px; margin:14px 10px; z-index:10;}
    header .menu-btn:checked ~ .menu>div {display:flex; flex-flow:row wrap; align-items:flex-start; padding:0 0 20px;}
    header.scrolled .buttons .button {
      display:inline-flex;
      margin-bottom:0;
    }
    header .menu>div {
      flex-flow:column nowrap;
      width:80%;
      margin:20px 0 0 10px;
    }
    header .menu>div a {display:inline-flex;width:auto;}
    header .menu a.button {margin:0 10px 0 0;}
    header .menu ul {
      margin:0 10px;
      padding:0;
      list-style:none;
      overflow:hidden;
      width:100%;
      display:none;
    }
      header .menu ul li {flex-basis:50%;}
      header .menu ul li a {padding:20px 20px 20px 0; text-decoration:none; color:white;}
        header .menu ul li a:hover, header .menu-btn:hover, header .menu ul li a:focus, header .menu-btn:focus {text-decoration:underline; color:inherit;}
header .menu-icon {
  cursor:pointer;
  display:inline-block;
  float:left;
  padding:2rem 1.5rem; margin:0;
  position:relative;
  user-select:none;
  z-index:101;
}
  header .menu-icon .navicon {
    background:white;
    display:block;
    height:3px;
    position:relative;
    transition:all .2s ease-out;
    width:28px;
  }
    header .menu-icon:hover .navicon, header .menu-icon:hover .navicon:before, header .menu-icon:hover .navicon:after, header .menu-icon:focus .navicon, header .menu-icon:focus .navicon:before, header .menu-icon:focus .navicon:after {background:var(--gold);}
header .menu-icon .navicon:before,
header .menu-icon .navicon:after {
  background:white;
  content:'';
  display:block;
  height:100%;
  position:absolute;
  transition:all .2s ease-out;
  width:38px;
}
  header .menu-icon .navicon:before {top:7px;}
  header .menu-icon .navicon:after {top:-7px;}
header .menu-btn {display:none;}
  header .menu-btn:checked ~ .menu {max-height:unset; transition:all .2s ease-in-out; top:0; padding:5rem 20px 2.5rem; z-index:-1;}
    header .menu-btn:checked ~ .menu ul {display:flex; flex-flow:row wrap;}

  header .menu-btn:checked ~ .menu-icon .navicon {background:transparent;}
    header .menu-btn:checked ~ .menu-icon .navicon:before {transform:rotate(-45deg);}
    header .menu-btn:checked ~ .menu-icon .navicon:after {transform:rotate(45deg);}
  header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {top:0;}

main section.masthead {
  display:flex; padding:2.5rem 0 0;
  background:-moz-linear-gradient(left,rgba(23,46,196,1) 0%,rgba(23,46,196,0) 100%);
  background:-webkit-linear-gradient(left,rgba(23,46,196,1) 0%,rgba(23,46,196,0) 100%);
  background:linear-gradient(to right,rgba(23,46,196,1) 0%,rgba(23,46,196,0) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#172ec4', endColorstr='#00172ec4',GradientType=1 );
}
main section.masthead_body {
  display:flex; flex-flow:column nowrap; align-items:flex-start; justify-content:flex-start; padding:9rem 0 0;
  background: -moz-linear-gradient(top,rgba(21,30,42,1) 0%,rgba(21,30,42,1) 30%, rgba(21,30,42,0) 100%);
  background: -webkit-linear-gradient(top,rgba(21,30,42,1) 0%,rgba(21,30,42,1) 30%,rgba(21,30,42,0) 100%);
  background: linear-gradient(to bottom,rgba(21,30,42,1) 0%,rgba(21,30,42,1) 30%,rgba(21,30,42,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6151e2a', endColorstr='#00151e2a',GradientType=0 );
}
main section.masthead_body .grid-container {
  width:100%;
  padding:0 1.5rem 2.5rem;
  flex-flow:column nowrap; align-items:flex-start;
  max-width:72rem;
}
  main section.masthead_body .grid-container p {max-width:500px;}
  main section.contact .grid-container p {display:flex; flex-flow:row wrap;}
    main section.contact .grid-container p a {margin:1rem 10px 0 0;}
main section.masthead_body a.button {}
main section.masthead .text-overline {padding:2.5rem 0 0;}
main section.masthead h1 {padding:0 0 1.5rem;}
main section.masthead div.grid-container {flex-flow:row nowrap; margin-left:0;}
  main section.masthead div.grid-container>div {width:100%; position:relative;}
  main section.masthead div.grid-container>div.left {z-index:2; padding:0 0 2.5rem;}
  main section.masthead div.grid-container>div.right {display:none;}
  @keyframes fade {0% {opacity:1} 33.333% {opacity:0} 66.666% {opacity:0} 100% {opacity:1}}
  @keyframes fade2 {0% {opacity:0} 33.333% {opacity:1} 66.666% {opacity:0 } 100% {opacity:0}}
  @keyframes fade3 {0% {opacity:0} 33.333% {opacity:0} 66.666% {opacity:1} 100% {opacity:0}}
  .slide1,.slide2,.slide3 {position:absolute; z-index:3; width:100%; height:100%;}
  .slide1 {
    background:url(img/img-speaker1.png) no-repeat;
    background-size:460px;
    animation:fade 16s infinite;
    -webkit-animation:fade 16s infinite;
    background-position:bottom center;
  }
  .slide2 {
    background:url(img/img-speaker2.png) no-repeat;
    background-size:cover;
    animation:fade2 16s infinite;
    -webkit-animation:fade2 16s infinite;
    background-position:bottom center;
  }
  .slide3 {
    background:url(img/img-speaker3.png) no-repeat;
    background-size:cover;
    animation:fade3 16s infinite;
    -webkit-animation:fade3 16s infinite;
    background-position:top left -80px;
  }
  main section.masthead::before {
    content:"";display:block; height:100%; width:100%; z-index:1;
    position:absolute; bottom:0; right:0;
    background:var(--icon-triangle) no-repeat;
    background-position:right -460px center;
    background-size:800px; opacity:0.8;
  }
  main section.masthead img {max-width:220px; margin:0;}

main section.dark,
main section.dark {background:var(--darkDark);}
main section.dark img {max-width:400px; margin:0 0 30px;}
main section.dark p {max-width:760px;}

main section.content-left {text-align:left; align-items:flex-start;}
main section.content-center{
  display:flex; flex-flow:column nowrap; align-items:center; justify-content:space-between;
  padding:3.5rem 2.5rem;
  margin:0 auto;
}
main section.content-center,
main section.content-center h1 {text-align:center;}
main section.content-center p {max-width:700px;}

main section ul.points {margin:30px 0 0;display:flex; flex-flow:row wrap; align-items:flex-start; justify-content:flex-start;}
main section ul.points li {
  flex-basis:100%;
  margin:0; padding:0;
  display:flex; flex-flow:row nowrap; align-items:center; justify-content:center;
}
main section ul.points li img {
  width:24px;
  height:24px;
  margin:0 10px 15px;
  min-width:unset;
  filter:invert(1);
}
main section ul.points li p {line-height:18px; font-size:16px; text-align:left;}

main section.agenda .img_timeline {display:none}
main section.venue img {display:none;}
main section.facts ul {display:flex; flex-flow:row wrap; justify-content:center;}
  main section.facts ul li {
    display:flex; flex-flow:column nowrap; justify-content:flex-start;
    width:50%; box-sizing:border-box; padding:20px; text-align:center; align-items:center;
  }
    main section.facts ul li h1 {margin:0 auto; padding:0 0 10px;}
    main section.facts ul li p {margin:0 auto; padding:0;}
    main section.facts ul li img {max-width:120px; margin:0 0 10px;}

.faqs ul, .agenda ul, .registration ul {width:100%;}
.faqs ul li,
.registration ul li,
.agenda ul li {padding:1.5rem 0; border-top:1px solid white;}
.registration ul li p {display:flex; flex-flow:row nowrap; justify-content:space-between; width:100%;}
main section.img-right {flex-direction:column-reverse;}
.faq-sponsors {width:100%;}
details {--height: auto; --ms: 250ms;}
summary {
  cursor: pointer;
  display: flex;
  padding:1rem 0 1rem 2px;
  user-select: none;
  border-top:1px solid white;
  color: white;
  font-size:16px;
  font-weight:700;
}
summary::-webkit-details-marker, details > summary::-webkit-details-marker {display:none;}
details:first-of-type summary{border-top:none;}
summary::after {
  content: '⌟';
  font-family:Monospace, sans-serif;
  font-size: 1.5em;
  display:flex; justify-content:center; align-items:center;
  width:20px; height:20px;
  margin-left: auto;
  margin-right:0;
  transform: rotate(45deg);
  transform-origin:center;
  transition: transform var(--ms) ease-in-out;
}
summary:hover, summary:focus {color:var(--teal);}
[open] > summary,
[open] > summary:hover,
[open]:hover > summary {}
[open] > summary::after,
details > summary[data-open="true"]::after { transform: rotate(225deg) translateY(-6px) translateX(-2px);; }
details > summary[data-open="false"]::after { transform: rotate(45deg) }

.accordion {overflow: hidden; transition: height var(--ms) ease-in-out; background:none;}
.accordion > div {
  contain: content;
  padding:0 0 0 2px;
  font-size:14px;
  transition: opacity var(--ms) ease-in-out,transform var(--ms) ease-in-out;
  display:flex; flex-flow:column nowrap; align-items:flex-start;
  box-sizing:border-box;
}
.accordion > div p {margin:1rem 0;}
.accordion[data-open="false"] { height: 0; }
.accordion[data-open="false"] > div {
  opacity: 0;
  transform: translateY(-50%);
}
.accordion[data-open="true"] { height: var(--height); }
.accordion[data-open="true"] > div {
  opacity: 1;
  transform: translateY(0%);
}

footer {background:var(--purple); padding-bottom:1rem; padding-top:0;}
footer .grid-container {padding:4.5rem 1.5rem 0;}
footer .grid-container>div {display:flex;flex-flow:column nowrap; width:100%;}
footer .grid-container div.baseline {
  display:flex;flex-flow:row wrap;justify-content:space-between;
  width:100%; padding-top:3rem;
}
footer .grid-container div.baseline div {width:100%; padding:10px 0 0;}
footer .grid-container div.baseline a {margin-right:10px;}
footer .text-overline {padding-top:2rem; margin-bottom:15px;}
footer a {color:white;}
footer img {max-width:220px;}
footer a:hover {color:white;}
footer ul.page-links {padding-top:3rem;}
footer ul.page-links li {padding:5px 0;}
footer ul.social-links {display:flex;flex-flow:row nowrap;}
footer ul.social-links li a {
  width:36px; height:36px;
  border-radius:50%;
  border:1px solid white;
  margin:0 10px 0 0;
  display:flex; justify-content:center; align-items:center;
}
footer ul.social-links li a:hover {
  border:1px solid var(--blue);
  background:var(--blue);
}


/* media queries */
@media (min-width:768px) {
  main section.masthead h1 {padding:0 5rem 1.5rem 0;}
  header .menu>div {margin:20px 0 0 66px; width:75%;}
  header .menu ul {margin:0 0 0 66px; width:65%;}
  header .menu ul li {flex-basis:33%;}
  header {justify-content:space-between;}
  header.scrolled .buttons,
  header .menu-btn:checked ~ .buttons {
    display:flex; justify-content:flex-end; align-items:center; align-content:center;
    padding:0 20px 0 0; margin:14px 0; box-sizing:border-box; height:100%; z-index:2; flex-grow:1;
  }
  footer .grid-container {padding:4.5rem 1.5rem 0; max-width:72rem;}
  footer .grid-container>div {
    padding:0;
    flex-flow:row wrap;
    justify-content:space-between;
  }
  footer ul.page-links {padding-top:0;}
  footer .grid-container div.left {width:60%;}
  footer .grid-container div.right {text-align:right; display:flex; align-items:center;}
  footer .grid-container div.baseline div.left {width:70%;}
  footer .grid-container div.baseline div.right {width:auto;}
  main section {padding-top:2.5rem; padding-bottom:2.5rem;}
  main section.content-center{margin:0 auto 4.5rem;}
  main section.dark>div {padding:0;}
  main section.masthead div.grid-container {
    padding:0 1.5rem;
    margin:0 auto;
    width:100%;
  }
  main section.masthead::before {
    background-position:right -30vw center;
    background-size:900px;
  }
  main section.masthead_body .grid-container{padding:0 1.5rem 2.5rem;}
  main section img {min-width:30%; max-width:240px; margin:0 30px 30px;}
  main section.venue img {display:flex;}
  main section.agenda>div {display:flex; flex-flow:row nowrap; width:100%; align-items:center;}
  main section.facts ul li {width:33%;}

  main section ul.points {flex-flow:row nowrap;}
  main section ul.points li {flex-basis:33.3333%; align-items:flex-start;}
  main section ul.points li p {line-height:1rem; font-size:14px;}
  main section.masthead img {max-width:400px;}
  main section.mix {flex-flow:row nowrap; margin:1.5rem auto; }
  main section.mix {text-align:left;}
  main section.content-right {text-align:right; margin-bottom:6rem;}
  main section.content-left {margin-bottom: 3rem; max-width: 72rem; padding:2.5rem 1.5rem;}
  main section.img-right {flex-direction:row;}
}
@media (min-width:1024px) {
  main section.masthead_body .grid-container{
    padding:0 1.5rem 2.5rem;
    max-width:72rem;
  }
  footer img {max-width:400px;}
  main section.dark>div {max-width:72rem; margin:0 auto; padding:0;}
  main section.agenda .img_timeline {background:url(img/img-homepage-agenda.svg) no-repeat; background-size:cover; background-position:left center; height:50px; width:100%; display:flex; margin-left:2.5rem;}
  main section.masthead::before {background-position:right -20px center;}
  main section.dark {max-width:unset; padding:3rem 1.5rem;}
  main section.masthead div.grid-container {position:relative;}
  main section.masthead div.grid-container>div {width:55%; z-index:1;}
  main section.masthead div.grid-container>div.right {
    display:flex;
    position: absolute;
    right: -60px;
    bottom: 0;
    height: 100%;
    width: 70%;
  }
  main section.facts ul {justify-content:space-between;}
  main section.facts ul li {width:20%;}
  main section.facts ul li img {max-width:180px;}
  main section.mix img {margin:0 60px 0 120px;}
}
@media (min-width:1280px) {
  main section.masthead_body .grid-container{
    padding: 0 1.5rem 2.5rem;
    max-width:72rem;
  }
  header .menu>div {width:40%;}
  main section.mix,
  main section.masthead div.grid-container {
    min-width:72rem;
    padding:1rem 1.5rem;
  }
  footer .grid-container {padding:4.5rem 1.5rem 0;}
  main section.dark>div {padding:0 1.5rem;}
  footer .grid-container>div {padding:0;}
  main section.masthead div.grid-container {margin:0 auto; padding:1rem 2.5rem 0;}
  .slide3 {background-position:bottom -118px left -60px;}
  main section.agenda .img_timeline {height:70px;}
}
@media (min-width:1366px) {
  main section.masthead_body {padding:10rem 0 0;}
  main section.masthead div.grid-container {padding:0 3rem;}
  main section.masthead::before {background-position:right 10vw center;}
  .slide3 {background-position:bottom -138px left -60px;}
}
@media (min-width:1800px) {
  main section.masthead_body {padding:11.5rem 0 0;}
  header .menu>div {width:30%;}
  header .menu ul {width:33%;}
  main section.masthead::before {background-position:right 20vw bottom -120px;}
}