mdbootstrap/css/addons/directives.css

<p align="center"> <a href="https://mdbootstrap.com/docs/jquery/getting-started/download/"> <img src="https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-r.png"> </a> </p>

.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; }