/* • Coding (co)
  ------------------------------------------------------------------------- */
  .co-content-wrapper { width:40%; height:170px; padding:20px 0 0 20px; left:18%; 
                            position:absolute; top:180px; z-index:10; 
                            background-color:#999; 
                                  transition: all 0.3s ease-out;}

  .co-content-blk, .co-triangle-blk  { right:0; top:0; position:absolute}

  .co-content-blk  { padding:20px 20px 0 20px; z-index:10; left:0}
  .co-content-blk .co-content { color:#fff; float:left; width:87%; transition: all 0.3s ease-out;}
  .co-content-blk .co-content .co-content-pos { padding-right:20px;
                                                -webkit-animation-delay: 0.6s;
                                                        animation-delay: 0.6s;}

  .co-triangle-blk { width:170px; z-index:5;
                      -webkit-animation-delay: 0.3s;
                              animation-delay: 0.3s;
                      transition: all 0.3s ease-out;}
  .co-triangle-blk .co-triangle { width:0; height:0;
                                  border-style: solid;
                                  border-width: 0 170px 170px 0;
                                  border-color: transparent #795b97 transparent transparent; }

  .co-content-blk h1 { -webkit-animation-delay: 0.8s; 
                               animation-delay: 0.8s; }


  .co-bg { width:100%; height:600px; position:absolute; z-index:1; opacity:0.1}

  .co-blk  { display:none; }
  .co-m-bg { display:none; }
  

  .teletype-prefix, .teletype-cursor { color: #795b97; }
  .type-text { color:#fff; line-height:2; display:block }
  .type-text-m { display:none}


  /* • Coding (co) - square box
  ------------------------------------------------------------------------- */
  .square-wall-blk  { position:absolute; top:0; left:0; width:100%}

    .square { width:calc(10% - 2px); float:left; opacity:0.5; background-color:#e8e8e8;
              /*border:1px solid #fff;*/
              margin: 1px;
      -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
              border-radius: 5px; }
      .square img { width:100%;}
      .square .square-txt { text-align:center; position:absolute; width:100%; word-wrap: break-word; display:table-cell; vertical-align:middle; top:50%; transform:translateY(-50%);}
      
      .square .square-txt .sqr-content {width: calc(100% - 4px); word-wrap: break-word; margin:0 auto;}

    /* • Background 
    ------------------------------------------------------------------------- */

    .periodic { overflow: hidden; background-color: #fff;}



  /* ==========================================================================
     Media Styles
  ============================================================================= */


  @media only screen and (max-width:1700px) {
    .square { width:calc(12.5% - 2px); }
    .co-content-wrapper { width:50%; }


  }

  @media only screen and (max-width:1500px) {
    .square { width:calc(16.6% - 2px); font-size:12px}
    .co-content-wrapper { width:60%; height:170px; }

  }


  @media only screen and (max-width:1200px) {
    .square { width:calc(20% - 2px);}
    .co-content-wrapper { width:65%; }

  }

  @media only screen and (max-width:1024px) {
    .square { width:calc(25% - 2px);}

    .co-content-wrapper { width:70%; height:170px; padding:20px 0 0 0; left:0; 
                          margin:0 5%; top:80px;}

    .co-triangle-blk { width:160px;}
    .co-triangle-blk .co-triangle { border-width: 0 160px 160px 0;}
      p { width: 100%; margin:10px 0 0 5px; animation:none}
    span { margin-top:-10px }

    .type-text   { display:none}
    .type-text-m { display:block}
   }

  @media only screen and (max-width: 745px) {
    .co-content-wrapper { width:90%; height:170px; top:110px; }
    .co-content-blk .co-content { width:100%;}
    .co-triangle-blk { width:100px;}
    .co-triangle-blk .co-triangle { border-width: 0 100px 100px 0;}

    .square { width:calc(33.3% - 2px);; font-size:10px}

  }

  @media only screen and (max-width: 479px) {
    .co-content-wrapper { width:calc(100% - 40px); height:210px; top:110px; }

    .co-triangle-blk { width:100px;}
    .co-triangle-blk .co-triangle { border-width: 0 100px 100px 0;}
    .co-content-blk .co-content   { width:100%;}
    .co-content-blk .co-content .co-content-pos { padding-right:0}
    p { width: 100%; margin:10px 0 0 5px}
    span { margin-top:-10px }

    .square { width:calc(50% - 2px); font-size:10px}

    }
    
  @media only screen and (max-device-width: 1024px)  {
      .co-ctr{
          display:none;
      }
      .co-m-bg{
          display:block;
      }
      
      .co-blk{
          display:block;
      }
      .co-content-wrapper{
          animation-delay:0s;
      }
      .co-triangle-blk{
          animation-delay:0.3s;
      }
      .co-content-blk h1{
          animation-delay:0.7s;
      }
      
      .co-content-blk .co-content .co-content-pos{
          animation-delay: 1.1s;
      }
  }