Edit in JSFiddle

<div class="whole-web-page">
  <!-- Page Load -->
  <div class="page-load" style="display: none;">
    <span><i class="fa fa-bars" aria-hidden="true"></i></span>
  </div>
  
<!-- Start of Nav -->
  <div class="left-nav">
    <div class="some-name-123">
    
      <!-- Start of Profile Pic -->
      
      <span class="profile-sec">
         <span class="profile-pic">
          <img class="profile-pic-img" src="https://lh3.googleusercontent.com/-usXcO46B2r0/WLzGmzA67_I/AAAAAAAADes/i0TIR18KJxUed1KBUB2vyIdmRNuxLElJACL0B/h100/2017-03-05.png">
          </span>
          <img class="profile-pic-bg-logo" src="https://lh3.googleusercontent.com/-pskqehbtSxY/WM1z7eQytOI/AAAAAAAADh8/nv6SKDxAXW0LGoC4ZHsTWcR2_pkSMF3OQCL0B/h123/2017-03-18.png">
          <span class="profile-name">
            Courtney Cladwell
          </span>
      </span>
      <!-- End of Profile Pic -->
      
      <!-- Start of Nav Buttons -->
      <ul class="nav nav-pills nav-stacked">
        <li role="presentation"><a href="#"><i class="fa fa-home" aria-hidden="true"></i><span>Home</span></a></li>
        <li role="presentation" class=""><a href="#"><i class="fa fa-inbox" aria-hidden="true"></i><span>Inbox</span></a></li>
        <li role="presentation"><a href="#"><i class="fa fa-picture-o" aria-hidden="true"></i><span>Media</span></a></li>
        <li role="presentation" class="active"><a href="#"><i class="fa fa-file" aria-hidden="true"></i><span>Pages</span></a></li>
        <li role="presentation"><a href="#"><i class="fa fa-users" aria-hidden="true"></i><span>Shared</span></a></li>
        <li role="presentation"><a href="#"><i class="fa fa-calendar" aria-hidden="true"></i><span>Calendar</span></a></li>
        <li role="presentation"><a href="#"><i class="fa fa-pie-chart" aria-hidden="true"></i><span>Reports</span></a></li>
        <li role="presentation"><a href="#"><i class="fa fa-sliders" aria-hidden="true"></i><span>Settings</span></a></li>
      </ul>
      <!-- End of Nav Buttons -->
      
    </div>
  </div>
  <div class="nav-cover">
    <!-- Slight opacity over Header & Main Page -->
  </div>
<!-- End of Nav -->

<!-- Start of Header -->
  <div class="header">
    <div class="logo">
      <img src="https://lh3.googleusercontent.com/-4liC7cNBckY/WOBhtcAK5rI/AAAAAAAADlg/FujxuTqVkTcXLg6_0bmPP4HkGtQ_oV6bgCL0B/h25/2017-04-01.png">
    </div>
    <div class="header-btns">
      
      <!-- Start of Search Button -->
      <span class="search">
        <input type="text" name="search" value="">
        <span class="btn-icon search-icon" href="#"><i class="fa fa-search" aria-hidden="true"></i></span>
        <span class="search-underline"></span>
      </span>
      <!-- End of Search Button -->
      
      <!-- Start of Account Button -->
      <div class="btn-group act-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user" aria-hidden="true"></i></button>
        <ul class="dropdown-menu">
          <li><a href="#">View Profile</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">My Messages</a></li>
          <li><a href="#">My Groups</a></li>
          <li><a href="#">My Events</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Invite</a></li>
        </ul>
      </div>
      <!-- End of Account Button -->
      
      <!-- Start of App Button -->
      <div class="btn-group app-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-globe" aria-hidden="true"></i></button>
        <ul class="dropdown-menu">
          <li><a href="#">Sign Out</a></li>
          <li><a href="#">Account Settings</a></li>
          <li><a href="#">Help</a></li>
        </ul>
      </div>
      <!-- End of App Button -->
      
    </div>
  </div>
<!-- End of Header -->

<!-- Start of Main Page -->
  <div class="page">
    
    <!-- Start of Content Header -->
    <div class="content-header">
      
      <!-- Start of Page Title -->
      <span class="page-title">Pages</span>
      <!-- End of Page Title -->
      
      <!-- Start of Nav tabs -->
      <div class="content-tabs">
        <ul class="nav nav-tabs" role="tablist">
          <li role="presentation" class="active"><a class="tab-btns" href="#drafts" aria-controls="drafts" role="tab" data-toggle="tab">Drafts</a></li>
          <li role="presentation"><a class="tab-btns" href="#published" aria-controls="published" role="tab" data-toggle="tab">Published</a></li>
          <li role="presentation"><a class="tab-btns" href="#archive" aria-controls="archive" role="tab" data-toggle="tab">Archive</a></li>
        </ul>
      </div>
      <!-- End of Nav tabs -->
      
    </div>
    <!-- End of Content Header -->
    
    <!-- Start of Main Content -->
    <div class="main-content">
    
      <!-- Start of Folders -->
      <div class="folders">
        <ul class="nav nav-pills nav-stacked" role="tablist">
          <li role="presentation" class="new-folder-btn"><a class="" href="#new-folder" aria-controls="new-folder" role="tab" data-toggle="tab"><i class="fa fa-plus" aria-hidden="true"></i><span class="folder-title">New Folder</span></a></li>
          <li role="presentation"><a href="#favorites" aria-controls="favorites" role="tab" data-toggle="tab"><i class="fa fa-star" aria-hidden="true"></i><span class="folder-title">Favorites</span><span class="folder-count">19</span></a></li>
          <li class="active" role="presentation"><a href="#lisas-content" aria-controls="lisas-content" role="tab" data-toggle="tab"><i class="fa fa-folder" aria-hidden="true"></i><span class="folder-title">Lisa's Content</span><span class="folder-count">37</span></a></li>
          <li role="presentation"><a href="#markerting-maddness" aria-controls="markerting-maddness" role="tab" data-toggle="tab"><i class="fa fa-folder" aria-hidden="true"></i><span class="folder-title">Markerting Maddness</span><span class="folder-count">81</span></a></li>
          <li role="presentation"><a href="#markerting-maddness" aria-controls="markerting-maddness" role="tab" data-toggle="tab"><i class="fa fa-folder" aria-hidden="true"></i><span class="folder-title">Events</span><span class="folder-count">46</span></a></li>
          <li role="presentation"><a href="#markerting-maddness" aria-controls="markerting-maddness" role="tab" data-toggle="tab"><i class="fa fa-folder" aria-hidden="true"></i><span class="folder-title">Webinars</span><span class="folder-count">27</span></a></li>
          <li role="presentation"><a href="#markerting-maddness" aria-controls="markerting-maddness" role="tab" data-toggle="tab"><i class="fa fa-folder" aria-hidden="true"></i><span class="folder-title">Onboarding</span><span class="folder-count">14</span></a></li>
        </ul>
      </div>
      
      <!-- Start of Fab Button -->
      <span class="fab-btn-sec">
        <a class="fab-btn" href="#"><i class="fa fa-plus" aria-hidden="true"></i></a>
        <a class="fab-btn fab-sm" href="#"><i class="fa fa-upload" aria-hidden="true"></i></a>
        <a class="fab-btn fab-sm" href="#"><i class="fa fa-globe" aria-hidden="true"></i></a>
      </span>
      <!-- End of Fab Button -->
      
      <!-- Start of "Assets Title of Selected Folder" -->
      <div class="folder-title-assets">
        <div class="btn-group act-btn">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-ellipsis-v" aria-hidden="true"></i></button>
          <ul class="dropdown-menu">
            <li><a href="#">Rename</a></li>
            <li><a href="#">Share</a></li>
            <li><a href="#">Duplicate</a></li>
            <li><a href="#">Delete</a></li>
          </ul>
        </div>
        
        <span>Lisa's Content</span>
      </div>
      <!-- End of "Assets Title of Selected Folder" -->
      
      <!-- Start of "Assets" -->
      <div class="assets">
      
        <!-- Drafts Tab -->
        <div class="tab-content">
          <div role="tabpanel" class="tab-pane active" id="drafts">
            <ul>
            
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Thanks for Attending: Email Wizardry Webinar
                  </p>
                  <p class="asset-sharing-text">
                    Destination: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-video-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Delivery Insight Webinar
                  </p>
                  <p class="asset-sharing-text">
                    Destination: Blog
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    MAS Webinar Follow Up
                  </p>
                  <p class="asset-sharing-text">
                    Destination: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-video-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Personalized Holiday Video - SCP Version
                  </p>
                  <p class="asset-sharing-text">
                    Destination: App Notification
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-video-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Enterprise to customers with less than 12 month terms
                  </p>
                  <p class="asset-sharing-text">
                    Destination: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    CRME Skyline Soirée
                  </p>
                  <p class="asset-sharing-text">
                    Destination: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    ALUV/PSO Exclusive Offer
                  </p>
                  <p class="asset-sharing-text">
                    Destination: Knowledge Base
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Austin Roadshow - Bring a colleague
                  </p>
                  <p class="asset-sharing-text">
                    Destination: Blog
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Newsletter survey
                  </p>
                  <p class="asset-sharing-text">
                    Destination: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Partner Breakfast_SF_2015
                  </p>
                  <p class="asset-sharing-text">
                    Destination: Blog
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-video-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Vidyard Free Trial Registration
                  </p>
                  <p class="asset-sharing-text only-you">
                    Destination: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    IHM Awards
                  </p>
                  <p class="asset-sharing-text">
                    Destination: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Cyn ondemand rebroadcast
                  </p>
                  <p class="asset-sharing-text">
                    Destination: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
            </ul>
          </div>
          
          <!-- Published Tab -->
          <div role="tabpanel" class="tab-pane" id="published">
            <ul>
            
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    8 Inbound Tactics to Master in 2016
                  </p>
                  <p class="asset-sharing-text">
                    Posted: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    More Traffic, More Leads, & More Business
                  </p>
                  <p class="asset-sharing-text">
                    Posted: Knowledge Base
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Build a Referral Form
                  </p>
                  <p class="asset-sharing-text">
                    Posted: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-video-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Automate Customer Marketing
                  </p>
                  <p class="asset-sharing-text">
                    Posted: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-video-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Send Qualified Leads to Sales
                  </p>
                  <p class="asset-sharing-text">
                    Posted: App Notification
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Empower Sales with New Tools
                  </p>
                  <p class="asset-sharing-text">
                    Posted: Blog
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-pdf-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Automate the Nurture Process
                  </p>
                  <p class="asset-sharing-text">
                    Posted: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-video-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Manage Prospects with Segments
                  </p>
                  <p class="asset-sharing-text">
                    Posted: Blog
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Compose & Send Engaging Email
                  </p>
                  <p class="asset-sharing-text">
                    Posted: Knowledge Base
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Capture Visitors with Forms
                  </p>
                  <p class="asset-sharing-text">
                    Posted: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Join the Social Conversation
                  </p>
                  <p class="asset-sharing-text">
                    Posted: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Build a Customer Referral Program
                  </p>
                  <p class="asset-sharing-text">
                    Posted: App Notification
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-video-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Send Qualified Leads to Sales
                  </p>
                  <p class="asset-sharing-text">
                    Posted: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    2016 Minneapolis IHM Customer
                  </p>
                  <p class="asset-sharing-text">
                    Posted: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    ProServices AP Campaign Aug16
                  </p>
                  <p class="asset-sharing-text">
                    Posted: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    IHM Toronto Customer List
                  </p>
                  <p class="asset-sharing-text">
                    Posted: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    UK Current Customers Contacts
                  </p>
                  <p class="asset-sharing-text">
                    Posted: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-video-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Marketing Automation Strategy
                  </p>
                  <p class="asset-sharing-text">
                    Posted: Knowledge Base
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    What's New Closer Look
                  </p>
                  <p class="asset-sharing-text">
                    Posted: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Website Prospector & SEO
                  </p>
                  <p class="asset-sharing-text">
                    Posted: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
            </ul>
          </div>
          
          <!-- Archive Tab -->
          <div role="tabpanel" class="tab-pane" id="archive">
            <ul>
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Marketing Automation Strategy
                  </p>
                  <p class="asset-sharing-text">
                    Destination: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    What's New Closer Look
                  </p>
                  <p class="asset-sharing-text">
                    Destination: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Website Prospecting & SEO
                  </p>
                  <p class="asset-sharing-text">
                    Destination: Marketing Website
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
              <li><!-- Asset Item -->
                <div class="asset-icon">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                </div>
                <div class="asset-text">
                  <p class="asset-title">
                    Thanks for Attending: Nurture Process Webinar
                  </p>
                  <p class="asset-sharing-text">
                    Destination: App Notification
                  </p>
                  <span class="asset-btn">
                    <input type="checkbox" name="star" value="favorite">
                    <label><i class="fa fa-star-o" aria-hidden="true"></i></label>
                  </span>
                </div>
              </li>
              
            </ul>
          </div>
        </div>
      </div>
      <!-- End of Assets -->
    
    </div>
    <!-- End of Main Content -->
    
  </div>
<!-- End of Main Page -->

</div>
/* SCSS Converted to CSS */

@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i';
@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css';


/* Font */
/* Font Sizes */
/* Font Weights */
/* Colors */
/* Opacity */
/* Spacing */
/* Radius */
/* Border */
/* Shadows */
/* Animation Transition */
/* Animation Delay */
/* Z-index */
/* *********** End of Variables *********** */
html, body {
  height: 100%;
}
/* Start of Page Load */
.page-load {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #f0f1f3;
  z-index: 100;
  /* Animation */
  animation-name: fade-out;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-delay: 2s;
  text-align: center;
}
.page-load span {
  position: absolute;
  top: calc(50% - 0px);
  left: calc(50% - 25px);
  display: block;
  width: 50px;
  height: 50px;
  font-size: 30px;
  color: #ccd5da;
  z-index: 110;
  /* Animation */
  animation-name: fade-out;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-delay: 1.5s;
}
/* Standard syntax */
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    z-index: -1;
  }
}
/* End of Page Load */
/* *** Start of "Whole Web Page" *** */
.whole-web-page {
  position: relative;
  height: 100%;
  min-height: 450px;
  background-color: #f0f1f3;
}
/* *** End of "Whole Web Page" *** */
/* *** Start of "Nav" *** */
.profile-sec {
  position: relative;
  display: block;
  float: left;
  width: 100%;
  padding-top: 30px;
  background: rgba(75, 199, 248, 0);
  overflow: hidden;
  -webkit-box-shadow: inset 0 -70px 140px -80px rgba(23, 155, 204, 0);
  box-shadow: inset 0 -70px 140px -80px rgba(23, 155, 204, 0);
  transition: all 0.75s ease;
  transition-delay: 0.5s;
}
.profile-sec .profile-pic {
  position: absolute;
  top: 15px;
  left: calc(50% - 18px);
  display: block;
  overflow: hidden;
  background-color: transparent;
  width: 38px;
  height: 38px;
  border-radius: 100%;
  transition: all 0.75s ease;
  transition-delay: 0.5s;
  -webkit-box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.0);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.0);
  z-index: 60;
  /* z-index: $z-profile-pic; */
}
.profile-sec .profile-pic .profile-pic-img {
  width: 38px;
  height: 38px;
  transition: all 0.75s ease;
  transition-delay: 0.5s;
}
.profile-sec .profile-pic-bg-logo {
  position: absolute;
  bottom: -30px;
  left: 100px;
  opacity: 0;
  transition: all 0.75s ease;
  transition-delay: 0.5s;
  z-index: 55;
}
.profile-sec .profile-name {
  display: block;
  opacity: 0;
  color: #fff;
  height: 26px;
  width: 220px;
  text-align: center;
  font-weight: 600;
  transition: all 0.75s ease;
}
.left-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 100%;
  background-color: #f4f4f2;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4), 0 -1px 4px 0 rgba(0, 0, 0, 0.15);
  transition: all 0.75s ease;
  transition-delay: 0.5s;
  z-index: 50;
}
.left-nav .nav {
  float: left;
  width: 60px;
  padding: 0 8px;
  transition: all 0.75s ease;
  transition-delay: 0.5s;
}
.left-nav .nav li {
  margin: 4px 0px;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
  transition: all 0.75s ease;
  transition-delay: 0.5s;
}
.left-nav .nav li:first-child {
  margin-top: 10px;
}
.left-nav .nav li:hover {
  cursor: pointer;
}
.left-nav .nav li a {
  min-width: 140px;
  width: 100%;
  color: #8d9599;
  background: none;
}
.left-nav .nav li a i {
  margin-right: 20px;
}
.left-nav .nav li a:hover {
  cursor: pointer;
}
.left-nav .nav li.active a {
  background: #dce1e2;
  color: #01374e;
}
.left-nav + .nav-cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background-color: #01374e;
  opacity: 0;
  transition: all 0.75s ease;
  transition-delay: 0.5s;
}
.left-nav:hover {
  width: 220px;
  transition: all 0.75s ease;
  transition-delay: 2s;
}
.left-nav:hover .profile-sec {
  background: rgba(75, 199, 248, 1);
  padding-top: 140px;
  -webkit-box-shadow: inset 0 -70px 140px -80px rgba(23, 155, 204, 1);
  box-shadow: inset 0 -70px 140px -80px rgba(23, 155, 204, 1);
  transition: all 0.75s ease;
  transition-delay: 2s;
}
.left-nav:hover .profile-sec .profile-pic {
  top: 20px;
  left: calc(50% - 50px);
  width: 100px;
  height: 100px;
  transition: all 0.75s ease;
  transition-delay: 2s;
  -webkit-box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
}
.left-nav:hover .profile-sec .profile-pic .profile-pic-img {
  width: 100px;
  height: 100px;
  transition: all 0.75s ease;
  transition-delay: 2s;
}
.left-nav:hover .profile-sec .profile-pic-bg-logo {
  opacity: 1;
  transition: all 0.75s ease;
  transition-delay: 2s;
}
.left-nav:hover .profile-sec .profile-name {
  opacity: 1;
  transition: all 0.75s ease;
  transition-delay: 2s;
}
.left-nav:hover .nav {
  width: 100%;
  transition: all 0.75s ease;
  transition-delay: 2s;
}
.left-nav:hover .nav li {
  width: 100%;
  transition: all 0.75s ease;
  transition-delay: 2s;
}
.left-nav:hover .nav li a:hover {
  color: #01374e;
}
.left-nav:hover .nav li a:hover span {
  color: #01374e;
}
.left-nav:hover .nav li:hover a {
  background: #dce1e2;
}
.left-nav:hover .nav li.active:hover a {
  background: #dce1e2;
  color: none;
}
.left-nav:hover ~ .nav-cover {
  z-index: 40;
  opacity: 0.15;
  transition: all 0.75s ease;
  transition-delay: 2s;
}
/* *** End of "Nav" *** */
/* *** Start of "Header" *** */
.header {
  float: left;
  width: 100%;
  height: 51px;
  padding-left: 60px;
  background: #01374e;
}
.logo {
  float: left;
  margin-top: 5px;
  padding: 5px 15px;
  color: #fff;
  opacity: 0.5;
}
.header-btns {
  float: right;
  padding: 5px 15px;
}
.header-btns .dropdown-menu {
  right: 0;
  left: initial;
}
/* *** End of "Header" *** */
/* *** Start of "Main Page" *** */
.page {
  float: left;
  width: 100%;
  height: calc(100% - 51px);
  padding-left: 60px;
}
.content-header {
  height: 45px;
  padding: 0 20px 0 10px;
  background-color: #01374e;
  opacity: 0.9;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4), 0 -1px 4px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4), 0 -1px 4px 0 rgba(0, 0, 0, 0.15);
}
.page-title {
  display: block;
  float: left;
  margin: 10px 0 0 5px;
  width: 208px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}
.content-tabs {
  display: block;
  float: left;
  width: calc(100% - 232px);
}
.content-tabs ul {
  border: none;
}
.content-tabs ul li {
  padding: 0 10px;
}
.content-tabs ul li a {
  text-transform: uppercase;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  opacity: 0.75;
  border: none;
}
.content-tabs ul li a:hover {
  background: none;
  border: none;
  color: #fff;
  opacity: 1;
}
.content-tabs ul li a:focus, .content-tabs ul li a:focus {
  background: none;
  border: none;
  color: #fff;
}
.content-tabs ul li.active {
  border-bottom: 4px solid #fff;
}
.content-tabs ul li.active a {
  background: none;
  border: none;
  color: #fff;
  opacity: 1;
}
.content-tabs ul li.active a:hover {
  background: none;
  border: none;
  color: #fff;
  opacity: 1;
}
.content-tabs ul li.active a:active, .content-tabs ul li.active a:focus {
  background: none;
  border: none;
  color: #fff;
}
.main-content {
  position: relative;
  /* min-height: 350px; */
  height: calc(100% - 45px);
}
/* Start of "Folders" */
.folders {
  float: left;
  padding: 0 15px;
  margin-top: 42px;
  width: 232px;
}
.folders .nav-pills li {
  margin-top: 5px;
}
.folders .nav-pills li a {
  display: block;
  width: 100%;
  height: 45px;
  color: #2a3033;
  font-size: 14px;
}
.folders .nav-pills li a i {
  display: block;
  float: left;
  width: 35px;
  margin-top: 4px;
}
.folders .nav-pills li a .folder-title {
  display: block;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100px;
}
.folders .nav-pills li a .folder-count {
  display: block;
  float: right;
  width: 30px;
  text-align: right;
}
.folders .nav-pills li a:hover {
  background: #dce1e2;
}
.folders .nav-pills li.new-folder-btn {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-top: 0px;
}
.folders .nav-pills li.new-folder-btn a:hover {
  color: #4bc7f8;
  background: none;
}
.folders .nav-pills li.active a {
  font-weight: 600;
  background: #dce1e2;
}
.folders .nav-pills li.active a i.fa-folder::before {
  content: "\f07c";
}
.folders .nav-pills li.active a:hover, .folders .nav-pills li.active a:focus, .folders .nav-pills li.active a:active {
  color: #2a3033;
}
.folders .nav-pills li.new-folder-btn a {
  background: transparent;
  font-weight: 400;
}
/* End of "Folders" */
.folder-title-assets {
  display: block;
  float: left;
  height: 30px;
  margin: 5px 0;
}
.folder-title-assets > button {
  /* Abc */
}
.folder-title-assets span {
  display: inline-block;
  color: #01374e;
  font-size: 16px;
  font-weight: 600;
}
/* Start of "Assets" */
.assets {
  float: left;
  width: calc(100% - 232px);
  height: calc(100% - 65px);
}
.assets .tab-content {
  overflow-y: scroll;
  height: 100%;
  background: #fff;
  margin-right: 40px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.4), 0 -1px 4px 0 rgba(0, 0, 0, 0.15);
}
.assets .tab-content .tab-pane ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.assets .tab-content .tab-pane ul li {
  display: table;
  width: 100%;
}
.assets .tab-content .tab-pane ul li:hover {
  cursor: pointer;
  background: rgba(75, 199, 248, 0.1);
}
.assets .tab-content .tab-pane ul li .asset-icon {
  float: left;
  width: 70px;
  text-align: center;
  padding-top: 15px;
}
.assets .tab-content .tab-pane ul li .asset-icon i {
  font-size: 34px;
  color: #01374e;
}
.assets .tab-content .tab-pane ul li .asset-text {
  position: relative;
  float: left;
  width: calc(100% - 70px);
  border-bottom: 1px solid #ccc;
  color: #2a3033;
}
.assets .tab-content .tab-pane ul li .asset-text .asset-title {
  font-size: 14px;
  font-weight: 600;
  color: #2a3033;
  margin: 12px 0 0;
}
.assets .tab-content .tab-pane ul li .asset-text .asset-sharing-text {
  font-size: 12px;
  font-weight: 400;
  color: #2a3033;
  margin: 0 0 12px;
  height: 17px;
}
.assets .tab-content .tab-pane ul li .asset-text .asset-btn {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 50px;
  text-align: center;
  color: #2a3033;
}
.assets .tab-content .tab-pane ul li .asset-text .asset-btn input {
  position: absolute;
  display: block;
  z-index: 10;
  right: 0px;
  top: 0;
  left: 0;
  bottom: 0;
  margin: 0;
  width: 50px;
  height: 80px;
  opacity: 0;
}
.assets .tab-content .tab-pane ul li .asset-text .asset-btn input:hover {
  cursor: pointer;
}
.assets .tab-content .tab-pane ul li .asset-text .asset-btn input:checked + label i::before {
  content: "\f005";
}
.assets .tab-content .tab-pane ul li .asset-text .asset-btn label {
  padding-top: 10px;
  font-size: 18px;
  color: #2a3033;
}
/* End of "Assets" */
/* *** End of Main Page *** */
/* *** Start of Buttons *** */
a:hover, button:hover, .nav li:hover {
  cursor: pointer;
}
.search {
  position: relative;
  display: inline-block;
  float: left;
  text-align: right;
  margin: 1px 0px 0px 0px;
  padding-right: 0px;
  /* border-bottom: 1px solid $rgba-white; */
}
.search input {
  width: 170px;
  height: 32px;
  padding: 0 35px 0 10px;
  border: none;
  border-radius: 4px;
  background: transparent;
  transition: all 0.3s ease;
  color: #fff;
}
.search input:active, .search input:focus {
  background: rgba(255, 255, 255, 0.5);
  border: none;
  outline: none;
  transition: all 0.3s ease;
}
.search input:active ~ .search-underline, .search input:focus ~ .search-underline {
  background: rgba(255, 255, 255, 0.0);
}
.search .search-icon {
  position: absolute;
  top: 6px;
  right: 15px;
  color: #fff;
  opacity: 0.5;
}
.search .search-icon:hover {
  cursor: pointer;
}
.search .search-underline {
  display: block;
  position: absolute;
  height: 1px;
  width: 150px;
  top: 31px;
  right: 10px;
  background: rgba(255, 255, 255, 0.5);
}
.fab-btn-sec {
  position: absolute;
  display: block;
  top: -30px;
  right: 30px;
  width: 60px;
  height: 60px;
  text-align: center;
  z-index: 10;
}
.fab-btn-sec .fab-btn {
  display: block;
  margin: 0 auto 10px;
  background: #4bc7f8;
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  text-align: center;
  padding: 12px 0;
  font-size: 26px;
  -webkit-box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.4);
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}
.fab-btn-sec .fab-btn:hover {
  background: #26aad3;
  color: #fff;
  transition: all 0.3s ease;
}
.fab-btn-sec .fab-sm {
  width: 40px;
  height: 40px;
  padding: 6px 0;
  font-size: 18px;
  transform: scale(0);
  /* Animation */
  animation-name: bounce-out;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}
.fab-btn-sec:hover {
  height: 170px;
  z-index: 100;
}
.fab-btn-sec:hover .fab-sm {
  -webkit-animation-name: bounce-in;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 0.3s;
  /* Chrome, Safari, Opera */
  -webkit-animation-fill-mode: forwards;
  /* Chrome, Safari, Opera */
  -webkit-animation-delay: 0s;
  /* Chrome, Safari, Opera */
  animation-name: bounce-in;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}
.fab-btn-sec:hover .fab-sm + .fab-sm {
  animation-delay: 0.1s;
}
/* Standard syntax */
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.05);
  }
  75% {
    transform: scale(0.98);
  }
  90% {
    transform: scale(1.005);
  }
  100% {
    transform: scale(1);
  }
}
/* Standard syntax */
@keyframes bounce-out {
  0% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(0);
  }
}
.btn-group button {
  background: none;
  border: none;
  border-radius: 4px;
  min-width: 30px;
  color: #2a3033;
  transition: all 0.3s ease;
}
.btn-group button:hover, .btn-group button:active, .btn-group button:focus {
  background: transparent;
  border: none;
  box-shadow: none;
}
.btn-group ul {
  padding: 0 5px 5px;
}
.btn-group ul li {
  margin-top: 5px;
}
.btn-group ul li a {
  padding: 6px 30px 6px 10px;
  transition: all 0.3s ease;
}
.btn-group ul li a:hover {
  background: #f0f1f3;
  color: #2a3033;
  transition: all 0.3s ease;
}
.btn-group.open button.dropdown-toggle {
  background: #dce1e2;
  border: none;
  box-shadow: none;
  transition: all 0.3s ease;
}
.header-btns .btn-group {
  display: inline-block;
  float: left;
}
.header-btns .btn-group button {
  background: transparent;
  border: none;
  color: #fff;
  opacity: 0.5;
}
.header-btns .btn-group button:hover {
  opacity: 0.75;
}
.header-btns .btn-group.open button.dropdown-toggle {
  background: transparent;
  color: #fff;
  opacity: 1;
}
/* *** End of Buttons *** */
/* CSS Class Order */
/*
 position
 display
 float
 overflow
 top
 right
 bottom
 left
 width
 height
 margin
 padding
 text-align
 font-family
 font-size
 font-weight
 background-color
 color
 border
 border-radius
 box-shadow
 opacity
 transition
 transition-delay
 z-index
 */