/* TM CMS Template: Collaboration */
    div.collaboration-area                               { position: relative; display: block; margin: 0px auto; max-width: 1000px;  }
    div.collaboration-main-nav                               { --gap: 40px; position: relative; display: inline-flex; flex-wrap: wrap; margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap)); width: calc(80% + var(--gap)); }
    div.collaboration-main-nav div.navigation-button         { margin: var(--gap) 0 0 var(--gap); width: calc((100% - (var(--gap)*4)) / 4) }
    div.collaboration-main-nav div.navigation-button a       {  }
    div.collaboration-main-nav div.navigation-button a img   { width: 100%; }

    /* div.container               { width: 80%; } */
    div.main-area               { padding: 20px 0px; display: flex; flex-direction: row; }
    div.main-content            { flex: 4; }
    div.main-content p          {  }

    div.side-navigation         { flex: 1; padding: 10px; margin: 0px 0px 0px 150px;  }
    div.side-navigation a       { display: block; padding: 5px 0px; }

    div.content-video-box       {float: right; padding: 0px 0px 20px 20px; width: 40%;}
    div.content-video-box img   { width: 100%; }
    img.content-img             {float: right; padding: 0px 0px 20px 20px; width: 40%;}

    @media (max-width: 640px){
        div.about-basics-main-nav                               { --gap: 10px; }
        h1 { font-size: 36px !important; }
        div.main-area               { flex-direction: column; }
        div.main-content            { flex: 1; order: 2; }
        div.side-navigation         { flex: 1; order: 1; padding: 0px 0px 40px 0px; margin: 0px; text-align: center;   }
        div.side-navigation a       { display: block;  padding: 5px; }
        div.content-video-box       { float: none; padding: 0px 0px 40px 0px; width: 100%;}
        img.content-img       { float: none; padding: 0px 0px 40px 0px; width: 100%;}
    }