.opacity-0 { opacity: 0; } .opacity-10 { opacity: 0.1; } .opacity-20 { opacity: 0.2; } .opacity-30 { opacity: 0.3; } .opacity-40 { opacity: 0.4; } .opacity-50 { opacity: 0.5; } .opacity-60 { opacity: 0.6; } .opacity-70 { opacity: 0.7; } .opacity-80 { opacity: 0.8; } .opacity-90 { opacity: 0.9; } .opacity-100 { opacity: 1; } .masonry-with-columns { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; max-height: 1000px; } .masonry-with-columns div { -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; background: #00997B; color: white; margin: 0 1rem 1rem 0; text-align: center; font-weight: 900; font-size: 2rem; } .masonry-with-columns div:nth-child(1) { height: 240px; line-height: 240px; } .masonry-with-columns div:nth-child(2) { height: 158px; line-height: 158px; } .masonry-with-columns div:nth-child(3) { height: 267px; line-height: 267px; } .masonry-with-columns div:nth-child(4) { height: 408px; line-height: 408px; } .masonry-with-columns div:nth-child(5) { height: 144px; line-height: 144px; } .masonry-with-columns div:nth-child(6) { height: 220px; line-height: 220px; } .masonry-with-columns div:nth-child(7) { height: 137px; line-height: 137px; } .masonry-with-columns div:nth-child(8) { height: 113px; line-height: 113px; } .masonry-with-columns div:nth-child(9) { height: 352px; line-height: 352px; } .masonry-with-columns div:nth-child(10) { height: 236px; line-height: 236px; } .masonry-with-columns div:nth-child(11) { height: 113px; line-height: 113px; } .masonry-with-columns div:nth-child(12) { height: 403px; line-height: 403px; } .masonry-with-columns div:nth-child(13) { height: 382px; line-height: 382px; } .masonry-with-columns div:nth-child(14) { height: 136px; line-height: 136px; } .masonry-with-columns div:nth-child(15) { height: 230px; line-height: 230px; } .masonry-with-columns div:nth-child(16) { height: 214px; line-height: 214px; } .masonry-with-columns div:nth-child(17) { height: 168px; line-height: 168px; } .masonry-with-columns div:nth-child(18) { height: 211px; line-height: 211px; } .masonry-with-columns div:nth-child(19) { height: 320px; line-height: 320px; } .masonry-with-columns div:nth-child(20) { height: 215px; line-height: 215px; } .masonry-with-columns div:nth-child(21) { height: 180px; line-height: 180px; } .masonry-with-columns div:nth-child(22) { height: 119px; line-height: 119px; } .masonry-with-columns div:nth-child(23) { height: 293px; line-height: 293px; } .masonry-with-columns div:nth-child(24) { height: 468px; line-height: 468px; } .masonry-with-columns div:nth-child(25) { height: 209px; line-height: 209px; } .masonry-with-columns div:nth-child(26) { height: 223px; line-height: 223px; } .masonry-with-columns div:nth-child(27) { height: 139px; line-height: 139px; } .masonry-with-columns div:nth-child(28) { height: 413px; line-height: 413px; } .masonry-with-columns div:nth-child(29) { height: 197px; line-height: 197px; } .masonry-with-columns div:nth-child(30) { height: 389px; line-height: 389px; } .masonry-with-columns div:nth-child(31) { height: 226px; line-height: 226px; } .masonry-with-columns div:nth-child(32) { height: 495px; line-height: 495px; } .masonry-with-columns div:nth-child(33) { height: 349px; line-height: 349px; } .masonry-with-columns div:nth-child(34) { height: 225px; line-height: 225px; } .masonry-with-columns div:nth-child(35) { height: 221px; line-height: 221px; } .masonry-with-columns div:nth-child(36) { height: 110px; line-height: 110px; } .masonry-with-columns-2 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .masonry-with-columns-2 div { height: 150px; line-height: 150px; background: #9B1B30; color: white; margin: 0 1rem 1rem 0; text-align: center; font-weight: 900; font-size: 2rem; -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; } .masonry-with-columns-2 div:nth-child(1) { width: 225px; } .masonry-with-columns-2 div:nth-child(2) { width: 301px; } .masonry-with-columns-2 div:nth-child(3) { width: 358px; } .masonry-with-columns-2 div:nth-child(4) { width: 341px; } .masonry-with-columns-2 div:nth-child(5) { width: 189px; } .masonry-with-columns-2 div:nth-child(6) { width: 124px; } .masonry-with-columns-2 div:nth-child(7) { width: 160px; } .masonry-with-columns-2 div:nth-child(8) { width: 81px; } .masonry-with-columns-2 div:nth-child(9) { width: 218px; } .masonry-with-columns-2 div:nth-child(10) { width: 209px; } .masonry-with-columns-2 div:nth-child(11) { width: 345px; } .masonry-with-columns-2 div:nth-child(12) { width: 239px; } .masonry-with-columns-2 div:nth-child(13) { width: 290px; } .masonry-with-columns-2 div:nth-child(14) { width: 364px; } .masonry-with-columns-2 div:nth-child(15) { width: 406px; } .masonry-with-columns-2 div:nth-child(16) { width: 207px; } .masonry-with-columns-2 div:nth-child(17) { width: 82px; } .masonry-with-columns-2 div:nth-child(18) { width: 378px; } .masonry-with-columns-2 div:nth-child(19) { width: 251px; } .masonry-with-columns-2 div:nth-child(20) { width: 174px; } .masonry-with-columns-2 div:nth-child(21) { width: 271px; } .masonry-with-columns-2 div:nth-child(22) { width: 93px; } .masonry-with-columns-2 div:nth-child(23) { width: 283px; } .masonry-with-columns-2 div:nth-child(24) { width: 178px; } .masonry-with-columns-2 div:nth-child(25) { width: 311px; } .masonry-with-columns-2 div:nth-child(26) { width: 155px; } .masonry-with-columns-2 div:nth-child(27) { width: 303px; } .masonry-with-columns-2 div:nth-child(28) { width: 361px; } .masonry-with-columns-2 div:nth-child(29) { width: 110px; } .masonry-with-columns-2 div:nth-child(30) { width: 303px; } .masonry-with-columns-2 div:nth-child(31) { width: 155px; } .masonry-with-columns-2 div:nth-child(32) { width: 390px; } .masonry-with-columns-2 div:nth-child(33) { width: 77px; } .masonry-with-columns-2 div:nth-child(34) { width: 245px; } .masonry-with-columns-2 div:nth-child(35) { width: 88px; } .masonry-with-columns-2 div:nth-child(36) { width: 151px; } .masonry-with-flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; max-height: 1000px; } .masonry-with-flex div { width: auto; background: #975A58; color: white; margin: 0 1rem 1rem 0; text-align: center; font-weight: 900; font-size: 2rem; } .masonry-with-flex div:nth-child(1) { height: 494px; line-height: 494px; } .masonry-with-flex div:nth-child(2) { height: 200px; line-height: 200px; } .masonry-with-flex div:nth-child(3) { height: 325px; line-height: 325px; } .masonry-with-flex div:nth-child(4) { height: 257px; line-height: 257px; } .masonry-with-flex div:nth-child(5) { height: 343px; line-height: 343px; } .masonry-with-flex div:nth-child(6) { height: 298px; line-height: 298px; } .masonry-with-flex div:nth-child(7) { height: 165px; line-height: 165px; } .masonry-with-flex div:nth-child(8) { height: 341px; line-height: 341px; } .masonry-with-flex div:nth-child(9) { height: 375px; line-height: 375px; } .masonry-with-flex div:nth-child(10) { height: 204px; line-height: 204px; } .masonry-with-flex div:nth-child(11) { height: 434px; line-height: 434px; } .masonry-with-flex div:nth-child(12) { height: 491px; line-height: 491px; } .masonry-with-flex div:nth-child(13) { height: 165px; line-height: 165px; } .masonry-with-flex div:nth-child(14) { height: 182px; line-height: 182px; } .masonry-with-flex div:nth-child(15) { height: 408px; line-height: 408px; } .masonry-with-flex div:nth-child(16) { height: 347px; line-height: 347px; } .masonry-with-flex div:nth-child(17) { height: 232px; line-height: 232px; } .masonry-with-flex div:nth-child(18) { height: 143px; line-height: 143px; } .masonry-with-flex div:nth-child(19) { height: 155px; line-height: 155px; } .masonry-with-flex div:nth-child(20) { height: 281px; line-height: 281px; } .masonry-with-flex div:nth-child(21) { height: 265px; line-height: 265px; } .masonry-with-flex div:nth-child(22) { height: 302px; line-height: 302px; } .masonry-with-flex div:nth-child(23) { height: 307px; line-height: 307px; } .masonry-with-flex div:nth-child(24) { height: 404px; line-height: 404px; } .masonry-with-flex div:nth-child(25) { height: 354px; line-height: 354px; } .masonry-with-flex div:nth-child(26) { height: 292px; line-height: 292px; } .masonry-with-flex div:nth-child(27) { height: 213px; line-height: 213px; } .masonry-with-flex div:nth-child(28) { height: 179px; line-height: 179px; } .masonry-with-flex div:nth-child(29) { height: 383px; line-height: 383px; } .masonry-with-flex div:nth-child(30) { height: 435px; line-height: 435px; } .masonry-with-flex div:nth-child(31) { height: 153px; line-height: 153px; } .masonry-with-flex div:nth-child(32) { height: 220px; line-height: 220px; } .masonry-with-flex div:nth-child(33) { height: 248px; line-height: 248px; } .masonry-with-flex div:nth-child(34) { height: 368px; line-height: 368px; } .masonry-with-flex div:nth-child(35) { height: 396px; line-height: 396px; } .masonry-with-flex div:nth-child(36) { height: 302px; line-height: 302px; }