*{
    margin: 0;
    padding: 0;
}

body {
    font-size: 0.875em;
    line-height: 150%;
    font-family: helvetica, arial, verdana;
    text-align: left;
    color: #333333;
}

img {
    max-width: 100%;
}

a img {
    border: none;
}

a {
    color: #08a4ae;
    text-decoration: none;
}

p {
    margin-top: 2%;
}
    
 

.wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}


#scroll {
    position: fixed;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background-color: #6eb0b5;
    text-indent: -9999px;
    display: none;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    z-index: 102;
}

    #scroll span {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -8px;
        margin-top:  -12px;
        height: 0;
        width: 0;
        border: 8px solid transparent;
        border-bottom-color: #fff;
    }

    #scroll:hover {
        background-color: #6eb0b5;
        opacity: 1;filter: "alpha(opacity=100)";
        -ms-filter:"alpha(opacity=100)";
    }

.header {
    width: 100%;
    background-image: url(../images/header_bkgrnd.png);
    color: #fff;
    margin: 0;
    padding: 0;   
}

    .headerShell {
        max-width: 1200px;
        margin: 0 auto;
    }
    
        .headerShell a {
            color: #fff;
            text-decoration: none;
        }
        
        .headerShell a:hover {
            color: #61eaf3;
        } 
        
            .headerName {
                float: left;
                padding: 2.25% 0 0 1.5%;
            }
            
        .headerNav1 {
            float: right;
            width: 50%;
            text-align: right;
            list-style-type: none;
            padding-top: 3%;
            margin-right: 1.25%;
        }
            
            .headerNav1 li {
                display: inline;
                color: #61eaf3;
                border-right: .1em solid #a2a2a2;
                padding: 0 3%;
            }
            
                .headerNav1 li:last-child {
                    border-right: none;
                }
                
        .navTrigger {
            display: none;
        }
        
        .headerNav2 li {
            display: none;
        }
                
            
            
            
.content {
    max-width: 1200px;
    margin: 1% auto;
}    

    .heading {
        text-transform: uppercase;
        margin-left: 0.625em;
        padding-bottom: 1.5%;
    }
    
    .workShell{
        width: 100%;
        padding-bottom: 1%;
        margin-bottom: 2%;
    }

        .workShell img {
            margin-bottom: 1.66%;
        }
    
        .workTitle {
            background-color: #3d959c;
            color: #fff;
            padding: 1% 2%;
        }

            .workTitle h1 {
                float: left;
                font-size: 1.25em;
                font-weight: bold;
                text-transform: uppercase;
                line-height: 125%;
                margin: 1% 2% 0 0;
            }

            .workTitleInfo {
                float: left;
                width: 80%;
            }            

                .workTitleInfo img {
                    float: left;
                    margin-right: 1%;
                }

                .workTitleInfo p {
                    float: left;
                    padding: 0;
                    margin: 1% 5% 0 0;
                }

        .workInfo {
            width: 97%;
            margin: 1% 2%;
        }

        .workSmallImg {
            float: left;
            margin: 1.66% 0;
        }

        .workInfoBtns {
            float: left;
            display: inline;
            padding: .5%;
            outline: 1px solid #3d959c;
            margin-right: 1%;
        }

            .workBtns a, a:hover {
                text-decoration: none;
                color: #3d959c;
            }

        .workVideoShell {
            width: 100%;
            max-width: 650px;
            max-height: 360px;
            margin: 0 auto;
        }

                .workVideo {
                    position: relative;
                    padding-bottom: 56.25%; 
                    padding-top: 30px;
                    height: 0;
                    overflow: hidden;
                }

                    .workVideo iframe, .workVideo object, .workVideo embed {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                    }
            
            
            
            
        .header2, .headerName2, .heading2, .workTitleInfo2, .workTitleInfo3, .workTitleInfo4, .workImg, .workOptions2, .workBtnRow2, .workBtns2, .workBtnRow3, .workBtns3, .videoShell2, .aboutTopImgBig2, .aboutSkillsCol2, .aboutSkillsCol3, .aboutSkillsCol4, .aboutAttributeCols2, .aboutAttributeCols3 {
            display: none;
        }


        
        .singleShell {
            float: left;
            width: 73.75%;
        }
        
        .aboutShell {
            width: 100%;
        }

            .aboutTitles {
                font-weight: bold;
                margin: .5% auto;
            }
        
           .aboutText {
                margin: 1.66%;
            }

            .aboutTop {
                width: 100%;
            }

                .aboutTop p {
                    float: left;
                    width: 50%;
                    font-size: 1.25em;
                    line-height: 175%;
                    text-align: center;
                }

                    .aboutTopTextBig {
                        font-size: 1.5em;
                    }

                    .aboutTopTextGrn {
                        font-size: 1.5em;
                        font-weight: bold;
                        color: #3d959c;
                    }

                .aboutTopImgSmall {
                    float: left;
                    width: 25%;
                    display: block;
                }

                .aboutTopImgBig {
                    display: block;
                }

            .aboutSkills {
                width: 100%;
                background-color: #3d959c;
                margin-top: 0;
                padding-top: 0;
            }

                .aboutSkillsShell{
                    max-width: 1200px;
                    margin: 0 auto;
                }

                    .aboutSkillsShell h1 {
                        color: #fff;
                        font-size: 1.5em;
                        font-weight: bold;
                        text-align: center;
                        text-transform: uppercase;
                        padding: 2%;
                    }

                    .aboutSkillsImg {
                        float: left;
                        width: 20%;
                        margin-bottom: 2%;
                    }

                    .aboutSkillsCol {
                        float: left;
                        width: 22%;
                        padding: 1% 2%;
                        margin-bottom: 2%;
                        border-right: 1px solid #fff;
                    }

                        .aboutSkillsColText{
                            float: left;
                            color: #fff;
                            padding: 2% 0;
                        }

                        .aboutSkillsColSquare {
                            float: right;
                            padding: 2% 0;
                        }

                            .aboutSkillsSquare {
                                float: left;
                                height: 18px;
                                width: 18px;
                                background-color: #cee4e6;
                                -moz-border-radius: 3px;
                                -webkit-border-radius: 3px;
                                border-radius: 3px;
                                margin-left: 5px;
                            }

                            .aboutSkillsSquareOutline {
                                float: left;
                                height: 16px;
                                width: 16px;
                                border: 1px solid #cee4e6;
                                -moz-border-radius: 3px;
                                -webkit-border-radius: 3px;
                                border-radius: 3px;
                                margin-left: 5px;
                            }

            .aboutAttributeTitle {
                color: #333;
                font-size: 1.5em;
                font-weight: bold;
                text-align: center;
                text-transform: uppercase;
            }

            .aboutAttributeCols {
                float:  left;
                width: 22%;
                height: 130px;
                background-color: #cee4e6;
                border: 1px solid #3d959c;
                text-align: center;
                margin: 2% 0 2% 2.5%;
            }

                .aboutAttributeCols p {
                    font-size: 1.5em;
                    line-height: 125%;
                    padding: 7% 5%;
                }
           
    
    
    
    .workBtnRow1 {
        width: 100%;
        margin: 0 auto;   
    }
        
        .workBtns1 {
            float: left;
            width: 22.91%;
            margin: 0 0 1.75% 1.75%;
        }
        
            .workBtnsOver1 {
                position: absolute;
                width: 22.9%;
                opacity: 0;
                transition: opacity .5s ease-in-out;
                -moz-transition: opacity .5s ease-in-out;
                -webkit-transition: opacity .5s ease-in-out;
                z-index: 101;
            }

                .workBtnsOver1:hover {
                    opacity: 1.0;
                    transition: opacity .5s ease-in-out;
                    -moz-transition: opacity .5s ease-in-out;
                    -webkit-transition: opacity .5s ease-in-out;
                }
            
            .workBtns1 img {
                position: relative;
                border: .1em solid #a2a2a2;
                z-index: 100;
            }
            
               

.footer {
    width: 100%;
    background-color: #3d959c;
    color: #fff;
    font-size: 0.75em;    
    margin: 0;
    padding: .5% 0;    
}

    .footerShell {
        max-width: 1200px;
        margin: 0 auto;
    }
    
        .footerShell a {
            color: #fff;
            text-decoration: none;
        }
        
        .footerShell a:hover {
            color: #61eaf3;
        } 

            .footerShell li {
                display: inline;
                color: #61eaf3;
                border-right: .1em solid #a2a2a2;
                padding: 0 0.625em;
            }
            
                .footerShell li:last-child {
                    border-right: none;
                }



@media screen and (max-width: 1200px){
    .workTitleInfo {
        width: 60%;
    }
    
        .workTitleInfo p {
            margin-top: 2%;
        }
    
    .workSmallImg {
        width: 49.1%;
    }
}


@media screen and (max-width: 1050px){
    .aboutAttributeCols p {
        font-size: 1.5em;
        padding-top: 11%;
    }
}


@media screen and (max-width: 1024px){
    .aboutSkillsImg img {
        width: 80%;
        height: 80%;
    }
}


@media screen and (max-width: 956px){
    .header2 {
        width: 100%;
        background-image: url(../images/header_bkgrnd2.png);
        color: #fff;
        margin-bottom: 1%;
        padding: 0;
        display: block;   
    }
    
        .headerName {
            float: left;
            padding: 1.75% 0 0 1.5%;
        }
    
    .workTitleInfo {
        width: 65%;
    }
    
    .workBtnRow2 {
        width: 100%;
        color: #08a4ae;
        margin: 0 auto;
        display: block;   
    }
    
        .workBtns2 {
            float: left;
            width: 30.54%;
            margin: 0 0 2.25% 2.25%;
            display: block;
        }
    
            .workBtnsOver2 {
                position: absolute;
                width: 30.54%;
                opacity: 0;
                transition: opacity .5s ease-in-out;
                -moz-transition: opacity .5s ease-in-out;
                -webkit-transition: opacity .5s ease-in-out;
                z-index: 101;
                display: block;
            }

                .workBtnsOver2:hover {
                    opacity: 1.0;
                    transition: opacity .5s ease-in-out;
                    -moz-transition: opacity .5s ease-in-out;
                    -webkit-transition: opacity .5s ease-in-out;
                }

            .workBtns2 img {
                position: relative;
                display: block;
                border: .1em solid #a2a2a2;
                z-index: 100;
            }
            
    .aboutSkillsCol2 {
        display: block;
        float: left;
        width: 20%;
        padding: 1% 2%;
        margin-bottom: 2%;
        border-right: 1px solid #fff;
    }
    
        .aboutSkillsColText {
            float: none;
            padding: 2% 0 1% 8%;
        }

        .aboutSkillsColSquare {
            float: none;
            padding: 0 0 3% 8%;
        }
    
    .header, .workBtnRow1, .workBtns1, .workBtnRow3, .workBtns3, .aboutSkillsCol, .aboutSkillsCol3, .aboutSkillsCol4, .aboutSkillsImg {
        display: none;
    }
}


@media screen and (max-width: 900px){
    .aboutTop p {
        font-size: 1em;
        line-height: 150%;
    }
    
        .aboutTopTextBg, .aboutTopTextGrn {
            font-size: 1.25em;
        }
}



@media screen and (max-width: 768px){
    .navTrigger {
        display: block;
        cursor: pointer;
    }
    
    .headerName {
        padding-top: 2.25%;
    }
    
    .headerNav1 {
        width: 25%;
        padding-top: 3.25%;
    }
    
        .headerNav1 li {
            display: none;
        }
        
        .headerNav2 {
            display: none;
            width: 100%;
            background-color: #3d959c;
        }
        
            .navTrigger2 {
                display: none;
            }
        
            .headerNav2 a {
                color: #ffffff;
                text-decoration: none;
            }
        
        .headerNav2 li {
            display: block;
            padding: .8em;
            text-align: left;
            color: #61eaf3;
            border-bottom: .1em solid #c6c6c6;
            border-right: none;
        }
        
            .headerNav2 li:last-child {
                border-bottom: none;
            }
    
    .headerName1 {
        display: none;
    }
    
    .aboutAttributeCols2 {
        display: block;
        float: left;
        width: 30%;
        height: 100px;
        background-color: #cee4e6;
        border: 1px solid #3d959c;
        text-align: center;
        margin: 2% 0 2% 2.5%;
    }
    
    .aboutAttributeCols2 p {
        font-size: 1.25em;
        padding: 5%;
    }
    
    .aboutAttributeCols, .aboutAttributeCols3 {
        display: none;
    }
}

@media screen and (max-width: 759px){
    .workTitleInfo2 {
        float: left;
        display: block;
        width: 50%;
    }
    
        .workTitleInfo2 img {
            float: left;
            margin-right: 1%;
        }
        
        .workTitleInfo2 p {
            float: left;
            padding: 0;
            margin: 3% 5% 0 0;
        }
    
    .workTitleInfo, .workTitleInfo3, .workTitleInfo4 {
        display: none;
    }
}
    
    
@media screen and (max-width: 667px){
    .heading2 {
        display: block;
        text-transform: uppercase;
        margin-left: 0.625em;
        padding-bottom: 1.5%;
    }
    
    .workInfoBtns {
        margin-right: 1.66%;
    }
    
    .workBtnRow3 {
        width: 100%;
        margin: 0 auto;
        padding-left: 2%;
        display: block;   
    }
    
        .workBtns3 {
            float: left;
            width: 48%;
            margin: 0 0 3% 2%;
            display: block;
        }
    
            .workBtnsOver3 {
                position: absolute;
                width: 47%;
                opacity: 0;
                transition: opacity .5s ease-in-out;
                -moz-transition: opacity .5s ease-in-out;
                -webkit-transition: opacity .5s ease-in-out;
                z-index: 101;
                display: block;
            }

                .workBtnsOver3:hover {
                    opacity: 1.0;
                    transition: opacity .5s ease-in-out;
                    -moz-transition: opacity .5s ease-in-out;
                    -webkit-transition: opacity .5s ease-in-out;
                }

            .workBtns3 img {
                position: relative;
                display: block;
                border: .1em solid #a2a2a2;
                z-index: 100;
            }
    
    .workImg {
        display: block;
        width: 100%;
        margin-bottom: 1.66%;
    }
            
        .aboutTopBoxText2 {
            display: block;
            float: left;
            width: 48%;
        }
    
    .heading, .workSmallImg, .workBtnRow1, .workBtnRow2 {
        display: none;
    }
}


@media screen and (max-width: 635px){
    .workTitle h1 {
        float: none;
    }
    
    .workTitleInfo3 {
        float: none;
        display: block;
        width: 100%;
        margin: 1% 0;
    }
    
        .workTitleInfo3 img {
            float: left;
            margin-right: 1%;
        }
        
        .workTitleInfo3 p {
            float: left;
            padding: 0;
            margin: 2% 5% 0 0;
        }
    
    .aboutTop p {
        width: 100%;
    }
    
    .aboutTopImgBig2 {
        display: block;
    }
    
    .aboutSkillsCol3 {
        display: block;
        float: left;
        width: 29%;
        padding: 1% 2%;
        margin-bottom: 2%;
        border-right: 1px solid #fff;
    }
    
    .workTitleInfo, .workTitleInfo2, .workTitleInfo4, .aboutTopImgSmall, .aboutTopImgBig, .aboutSkillsCol, .aboutSkillsCol2, .aboutSkillsCol4 {
        display: none;
    }
}




@media screen and (max-width: 500px){
    .headerName {
        padding-top: 3.5%;
    }
    
    .headerNav1 {
        width: 10%;
    }
}


@media screen and (max-width: 455px){
    .workTitleInfo4 {
        float: none;
        display: block;
        width: 100%;
        margin: 1% 0;
    }
    
        .workTitleInfo4 img {
            float: left;
            margin-right: 1%;
        }
        
        .workTitleInfo4 p {
            float: left;
            padding: 0;
            margin: 2% 5% 0 0;
        }
    
    .aboutSkillsCol4 {
        display: block;
        float: left;
        width: 45%;
        padding: 1% 2%;
        margin-bottom: 2%;
        border-right: 1px solid #fff;
    }
    
        .aboutSkillsColText {
            padding-left: 15%;
        }

        .aboutSkillsColSquare {
            padding-left: 15%;
        }
    
    .aboutAttributeTitle {
        margin-top: 4%;
    }
    
    .aboutAttributeCols3 {
        display: block;
        width: 100%;
        background-color: #fff;
        border: none;
        padding: 3%;
    }
    
        .aboutAttributeCols3 ul {
            font-size: 1.25em;
            padding: inherit;
            margin-left: 2%;
        }
    
    .workTitleInfo, .workTitleInfo2, .workTitleInfo3, .aboutSkillsCol, .aboutSkillsCol2, .aboutSkillsCol3, .aboutAttributeCols, .aboutAttributeCols2 {
        display: none;
    }
}



@media screen and (max-width: 414px){
   .headerNav1 {
        padding: 5.5% 2% 0 0;
    }
    
    .workBtnRow3 {
        padding-left: 0;   
    }
    
        .workBtns3 {
            width: 45%;
            margin-left: 3.25%;
        }
}



@media screen and (max-width: 320px){
    .headerName2 {
        display: block;
        float: left;
        padding: 4.25% 0 0 1.5%;           
    }
    
    .headerNav1 {
        padding: 8% 4% 0 0;
    }
    
    .headerName, .heading {
        display: none;
    }
    
     
}