.tiles {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 1300px;
padding: 0 calc((100% - 1300px) / 2);
margin-top: 10px;
margin-bottom: 10px; }
.tiles a.tile {
color: inherit;
text-decoration: none;
display: flex;
flex-direction: column;
flex-grow: 0;
max-width: 1300px;
width: calc(100% / 3 - 20px);
padding: 5px;
margin: 25px 5px 5px; }
.tiles a.tile .image {
border-radius: 4px;
height: 0;
/* dirty trick for */
padding-top: 63.24%;
/* fixed ratio */
background-size: auto 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
background-color: #dddddd;
transition: box-shadow 0.2s ease-in-out;
margin-bottom: 20px; }
.tiles a.tile .video {
border-radius: 4px;
background-color: #dddddd;
transition: box-shadow 0.2s ease-in-out;
margin-bottom: 20px;
height: 261.38px;
width: 413.32px;
/* dirty trick for fixed size */ }
.tiles a.tile .video:hover {
box-shadow: 0 8px 8px rgba(22, 22, 22, 0.15); }
.tiles a.tile .title {
color: #3d6f96;
font-size: 20px;
line-height: 120%;
margin-bottom: 10px; }
.tiles a.tile .text {
font-size: 16px;
line-height: 130%;
transition: color 0.2s ease-in-out; }
.tiles a.tile:hover .image {
box-shadow: 0 8px 8px rgba(22, 22, 22, 0.15); }
.tiles a.tile:hover .text {
color: #3d6f96; }
.tiles.wide {
flex-direction: column;
width: 990px;
margin-left: auto;
margin-right: auto; }
.tiles.wide a.tile {
flex-wrap: wrap;
width: 870px;
height: 234px;
margin-top: 10px; }
.tiles.wide a.tile .image, .tiles.wide a.tile .video {
height: 234px;
width: 370px;
padding: 0;
margin-bottom: 0;
margin-right: 30px; }
.tiles.wide a.tile .title, .tiles.wide a.tile .text {
width: 470px; }
.tiles-width {
width: 1000px;
margin-left: auto;
margin-right: auto; }
.tiles-width .full-bleed {
width: 96vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -48vw;
margin-right: -48vw; }
.separator {
max-width: 100%;
height: 1px;
background-color: #dedede;
margin-top: 30px;
margin-bottom: 30px; }
@media (max-width: 1030px) {
.tiles {
flex-direction: column;
margin-top: 0; }
.tiles a.tile {
width: calc(100% - 20px); }
.tiles.wide {
min-width: auto;
width: 100%;
margin: 10px 0 10px 0; }
.tiles.wide a.tile {
flex-wrap: nowrap;
width: calc(100% - 20px);
height: auto;
margin-top: 25px; }
.tiles.wide a.tile .image {
height: 0;
width: auto;
padding-top: 63.24%;
margin-bottom: 20px;
margin-right: 0; }
.tiles.wide a.tile .title, .tiles.wide a.tile .text {
width: auto; }
.tiles-width {
width: calc(100% - 20px);
min-width: auto; } }
.page-switcher {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 40px 0 80px 0; }
.page-switcher .button {
text-decoration: none;
background-color: #2f80ed;
color: #ffffff;
display: inline-block;
border-radius: 3px;
width: 145px;
height: 50px;
line-height: 50px;
text-align: center;
vertical-align: middle;
user-select: none;
margin: 20px; }
.page-switcher .button.disabled {
background-color: #dddddd;
color: #222222; }