/*---variables---*/
/*---HPI Corporate Design colors---*/
/*---mobile-first layout---*/
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { font: 16px/1.5 Helvetica, Arial, sans-serif; color: #586368; margin: 0px; }

h1, h2, h3, h4, h5, h6 { color: #34434B; }

h1 { border-bottom: 3px solid #b1063a; }

h2 { color: #dd6108; }

h1 { font-size: 2em; }

h1:first-of-type { margin-top: 0px; }

#header-background { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: -1; background: url(../images/hpi_lg_blur.png); background-size: cover; }

#hero { color: #fff; position: absolute; top: 20vh; left: 0px; right: 0px; text-align: center; }
#hero h1 { color: #fff; }
#hero p { font-size: 130%; }
#hero img { max-width: 50%; }

#header-bottom { position: absolute; bottom: 5vh; left: 0px; right: 0px; text-align: center; }

a#down-arrow { text-decoration: none; padding: 9px 15px; border-radius: 50%; background: white; box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.18); font-size: 18px; font-weight: bold; color: #34434B; }

a#down-arrow:hover { transform: translateY(-1px); box-shadow: 0 8px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08); }

header { text-align: center; overflow: hidden; height: 100%; padding: 0 !important; }

header p { font-size: 14px; }

.sticky { padding: 1em 1em 1em; margin-left: 0.5em; }

nav { font-size: 18px; }

nav li { list-style-type: none; }

nav ul { flex-flow: row nowrap; justify-content: center; padding-left: 0px; }

.subnav { display: none; font-size: 14px; border-left: solid 2px #b1063a; padding-left: 12px; text-align: center; }

.subnav li { margin-right: 0px; }

.subnav li a { color: #dd6108; }

#register { background: #007a9e; color: #fff; border-radius: 6px; box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.18); padding: 0.6em 2em; font-size: 14px; text-align: left; user-select: none; }

#register:hover { background: #0082a8; transform: translateY(-1px); box-shadow: 0 8px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08); }

main > * { padding: 30px; border-radius: 12px; }

footer { text-align: center; }

::selection { background: #D7E7ED; /* WebKit/Blink Browsers */ }

::-moz-selection { background: #D7E7ED; /* Gecko Browsers */ }

a { color: #007a9e; text-decoration: none; transition: background-color 0.3s ease, color 0.5s ease; }

a:hover { color: #002b38; }

a.active { color: #34434B; }

img { max-width: 100%; max-height: 300px; }

#campus { display: block; margin: 0 auto; border-radius: 6px; }

.palaces { display: flex; flex-flow: row nowrap; justify-content: space-between; }
.palaces img { width: 50%; height: 50%; border-radius: 6px; margin: 0 3px; }

ul.program { padding-left: 0; }
ul.program li { list-style: none; }
ul.program li.day { color: #007a9e; font-size: larger; font-weight: bold; }
ul.program span { display: block; margin-left: 20px; }
ul.program span.session { font-style: italic; }
ul.program span.author { font-size: smaller; }
ul.program span.paper, ul.program span.keynote { font-weight: bold; }
ul.program span.time { color: #5a6065; border-bottom: 1px solid #D7E7ED; font-weight: bold; font-size: smaller; margin-left: 0; margin-top: 1em; }

a.sponsor-wrapper { color: white; display: inline-block; background-color: #dd6108; padding: 14px 20px 10px; border-radius: 6px; box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.18); }
a.sponsor-wrapper img { max-width: 200px; }

a.registration { display: block; background-color: #007a9e; color: white; padding: 10px 20px; border-radius: 6px; box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.18); text-align: center; }
a.registration:hover { background-color: #006685; }
a.registration span:first-of-type { font-size: 130%; font-weight: bold; padding-bottom: 4px; box-shadow: inset 0 -2px 0 0 #D7E7ED; }

ul.two-column { columns: 2; -webkit-columns: 2; -moz-columns: 2; }

/*---Slide-out nav---*/
body { -webkit-animation: bugfix infinite 1s; }

@-webkit-keyframes bugfix { from { padding: 0; }
  to { padding: 0; } }
input[type=checkbox] { position: fixed; top: -9999px; left: -9999px; }

label { position: fixed; display: none; width: 2em; height: 2.25em; padding: 0.3em !important; font-size: 1.4em; color: #000; cursor: pointer; user-select: none; margin: 0; }

/*---grid layout for larger screens---*/
@media (min-width: 680px) { .container { display: grid; grid-template-columns: [sidebar] 300px [content] auto [end]; grid-template-rows: [line1] 100vh [line2] auto [line3] 180px [line4]; justify-content: start; }
  .container > * { padding: 12px; }
  header { grid-column: sidebar / end; grid-row: line1; }
  .nav-wrapper { display: block; grid-column: sidebar; grid-row: line2; text-align: left; }
  .sticky.js-is-sticky { top: 0; }
  .sticky.js-is-stuck { bottom: 0; }
  nav ul { display: block; text-align: left; }
  .subnav { display: block; }
  .subnav li { text-align: left; }
  #register { margin-top: 18px; }
  footer { grid-column: sidebar; grid-row: line3; text-align: left; align-self: end; }
  main { max-width: 800px; grid-column: content; grid-row: line2 / line4; margin-right: 10px; }
  section:first-of-type { padding-top: 12px; }
  label { display: none; } }
@media screen and (max-width: 679px) { body { overflow-x: hidden; }
  header { height: 100vh; }
  ul.two-column { columns: 1; -webkit-columns: 1; -moz-columns: 1; }
  #hero p { font-size: 110%; }
  .logo-small img { position: fixed; top: 8px; left: 90px; display: block; height: 6em; width: 6em; }
  .sticky ul { margin: 0px; }
  main { padding: 1em 0em 30em 1em !important; }
  nav { font-size: 30px; }
  .subnav { font-size: 18px; }
  .nav-wrapper[role="off-canvas"] { position: fixed; top: 8em; left: -16em; width: 16em; border-radius: 0 6px 6px 0; background: white; box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.18); opacity: 0.9; }
  .nav-wrapper[role="off-canvas"] .sticky nav ul > li { height: 100%; width: 100%; text-align: left; margin: 0; }
  label { position: fixed; left: 0; top: 0; display: block; }
  label:after { color: #34434B; content: "\2261"; font-size: 3em; padding: 0 0.25em; border-radius: 6px; background: white; box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.18); opacity: 0.9; }
  input:checked ~ .nav-wrapper[role="off-canvas"] { left: 0; opacity: 1; }
  input:checked ~ main { margin-left: 16.5em; margin-right: -16.5em !important; float: right; }
  input:checked ~ label:after { color: #007a9e; } }