html {scroll-behavior: smooth;} #headline {margin-bottom:0;} #head-image {display:block; width:100%;} .extra label {font:18px/22px 'Apercu Pro', arial, sans-serif; color:#f50; text-decoration:underline; display:inline-block; margin-top:10px; cursor:pointer;} #congres {width:95%; max-width:1800px; margin:0 auto;} #congres h1 {padding:0; margin:0; font:9vw/9vw 'gothammediumregular', arial, sans-serif; color:#070C19;} @media only screen and (max-width: 900px) { #congres h1 {padding:0; margin:0; font:60px/60px 'gothammediumregular', arial, sans-serif; color:#070C19;} } #sections {width:95%; max-width:1780px; margin:80px auto;} #sections h2 {font:30px/45px 'gothammediumregular', arial, sans-serif; color:#070C19; padding:20px 0 0 0; margin:0;} #sections h2 span {display:inline-block; color:#BEBDBD; margin-right:10px;} #sections .more {float:right; appearance:none; display:block; box-sizing:border-box; margin:20px 60px 0 0; padding:0; width:44px; height:45px; cursor:pointer; background:url('../images/icon-off.png'); border-radius:0;} #sections .extra {display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.5s; width: 100%; margin:-45px 0 40px 0; background:#EBEBEB;} #sections .extra div {min-height: 0; align-self: end;} #sections .more:not(:checked):hover {background:url('../images/icon-on.png');} #sections .more:checked {background:url('../images/icon-close.png');} #sections .more:checked + h2 {background:#EBEBEB;} #sections .more:checked + h2 + .extra {grid-template-rows: 1fr;} #sections .extra div.inner {display:flex; flex-wrap: nowrap; justify-content:space-between; align-items:center;} #sections .extra div.inner div {width:45%; text-align:center; padding:10px 0;} #sections .extra div.inner div img {max-width:95%;} #sections .extra div.inner p {font:18px/22px 'Apercu Pro', arial, sans-serif; color:#070C19; padding:0 50px 0 0; margin:0; width:45%;} #sections .extra div.inner p a {color:#00A9C0; text-decoration:underline;} @media only screen and (max-width: 900px) { #sections h2 {font:22px/45px 'gothammediumregular', arial, sans-serif;} #sections .extra div.inner div {width:100%; text-align:center; padding:10px 0;} #sections .extra div.inner {flex-wrap: wrap;} #sections .extra div.inner p {font:16px/22px 'Apercu Pro', arial, sans-serif; color:#070C19; padding:0 20px; margin:20px 0; width:auto;} } #sections .extra div.inner p.full {width:100%; padding:0 65px 50px 65px; box-sizing:border-box;} @media only screen and (max-width: 720px) { #sections h2 {font:18px/45px 'gothammediumregular', arial, sans-serif;} #sections h2 span {margin-right:15px;} #sections .more {float:left; margin-right:15px;} } @media only screen and (max-width: 540px) { #sections h2 {font:14px/45px 'gothammediumregular', arial, sans-serif;} #sections h2 span {margin-right:10px;} #sections .extra div.inner p {font:14px/20px 'Apercu Pro', arial, sans-serif; padding:0 15px;} } #vid-panel {background:#699ec6; height:160px; width:100%; display:flex; align-items:center; flex-wrap:wrap;} #vid-panel .vid-play {margin-left:11.5%;} #vid-panel .vid-play h4 {font: 30px/30px 'gotham_blackregular', arial, sans-serif; color:#fff; padding:0; margin:0 50px 0 0px; cursor:pointer; transition:0.5s;} #vid-panel .vid-play:first-child h4 {} #vid-panel label {font: 30px/30px 'gotham_blackregular', arial, sans-serif; color:#fff; padding:0; margin:0; cursor:pointer; transition:0.5s;} #vid-panel img {margin-left:20px;} #slide1 {display:none;} #vid-panel .vid-play h4:hover, #vid-panel label:hover {color:#ed1c24; text-decoration:underline;} @media only screen and (max-width: 900px) { #vid-panel {height:120px;} #vid-panel .vid-play {margin-left:8%;} #vid-panel .vid-play h4 {font: 24px/24px 'gotham_blackregular', arial, sans-serif; color:#fff; padding:0; margin:0 20px 0 20px; cursor:pointer; transition:0.5s;} #vid-panel label {font: 24px/24px 'gotham_blackregular', arial, sans-serif; color:#fff; padding:0; margin:0; cursor:pointer; transition:0.5s;} #vid-panel img {margin-left:10px;} } @media only screen and (max-width: 490px) { #vid-panel .vid-play h4 {font: 18px/18px 'gotham_blackregular', arial, sans-serif;} #vid-panel .vid-play {margin-left:6%;} #vid-panel .vid-play:first-child h4 {} #vid-panel label {font: 18px/18px 'gotham_blackregular', arial, sans-serif;} #vid-panel label i {display:block;} } .lbox {position:fixed; display:block; overflow:hidden; background:rgba(0,0,0,0.8); z-index:9999;} .lbox {top: -9999px; left: 0; height:100%; width:100%;} .lbox > img {top: 0; left: 0;right: 0;bottom: 0;} .lbox > label {display:block; position:absolute; cursor:pointer; top:0; right:0; width:75px; height:75px; background: url(../images/close.png) no-repeat center center;} .lbox > img {border:10px solid #fff; position:absolute; margin:auto; max-width:80%; max-height:80%;} @keyframes bounce { 0% {transform: scale(0)} 50% {transform: scale(1.1)} 100% {transform: scale(1)} } .slides:checked + div {top:0; visibility:visible;} .slides:checked + div img { animation: bounce 1s none; }