|
|
| Line 4: |
Line 4: |
| | <style> | | <style> |
| | .heidelbox-darkred {background-color: #9D1C20 !important; color: white !important; } | | .heidelbox-darkred {background-color: #9D1C20 !important; color: white !important; } |
| − | .image-grid {
| + | </style> |
| − | width: 100%;
| + | <style> |
| − | max-width: 1310px;
| + | |
| − | margin: 0 auto;
| + | |
| | | | |
| − | overflow: hidden;
| |
| − | padding: 10px 5px 0;
| |
| − | }
| |
| − |
| |
| − | .image__cell {
| |
| − | float: left;
| |
| − | position: relative;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .basic__img {
| |
| − | display: block;
| |
| − | float: left;
| |
| − | max-width: 100%;
| |
| − | height: auto;
| |
| − | margin: 0 auto;
| |
| − |
| |
| − | }
| |
| | | | |
| | .img-circular{ | | .img-circular{ |
| Line 38: |
Line 17: |
| | } | | } |
| | | | |
| − |
| |
| − | .image__cell.is-collapsed .arrow--up {
| |
| − | height: 10px;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | .image__cell.is-expanded .arrow--up {
| |
| − | border-bottom: 8px solid #222;
| |
| − | border-left: 8px solid transparent;
| |
| − | border-right: 8px solid transparent;
| |
| − | height: 0;
| |
| − | width: 0;
| |
| − | margin: 2px auto 0;
| |
| − | }
| |
| − |
| |
| − | .expand__close {
| |
| − | position: absolute;
| |
| − | top: 10px;
| |
| − | right: 20px;
| |
| − | color: #393939;
| |
| − | font-size: 50px;
| |
| − | line-height: 50px;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | .expand__close:before {
| |
| − | content: '×';
| |
| − | }
| |
| − |
| |
| − | .expand__close:hover {
| |
| − | color: #fff;
| |
| − | }
| |
| − |
| |
| − | .image--large {
| |
| − | max-width: 100%;
| |
| − | height: auto;
| |
| − | display: block;
| |
| − | padding: 40px;
| |
| − | margin: 0 auto;
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width: 530px) {
| |
| − |
| |
| − | .image__cell {
| |
| − | width: 50%;
| |
| − | }
| |
| − |
| |
| − | .image__cell:nth-of-type(2n+2) .image--expand {
| |
| − | margin-left: -100%;
| |
| − | }
| |
| − |
| |
| − | .image__cell:nth-of-type(2n+3) {
| |
| − | clear:left;
| |
| − | }
| |
| − |
| |
| − | .image--expand {
| |
| − | width: 200%;
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | @media only screen and (min-width: 531px) {
| |
| − | .image__cell {
| |
| − | width: 20%;
| |
| − | }
| |
| − |
| |
| − | .image__cell:nth-of-type(5n+2) .image--expand {
| |
| − | margin-left: -100%;
| |
| − | }
| |
| − |
| |
| − | .image__cell:nth-of-type(5n+3) .image--expand {
| |
| − | margin-left: -200%;
| |
| − | }
| |
| − |
| |
| − | .image__cell:nth-of-type(5n+4) .image--expand {
| |
| − | margin-left: -300%;
| |
| − | }
| |
| − |
| |
| − | .image__cell:nth-of-type(5n+5) .image--expand {
| |
| − | margin-left: -400%;
| |
| − | }
| |
| − |
| |
| − | .image__cell:nth-of-type(5n+6) {
| |
| − | clear: left;
| |
| − | }
| |
| − |
| |
| − | .image--expand {
| |
| − | width: 500%;
| |
| − | }
| |
| − |
| |
| − | }
| |
| | | | |
| | .img-circular a { | | .img-circular a { |
