/*
 *  Empty-coop:
 *  A front-end starting point from the team at Hatchd
 *
 *  @Author Hatchd Digital
 *
 *  ...HHH...........................................HH ................DDD....
 *  ...HHH.......................TT .................HH.................DDD....
 *  ...HHH.......................TT..................HH.................DDD....
 *  ...HHHHHHHH..... AAAAAA......TTTTTT....CCCCCC....HHHHHHHN..... DDDDDDDD....
 *  ...HHHHHHHHH ...AAAAAAAAA....TTTTTT...CCCCCCCC...HHHHHHHHH... DDDDDDDDD....
 *  ...HHH... HH..........AAA....TTT..... CCC........HH....HHH....DD....DDD....
 *  ...HHH... HH.....AAAAAAAA....TTT......CC.........HH....HHH...DDD....DDD....
 *  ...HHH... HH....AAA...AAA....TTT......CC ........HH....HHH...DDD....DDD....
 *  ...HHH... HH....AAA...AAA....TTT..... CCC........HH....HHH....DD....DDD....
 *  ...HHH... HH....AAA..AAAA....TTT..... CCCC..CC...HH....HHH....DDD..DDDD....
 *  ...HHH... HH.....AAAAAAAA....TTTTTT....CCCCCCC...HH....HHH.... DDDDDDD.....
 *
 */
.brookfield-platform {
  /*
   * THE PHASE1 LINK STYLING
   */
  /*
   * THE PHASE 1 MODALS
   */
  /**
   * Shame file
   * Add quick changes here, to be incorperated properly at a later point
   */ }
  .brookfield-platform ul.mainnav li.state--active a {
    color: #E9075E;
    text-decoration: underline; }
    .brookfield-platform ul.mainnav li.state--active a:after {
      content: ">"; }
  .modal--active {
    overflow-y: scroll; }
    .modal--active body {
      overflow: hidden;
      height: 100vh;
      padding-top: 0px; }

  body .modal {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    z-index: 300;
    transition: all 0.5s cubic-bezier(0.87, -0.41, 0.19, 1.44);
    height: 0px;
    width: 0px;
    top: 50%;
    left: 50%;
    bottom: 50%;
    right: 50%;
    overflow: hidden;
    padding: 0px; }
    body .modal.state--active, body .modal.state--opening, body .modal.state--closing {
      padding: 1em;
      top: 0px;
      left: 0px;
      bottom: 0px;
      right: 0px;
      width: 100%;
      height: 100%; }
    body .modal .modal-close {
      position: absolute;
      right: 2em;
      top: 2em;
      background: #E9075E;
      width: 2em;
      height: 2em;
      z-index: 10;
      border-radius: 100%;
      color: #fff;
      text-align: center;
      text-decoration: none;
      color: #fff !important;
      transition: all .5s; }
      body .modal .modal-close:hover {
        background: #d10654; }
      body .modal .modal-close:after {
        content: "x";
        position: absolute;
        top: 50%;
        left: 50%;
        display: block;
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        line-height: 0px;
        font-family: "gotham", Arial, sans-serif; }
    body .modal .content {
      background: #fff;
      padding: 3em;
      height: 100%;
      -webkit-overflow-scrolling: touch;
      overflow-y: auto;
      text-align: center; }
      body .modal .content > * {
        transition: all .3s;
        opacity: 0; }
      body .modal .content img {
        width: 100%;
        height: auto;
        border-bottom: 3px solid #E9075E;
        margin: 3em -3em;
        width: auto;
        max-width: none; }
    body .modal.state--active .content > * {
      opacity: 1; }