| body { |
| font-family: 'Montserrat', sans-serif; |
| font-size: 18px; |
| box-sizing: border-box; |
| margin: 0; padding: 0; |
| } |
| *, *:before, *:after { |
| box-sizing: inherit; |
| } |
| a { |
| color: #212078; |
| text-decoration: none; |
| } |
| a:hover { |
| text-decoration: underline; |
| } |
| .icon { |
| vertical-align: bottom; |
| } |
| p.lead { |
| margin: 0 0 40px 0; |
| font-size: 30px; |
| font-weight: 200; |
| } |
| .header { |
| background-color: #12011f; |
| color: white; |
| padding: 10px 0; |
| } |
| .leftright { |
| display: grid; |
| grid-template-columns: 80px 1fr; |
| align-items: center; |
| } |
| @media (max-width: 600px) { .leftright { grid-template-columns: 1fr; } } |
| .right { |
| text-align: right; |
| } |
| .right a { |
| color: white; |
| } |
| .right a + a { |
| padding-left: 10px; |
| } |
| .banner { |
| background-color: #12011f; |
| color: white; |
| } |
| .banner > .container { |
| padding: 240px 0 0 0; |
| background-image: url("banner.jpg"); |
| background-size: auto 100%; |
| background-repeat: no-repeat; |
| background-position: right; |
| height: 600px; |
| } |
| .banner-connect { |
| font-size: 80px; |
| font-weight: 700; |
| margin: 0 0 0 60px; |
| } |
| .banner-info { |
| font-size: 28px; |
| font-weight: 400; |
| margin: 40px 0 0 60px; |
| } |
| .banner-desc { |
| font-size: 20px; |
| font-weight: 200; |
| margin: 10px 0 0 60px; |
| max-width: 560px; |
| } |
| @media (max-width: 1200px) { |
| .banner > .container { |
| padding: 180px 0 0 0; |
| background-position: center right -120px; |
| height: 450px; |
| } |
| } |
| @media (max-width: 900px) { |
| .banner > .container { |
| padding: 120px 0 0 0; |
| background-position: center right -120px; |
| height: 350px; |
| } |
| .banner-connect { |
| font-size: 60px; |
| margin: 0 0 0 40px; |
| } |
| .banner-info { |
| font-size: 24px; |
| margin: 20px 0 0 40px; |
| } |
| .banner-desc { |
| font-size: 18px; |
| margin: 10px 0 0 40px; |
| max-width: 500px; |
| } |
| } |
| @media (max-width: 720px) { |
| .banner > .container { |
| padding: 60px 0 0 0; |
| } |
| span.banner-when, span.banner-where { |
| display: block; |
| } |
| span.banner-dash { |
| display: none; |
| } |
| .banner-desc { |
| max-width: 300px; |
| } |
| } |
| @media (max-width: 520px) { |
| .banner > .container { |
| background-position: center right 100%; |
| } |
| } |
| .container { |
| margin: 0 auto; |
| max-width: 1200px; |
| padding: 0 20px; |
| } |
| article { |
| padding: 40px 0; |
| } |
| .grid { |
| max-width: 900px; |
| margin: 0 auto 40px auto; |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| row-gap: 20px; |
| column-gap: 20px; |
| } |
| @media (max-width: 1200px) { .grid { grid-template-columns: 1fr 1fr; } } |
| @media (max-width: 800px) { .grid { grid-template-columns: 1fr; } } |
| .tile { |
| display: grid; |
| row-gap: 20px; |
| grid-template-columns: 60px 1fr; |
| } |
| .icon span { |
| font-size: 48px; |
| color: #951c7a; |
| } |
| .tile h3 { |
| font-weight: 200; |
| font-size: 30px; |
| margin: 0 0 8px 0; |
| } |
| .tile p { |
| margin: 0 0 8px 0; |
| } |
| section { |
| margin: 40px 0; |
| } |
| h2 { |
| font-weight: 200; |
| font-size: 40px; |
| margin: 0; |
| } |
| |
| table { |
| border-collapse: collapse; |
| } |
| th { |
| background-color: #f0f0f0; |
| padding: 10px 20px; |
| text-align: left; |
| font-weight: 400; |
| } |
| td { |
| vertical-align: top; |
| padding: 10px 20px; |
| border-bottom: solid 1px #f0f0f0; |
| } |
| tr.break td { |
| background-color: #f9f9f9; |
| } |
| div.schedule { |
| margin-top: 20px; |
| } |
| .speaker { |
| display: grid; |
| grid-template-columns: 200px 1fr; |
| column-gap: 40px; |
| margin-top: 20px; |
| } |
| .speakerimg { |
| width: 200px; |
| height: 200px; |
| background-color: #f0f0f0; |
| border-radius: 20px; |
| } |
| .speakerimg img { |
| width: 200px; |
| height: 200px; |
| border-radius: 20px; |
| } |
| @media (max-width: 600px) { |
| .speaker { |
| grid-template-columns: 100px 1fr; |
| column-gap: 20px; |
| } |
| .speakerimg { |
| width: 100px; |
| height: 100px; |
| } |
| .speakerimg img { |
| width: 100px; |
| height: 100px; |
| } |
| } |
| h3 { |
| font-weight: 200; |
| font-size: 30px; |
| margin: 0; |
| } |
| .speakerlinks { |
| font-size: 24px; |
| } |
| .speakerlinks a { |
| margin: 0 10px; |
| } |
| .session { |
| margin-top: 20px; |
| } |
| .sessionvid { |
| margin-left: 10px; |
| } |
| .who a { |
| margin-right: 20px; |
| } |
| .who img { |
| width: 30px; |
| height: 30px; |
| vertical-align: -40%; |
| border-radius: 4px; |
| margin-right: 8px; |
| } |
| #sponsorlist { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| column-gap: 160px; |
| row-gap: 80px; |
| align-items: center; |
| margin-top: 40px; |
| } |
| #sponsorlist img { |
| width: 100%; |
| } |
| @media (max-width: 1000px) { |
| #sponsorlist { |
| column-gap: 80px; |
| } |
| } |
| @media (max-width: 700px) { |
| #sponsorlist { |
| grid-template-columns: 1fr; |
| margin: 20px; |
| row-gap: 40px; |
| } |
| } |
| |