@charset "UTF-8";
/* *********************************************************************************************************************
	One% CSS Grid - 12 Columns Fluid CSS Grid System

	Why One% ? Let’s count ...
		we have 12 columns (magic number divided by 2, 3, 4, 6)

		for 12 columns we need 11 margins

		so if we count margin 3%, then 3% * 11 margins = 33%

		and if we count width of 1 column 5.5%, than 5.5% * 12 columns = 66%

		in the end we have 33% + 66% = 99% aaand ???

		1% is still here so that's the name - One%

	2 starting options ? Let’s count a bit more ...
		1200px - perfectly fits 1280 screens
			12 columns
			margin 3% / 36px (full-width)
			col1 5.5% / 66px (full-width)

		1000px - perfectly fits 1024 screens
			12 columns
			margin 3% / 30px (full-width)
			col1 5.5% / 55px (full-width)
*/
/* *********************************************************************************************************************
 * Main container for all
 */
.onepcssgrid-1000, .onepcssgrid-1200 {
  margin: 0 auto;
  padding: 0 0 0 1%;
  /* THAT'S THE NAME ;) */ }

.onepcssgrid-1200 {
  max-width: 1220px; }

.onepcssgrid-1000 {
  max-width: 1020px; }

.onerow {
  clear: both;
  padding: 0 10px; }

/* *********************************************************************************************************************
 * Common columns definitions
 */
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
  float: left;
  margin: 0 3% 0 0; }

.col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12 {
  margin: 0; }

.col1 {
  width: 5.5%; }

.col2 {
  width: 14%; }

.col3 {
  width: 22.5%; }

.col4 {
  width: 31%; }

.col5 {
  width: 39.5%; }

.col6 {
  width: 48%; }

.col7 {
  width: 56.5%; }

.col8 {
  width: 65%; }

.col9 {
  width: 73.5%; }

.col10 {
  width: 82%; }

.col11 {
  width: 90.5%; }

.col12 {
  width: 99%;
  margin: 0; }

.col1 img, .col2 img, .col3 img, .col4 img, .col5 img, .col6 img, .col7 img, .col8 img, .col9 img, .col10 img, .col11 img, .col12 img {
  width: 100%;
  height: auto;
  display: block; }

/* *********************************************************************************************************************
 * Disable padding left/right 10px if I'm 1024 or gibber - correct percentage math
 */
@media all and (min-width: 1024px) {
  .onepcssgrid-1000 {
    max-width: 1000px; }
  .onepcssgrid-1000 .onerow {
    padding: 0; } }

/* *********************************************************************************************************************
 * Small devices
 */
@media all and (max-width: 768px) {
  .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11 {
    float: none;
    width: 99%; } }

#case_list .hover_case {
  display: none;
  position: absolute;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: white;
  background-color: #000000;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 0.8;
  border-radius: 4px;
  text-indent: 2em;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  cursor: pointer; }

#case_list .nav #nav-bar {
  display: none; }

#case_list .nav ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between; }

#case_list .nav ul li {
  display: inline-block;
  color: #2D3238;
  height: 80px;
  width: 196px;
  margin: 56px auto 42px;
  border-radius: 3px;
  box-sizing: border-box;
  cursor: pointer;
  float: left; }
  #case_list .nav ul li .icon_wrap {
    display: inline;
    float: left;
    clear: left;
    margin-top: 14px;
    margin-left: 35px;
    width: 42px;
    height: 42px; }
    #case_list .nav ul li .icon_wrap .icon {
      color: #979FA8;
      font-family: "Coding-Mart" !important;
      font-size: 42px; }
    #case_list .nav ul li .icon_wrap ~ div {
      margin-top: 14px;
      margin-left: 84px; }
  #case_list .nav ul li .title {
    font-size: 21px;
    line-height: 29px; }
  #case_list .nav ul li .subtitle {
    font-size: 11.2px;
    line-height: 16px;
    white-space: nowrap; }
  @media (max-width: 1000px) {
    #case_list .nav ul li .title {
      display: none; }
    #case_list .nav ul li .subtitle {
      display: none; } }

#case_list .nav ul li:hover {
  background-color: #414952;
  color: white; }
  #case_list .nav ul li:hover .icon_wrap .icon {
    color: white; }

#case_list .nav ul li.filtered {
  background-color: #414952;
  color: white; }
  #case_list .nav ul li.filtered .icon_wrap .icon {
    color: white; }

@media (max-width: 570px) {
  #case_list .nav #nav-bar {
    display: block;
    width: 100%;
    height: 56px;
    background-color: white;
    margin: 21px 0;
    border-radius: 3px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); }
    #case_list .nav #nav-bar .icon_wrap {
      display: inline;
      float: left;
      margin-top: 10px;
      margin-left: 14px;
      width: 42px;
      height: 35px; }
      #case_list .nav #nav-bar .icon_wrap .icon {
        font-family: "Coding-Mart" !important;
        font-size: 35px;
        color: #979FA8; }
      #case_list .nav #nav-bar .icon_wrap ~ div {
        display: inline-block; }
    #case_list .nav #nav-bar .title {
      color: #54585E;
      margin-top: 18px;
      line-height: 20px; }
    #case_list .nav #nav-bar .subtitle {
      display: none; }
    #case_list .nav #nav-bar .dropdown-icon {
      float: right;
      display: inline-block;
      margin-top: 14px;
      margin-right: 14px;
      color: #2D3238;
      font-size: 19px;
      opacity: 0.5; }
  #case_list .nav #nav-list {
    display: none;
    position: relative;
    margin-top: -21px; }
  #case_list .nav ul {
    position: absolute;
    width: 100%;
    display: block;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2); }
    #case_list .nav ul li {
      margin: 0;
      height: 56px;
      width: 100%;
      background-color: white;
      color: #54585E; }
      #case_list .nav ul li .icon_wrap {
        display: inline;
        float: left;
        margin-top: 10px;
        margin-left: 14px;
        width: 42px;
        height: 35px; }
        #case_list .nav ul li .icon_wrap .icon {
          font-family: "Coding-Mart" !important;
          font-size: 35px;
          color: #979FA8; }
        #case_list .nav ul li .icon_wrap ~ div {
          margin: 18px 0 0; }
      #case_list .nav ul li .title {
        display: block;
        line-height: 20px;
        font-size: 14px; } }

#case_list .case_list .case {
  background-color: white;
  margin-bottom: 21px;
  height: 196px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-top: 10px;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 4px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
  padding-bottom: 20px; }
  @media (max-width: 570px) {
    #case_list .case_list .case {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column;
      height: auto;
      padding: 28px 0; } }
  #case_list .case_list .case .delimiter {
    width: 1px;
    box-sizing: border-box;
    border-left: 1px solid #D9D9D9;
    height: 140px; }
  @media (max-width: 570px) {
    #case_list .case_list .case .delimiter {
      width: 85%;
      border-bottom: 1px solid #D9D9D9;
      height: 1px;
      box-sizing: border-box;
      margin-top: 28px;
      margin-bottom: 28px; } }
  #case_list .case_list .case .logo_wrap {
    width: 40.5%; }
    @media (max-width: 570px) {
      #case_list .case_list .case .logo_wrap {
        width: 100%; } }
    #case_list .case_list .case .logo_wrap .logo {
      text-align: center; }
      #case_list .case_list .case .logo_wrap .logo img {
        max-height: 80px;
        max-width: 70%; }
  #case_list .case_list .case .desc {
    width: 59.5%;
    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-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center; }
    @media (max-width: 570px) {
      #case_list .case_list .case .desc {
        width: 100%; } }
    #case_list .case_list .case .desc .title {
      font-size: 28px;
      line-height: 40px;
      color: #4B4B4B; }
      @media (max-width: 570px) {
        #case_list .case_list .case .desc .title {
          text-align: center;
          padding-bottom: 14px; } }
    #case_list .case_list .case .desc .digest {
      font-size: 14px;
      color: #999999;
      line-height: 20px;
      text-align: center; }
      #case_list .case_list .case .desc .digest .strong {
        color: #505050; }
      #case_list .case_list .case .desc .digest > div {
        padding-right: 10px;
        margin-right: 10px;
        border-right: 1px solid #D9D9D9; }
      #case_list .case_list .case .desc .digest > div:last-child {
        padding-right: 0px;
        padding-right: 0px;
        border-right: 0; }
      #case_list .case_list .case .desc .digest div {
        display: inline; }
      @media (max-width: 570px) {
        #case_list .case_list .case .desc .digest > div:nth-child(3) {
          display: block;
          text-align: center; }
        #case_list .case_list .case .desc .digest > div:nth-child(2) {
          padding-right: 0px;
          padding-right: 0px;
          border-right: 0; } }

#case_list #more-cases-btn {
  display: block;
  padding: 12px 86px;
  margin: 56px auto 84px;
  font-size: 1.3rem;
  color: #FFFFFF;
  background-color: #8796A8;
  border: 0;
  border-radius: 5px;
  box-shadow: 0 3px 3px 0 rgba(45, 51, 56, 0.2);
  text-shadow: 0 1px 2px rgba(46, 52, 57, 0.5);
  cursor: pointer; }

#case_list .page-bottom {
  font-size: 1rem;
  width: 100%;
  text-align: center;
  background: #2B3747;
  padding: 3em 0 4em 0;
  border-bottom: 1px solid #424b5a; }
  #case_list .page-bottom .hint-words {
    font-size: 2.5rem;
    color: #FFF; }
  #case_list .page-bottom .publish-btn {
    font-size: 1.3rem;
    display: inline-block;
    background: #eb6133;
    color: #FFF;
    margin: 2.6em auto 0;
    padding: 1em 5em;
    border-radius: .3em; }
  @media (max-width: 414px) {
    #case_list .page-bottom .hint-words {
      font-size: 2rem; }
    #case_list .page-bottom .publish-btn {
      font-size: 1.1rem; } }