/* ---- PAGE 5 --- (development)  ---------------------- */
.k4-p5-left-gap {width: calc((100vw - 740px)/2);}
@media (max-width:800px) {.k4-p5-left-gap {width: calc((100vw - 670px)/2);} }
@media (max-width:700px) {.k4-p5-left-gap {width: calc((100vw - 580px)/2);} }
@media (max-width:600px) {.k4-p5-left-gap {width: calc((100vw - 510px)/2);} }

/* Style the tab buttons */
.k4-tablink {
  background-color: #555; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 0px 0px 0px 0px; font-size: 13px; }
/* Change background color of buttons on hover */
.k4-tablink:hover { background-color: #777; }
/* Set default styles for tab content */
.k4-tabcontent { background-color: #fff; color: white; display: none; padding: 0px; border-left: 1px solid #777;
  border-right: 1px solid #777; border-bottom: 1px solid #777; }
/* Style each tab content individually */
#k4-alisp, #k4-dcl, #k4-delphi, #k4-csharp, #k4-cadscript {overflow:auto;}
/* tablinks width are 20% of width */
 .k4-tablink      { height: 20px;  width: 160px; }
#k4-imgcontainer { height: 240px; width:  800px; }
.k4-tabcontent   { height: 220px; width:  800px; }
@media(max-width:950px) {.k4-tablink { width: calc((100vw - 120px)/5); }
                         #k4-imgcontainer { width: calc(100vw - 120px); }
                         .k4-tabcontent { width: calc(100vw - 120px); } }
.k4-p5-img1-gap { width: 35px; } }
/* below is image wid + 2 * border = 800 + 2x35 */
@media (max-width:870px) { .k4-p5-img1-gap { width: calc((100vw - 800px)/2); } }
.k4-p5-img1-wid { max-width: calc(100vw - 70px); height: auto; }

     

/* ---- gap before header (after logo) ------- 
.k4-p5-left-gap {width: 270px}
@media(max-width:1200px){.k4-p5-left-gap {width: calc(14vw)}}
@media(max-width:1000px){.k4-p5-left-gap {width: calc(10vw)}}
@media(max-width:800px){.k4-p5-left-gap {width: calc(9vw)}}
@media(max-width:600px){.k4-p5-left-gap {width: calc(2vw)}}
@media(max-width:500px){.k4-p5-left-gap {width: calc(1vw)}}
*/
/* set left side bullet width */
/*
.k4-p5-tab3-wid1 {width: 350px}
@media(max-width:800px){.k4-p5-tab3-wid1 {width: 280px;}}
@media(max-width:700px){.k4-p5-tab3-wid1 {width: 260px;}}
@media(max-width:600px){.k4-p5-tab3-wid1 {width: 235px;}}
*/
/*  - dont set widths for 2nd list of tabs
.k4-p5-tab3-wid2 {width: 260px}
@media(max-width:800px){.k4-p5-tab3-wid2 {width: 220px;}}
@media(max-width:700px){.k4-p5-tab3-wid2 {width: 200px;}}
@media(max-width:600px){.k4-p5-tab3-wid2 {width: 180px;}}
*/
/* calculated as follows: WID - (cadhead wid + 120) - synched with cadhead  */