@import "compass";

.page-list {
  .mediaobject {
    padding: 50px;
    vertical-align: top;

    @media (max-width: $tablet) {
      padding-top: 40px;
      padding-bottom: 40px;
      padding-right: 15px;
      padding-left: 15px;
    }

    @media (max-width: $mobile) {
      padding-top: 20px;
      padding-bottom: 20px;
      padding-right: 15px;
      padding-left: 15px;
    }

    &:hover {
      .page_title.green b {
        color: $green-menu;
      }
      .page_title.blue b {
        color: $blue-menu;
      }
      .page_title.yellow b {
        color: $yellow-menu;
      }
      .page_title.red b {
        color: $red-menu;
      }
      .page_title.orange b {
        color: $orange-menu;
      }
      .page_title.camel b {
        color: $camel-menu;
      }
      .page_title.purple b {
        color: $purple-menu;
      }
    }

    .container-icon {
      width: em(210px);
      height: em(210px);
      border-radius: 50%;
      margin: 0 auto;
      @include display-flex();
      @include justify-content(center);
      @include align-items(center);

      .mediaobject_icon {
        font-size: em(110px);
        color: $w;
      }
    }
    .page_title_outer{
      position: relative;
      @include display-flex();
      @include align-items(center);
      @include justify-content(center);
      margin-top: 20px;
      margin-bottom: 20px;

      .page_title {
        position: relative;
        width: 100%;
        text-align: center;
        margin: 0;
        font-size: em(30px);
        font-family: $second-font;
        b {
          transition: all $speed;
        }
        .title_down {
          display: inline-block;
        }
      }
    }

    .page_description:before {
      content: "";
      width: 10%;
      margin: 0px auto 20px;
      background: blue;
      height: 3px;
      display: block;
    }


  }
}


.mediaobject.green {
  .container-icon, .page_description:before {
    background-color: $green-menu;
  }
}
.mediaobject.blue {
  .container-icon, .page_description:before {
    background-color: $blue-menu;
  }
}
.mediaobject.yellow {
  .container-icon, .page_description:before {
    background-color: $yellow-menu;
  }
}
.mediaobject.red {
  .container-icon, .page_description:before {
    background-color: $red-menu;
  }
}
.mediaobject.orange {
  .container-icon, .page_description:before {
    background-color: $orange-menu;
  }
}
.mediaobject.camel {
  .container-icon, .page_description:before {
    background-color: $camel-menu;
  }
}
.mediaobject.purple {
  .container-icon, .page_description:before {
    background-color: $purple-menu;
  }
}