<div class="container-fluid">
    <div class="row">
        <div id="DesignLink" class="col-sm-4 heading-design">
            <h5 class="mb-0">01.</h5>
            <h1 class="mb-0"><strong>Design</strong></h1>
        </div>
        <div id="ProgLink" class="col-sm-4 heading-prog">
            <h5 class="mb-0">02.</h5>
            <h1 class="mb-0"><strong>Programming</strong></h1>
        </div>
        <div id="SupportLink" class="col-sm-4 heading-music">
            <h5 class="mb-0">03.</h5>
            <h1 class="mb-0"><strong>Support</strong></h1>
        </div>
    </div>
</div>

<div id="Design" class="container-fluid tab-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 left-content">
                <strong>Design is Human.</strong>
                <img src="http://nickfazz.me/codepen_assets/vectors/head_vector_styled.svg" alt="Line art of human head." class="imf-fluid img-custwidth">
            </div>
        <div class="col-sm-6 right-content">
            <h3><strong>Design is human. Design is making ideas real.</strong></h3>
            <p>Human centered design is at the core of product development. Empathetic communication with the client is a key part of the development process from the beginning until the product launch and support phases.</p>
            <p>Design thinking is iterative, and cyclic. Combining raw creative out with theoretical structure is the best way to deliver high quality products to clients. Listening and guiding are core communication principles between the developer and client.</p>
            <p>When developing new web sites and applications our job as a development studio is to meet client needs through empathetic research and interaction. Listening to the client is key when solving in an unfamiliar domain of expertise. Guiding must be approached as a craft of finess to bridge the gulf between possible and not possible.</p>
        </div>
    </div>
        <div class="row">
        </div>
    </div>
</div>
<div id="Programming" class="container-fluid tab-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 left-content">
                <strong>Programming Delivers Solutions.</strong><br>
                <img src="http://nickfazz.me/codepen_assets/vectors/code_art.svg" alt="Binary digits and line art." class="imf-fluid img-custwidth">
            </div>
            <div class="col-sm-6 right-content">
                <h3><strong>Programming Delivers Solutions. Engineering and Development Thrive on Strong Design.</strong></h3>
            <p>Using current software development technologies and proven best practices in software engineering, coupled with a formal background in computer science drives and delivers high quality web development solutions.</p>
            <p>Adaptive development methods ensure cross-device and cross-platform consistent software solutions.</p>
            <p>Understanding client levels of technical knowledge is important. We understand that some clients require to be more involved in the development process than others. Transparency is a key factor which addresses security and technical issues across domains. When working with clients from the science and engineering field open communication and input regarding technology is welcome. We are always open to learning and compormise.</p>
            </div>
        </div>
    </div>
</div>
<div id="Support" class="container-fluid tab-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 left-content">
                <strong>Support is Trust.</strong>
                <img src="http://nickfazz.me/codepen_assets/vectors/support_vector.svg" alt="Line art of key." class="imf-fluid img-custwidth">
            </div>
            <div class="col-sm-6 right-content">
                <h3><strong>Support is Trust. Product Life Cycle Beyond Development.</strong></h3>
            <p>Client support is rooted in the mindset of client empathy and need. Delivering emerging technologies to strengthen the product and both user and client experience are integral to our support role.</p>
            <p>Security features are updated to protect against current threats to protect the business, technology, and users. Best practices are communicated and implemented with the client and user in mind.</p>
            <p>Support is an ongoing role which extends the development period of the software. Scale, security and usability are key support concepts which we deliver in our product support role.</p>
            </div>
        </div>
    </div>
</div>

.heading-design {
    cursor: pointer;
    background-color: #fff;
    border-bottom: solid 1px #212121;
    padding: 2rem;
    transition: background-color 0.5s ease;
}

.heading-design:hover {
    background-color: #ff9800;
    border-bottom: solid 1px #ff9800;
}

.heading-prog {
    cursor: pointer;
    background-color: #fff;
    border-bottom: solid 1px #212121;
    padding: 2rem;
    transition: background-color 0.5s ease;
    transition: color 0.5s ease;
}

.heading-prog:hover {
    color: #eeeeee;
    background-color: #212121;
    border-bottom: solid 1px #212121;
}

.heading-music {
    cursor: pointer;
    background-color: #fff;
    border-bottom: solid 1px #212121;
    padding: 2rem;
    transition: background-color 0.5s ease;
}

.heading-music:hover {
    background-color: #ff6f61;
    border-bottom: solid 1px #ff6f61;
}

.tab-content {
    display: none;
}

.left-content {
    padding-left: 4rem;
    padding-top: 4rem;
    font-size: 3.75rem;
}

.right-content {
    padding-left: 4rem;
    padding-top: 4rem;
}

.img-custwidth {
    padding-top: 4rem;
    width: 512px;
}

// Author: Nicholas Fazzolari
// Basic tab switching code in pure ES6

// TODO:   Add default tab open feature with an on off switch
//         Make the event listener assignments general

function openTab(tabName) {
    let i;
    let tabContent;
    
    tabContent = document.getElementsByClassName("tab-content");
    
    for (i = 0; i < tabContent.length; i++) {
        tabContent[i].style.display = "none";
    }
    
    document.getElementById(tabName).style.display = "flex";
}


// This needs to DRY'ed up so it can be used with a CMS
let designLinkEl = document.getElementById("DesignLink");
let progLinkEl = document.getElementById("ProgLink");
let musicLinkEl = document.getElementById("SupportLink");

designLinkEl.addEventListener("click", function(){openTab("Design")}, false);
progLinkEl.addEventListener("click", function(){openTab("Programming")}, false);
musicLinkEl.addEventListener("click", function(){openTab("Support")}, false);