/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
/*
  Add CPG Logo
  */
    body{position: relative}
  .cpg-logo-container{
      position: absolute;
      bottom: 10px;
      z-index: 1001;
      left: 15px;
      background: white;
      border-radius: 15px;
      max-width: 250px;
      vertical-align: middle;
      transition: width 1s;
      width: 29px;
      height: 29px;
      overflow:hidden;
      -webkit-transition: width 1s ease-in;
      transition: width 1s ease-in;
  }
  .cpg-logo{
      width: 21px;
      display: inline-block;
      text-align: left;
      margin:4px 3px 2px 4px;
      float: left;
  }
  .cpg-text{
      -webkit-transition: opacity .3s, width 1s;
      transition: opacity .3s, width 1s;
      opacity: 0;
      font-weight: normal;
      font-size: 8px;
      float: left;
      line-height: 11px;
      width: 50%;
      margin: 4px 0 4px 0;
      color: #414141;
      height: 22px;
      overflow: hidden;
  }
  .cpg-logo-container:hover{
      width:100%;
  }
  .cpg-logo-container:hover .cpg-text{
      display: block;
      opacity: 1;
      width: calc(100% - 30px);
      height: auto;
      max-height: 22px;
  }

  @media only screen and (max-width:780px){

      .cpg-logo-container + #footer_coms .f_message_left{
          max-width:85%;
          float:right;
          text-align:left;
      }
  }