@charset "UTF-8";

/* BODY resets ---------------------------------------------------------- */

/* white text and blue background everywhere */
body{
    color: rgba(255, 255, 255, 0.99);
    background-color: rgba(0, 120, 175, 1.0);
    z-index: 1;
    }

body p, body span, .btn{
    font-family: "proxima-nova", "Proxima Nova", "sans-serif";
    font-style: normal;
    /* more legible */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    opacity: 0.99;
    margin: 1px;
    letter-spacing: -1px;
    }

/* white links without decoration everywhere */
a{ text-decoration: none; color: rgba(255, 255, 255, 0.99); }
    a:hover{
        text-decoration: none;
        }
    a div{
        color: rgb(255, 255, 255);
        }
    /* on hover, underline link text in these special cases */
    .textLink{
        font-weight: 700;
        }
    .textLink:hover{
        text-decoration: underline;
        }

/* bold */
.boldFont{
    font-weight: 900;
    }

/* align stuff */
.center{
    text-align: center;
    }
.alignForScreen{
    text-align: center;
    }
.left{
    float: left;
    }
.clearRight{
    clear: right;
    }

/* when user clicks and drags, text turns light blue */
::-moz-selection {
    background-color: rgba(15, 15, 15, 0);
    color: rgba(0, 213, 252, 1.0);
    }
::selection {
    background-color: rgba(15, 15, 15, 0);
    color: rgba(0, 213, 252, 1.0);
    }

/* keep copy inside blocks */
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

/* keep blocks from overlapping */
.clearfix:before, .clearfix:after{ content: " "; display: table; }
.clearfix:after{ clear: both; }
.clearfix{ zoom: 1; }

/* scale stuff */
.scale{
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    }
    .scale:hover{
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
        }



/* HIDDEN BLOCKS -------------------------------------------------------- */

/* center a lightbox */
.centerLightbox{
    position: relative;
    display: block;
    clear: both;
    text-align: center;
    width: 100%;
    }

/* create and help center lightboxes */
.webLightbox, .mobileLightbox, .medicalLightbox, .zooLightbox, .themedLightbox{
    text-align: center;
    }
    /* sidebars in lightboxes */
    .sidebar{
        float: left;
        position: relative;
        display: inline-block;
        text-align: right;
        overflow: hidden;
        width: 20%;
        height: auto;
        margin: 0 5% 0 0;
        overflow: hidden;
        }
    /* lightbox images */
    .details .still{
        width: 100%;
        height: auto;
        /* tell image (in details) how to animate */
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        }
    /* center an image in details even if details isn't centered */
    .details .detailsCenter{
        position: relative;
        display: block;
        height: auto;
        margin: 60px auto 30px auto;
        width: 100%;
        text-align: center;
        }
        /* image caption in details */
        .detailsCenter .caption{
            position: relative;
            display: inline-block;
            padding-right: 20px;
            padding-bottom: 15px;
            padding-left: 20px;
            margin: 0 auto;
            font-style: italic;
            font-weight: 400;
            text-align: center;
            background-image: url(images/speechBubble.svg);
            background-size: 100% 100%;
            /* tell caption (in details) how to animate */
            -webkit-transition: all .3s ease-in-out;
            -moz-transition: all .3s ease-in-out;
            -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
            }
            .detailsCenter:hover .caption{
                -webkit-transform: scale(1.1);
                -moz-transform: scale(1.1);
                -ms-transform: scale(1.1);
                transform: scale(1.1);
                }

    .contentLightbox iframe{
        margin-top: 40px;
        margin-bottom: 40px;
        }

    /* main content in lightboxes */
    .details{
        float: left;
        position: relative;
        display: inline-block;
        text-align: left;
        width: 75%;
        margin: 0;
        }
        /* anchor caption animation to caption-top */
        .detailsCenter span{
            -webkit-transform-origin: top;
            -moz-transform-origin: top;
            -o-transform-origin: top;
            transform-origin: top;
            }



/* LAYOUT BLOCKS -------------------------------------------------------- */

/* background for each section */
.topBgBlock{
    width: 100%;
    margin: 0 auto;
    display: block;
    overflow: auto;
    background-size: cover;
    }
.bottomBgBlock{
    width: 100%;
    margin: 0 auto;
    display: block;
    overflow: auto;
    background-size: cover;
    }

/* hold content blocks in the flow of the main page */
.allBlock{
	margin: 0 auto;
    display: block;
	}

/* hold inner content blocks in the flow of the main page */
.innerBlock{
	margin: 0 auto;
    display: block;
    background: transparent;
    background-image: url(images/woodBlur.jpg);
    background-size: cover;
    border-right: none;
    border-left: none;
    border-bottom: none;
	}

/* about section background */
.aboutBG{
    width: 100%;
    display: block;
    margin: 0 auto;
    padding: 0 100px 50px 100px;
    background: transparent;
    background-image: url(images/woodBlur.jpg);
    background-size: cover;
    border-right: none;
    border-left: none;
    border-bottom: none;
    }



/* CONTENT BLOCKS ------------------------------------------------------- */

/* top margin for headlines on larger screens */
.bottom .ctaBlock{
    margin-top: 50px;
    margin-bottom: 0;
    }

/* hold project backgrounds */
.projects{
    background-color: rgba(0, 167, 230, 1.0);
    border-bottom: 1px solid rgba(15, 15, 15, 1.0);
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -ms-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    }
    .themedBG{
        background: url(images/themedBlur.jpg);
}
    .medicalBG{
        background: url(images/medicalBlur.jpg);
        }
    .webBG{
        background: url(images/spaceBlur.jpg);
        }
    .mobileBG{
        background: url(images/cookingBlur.jpg);
        }
    .zooBG{
        background: url(images/zooBlur.jpg);
        border-bottom: 10px solid rgba(15, 15, 15, 1.0);
        }
    .projectBG{
        background-size: cover;
        background-attachment: scroll;
        }
    /* content description for each project */
    .projectContent{
        float: left;
        }
#checkOutProjects{
    width: 100%;
    }

/* hold copy for inner sections */
.innerCopyBlock{
	float: left;
	}

/* hold modules */
.moduleBlock{
    float: left;
    }

/* hold bottom content like the contact form and its call to action */
.bottom{
	float: left;
	width: 100%;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
	background-color: transparent;
	border: none;
	}



/* PARAGRAPHS ----------------------------------------------------------- */

/* insert text into a nice purple button */
.btn{
    position: relative;
    display: block;
    clear: both;
    font-weight: 700;
    font-size: 26px;
    line-height: 25px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1.0);
    margin: 10px auto 30px auto;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 310px;
    height: 74px;
    background-color: rgba(45, 30, 98, 1.0);
    border: 5px solid rgba(30, 23, 57, 1.0);
    /* round corners to match site look and feel */
    border-radius: 8px;
    -webkit-border-radius: 8px;
	-moz-border-radius: 8px;
    text-align: center;
    /* animate changes on hover and click */
    -webkit-transition: box-shadow 200ms;
    -moz-transition: box-shadow 200ms;
    -o-transition: box-shadow 200ms;
    -ms-transition: box-shadow 200ms;
    transition: all 200ms;
    -webkit-transition: .2s ease-in-out;  
    -moz-transition: .2s ease-in-out;
    }
    /* on click, button shines blindingly */
    .btn:active{
        background-color: rgba(255, 255, 255, 1.0);
        color: rgba(45, 30, 98, 1.0);
        }
    /* make the whole button clickable, not just the text */
    .btn a{
        display: block;
        height: 100px;
        margin-top: -38px;
        padding-top: 38px;
        }
    /* close a lightbox by tapping a link instead of the X button */
    .closeLightbox{
        display: block;
        clear: both;
        margin-top: 20px;
        }

/* insert text into a nice blue button */
.btnBlue{
    position: relative;
    display: block;
    clear: both;
    font-weight: 700;
    font-size: 30px;
    line-height: 29px;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 360px;
    height: 74px;
    background: rgb(0, 167, 230);
    border: 2px solid rgba(255, 255, 255, 0.75);
    /* round corners to match site look and feel */
    border-radius: 8px;
    -webkit-border-radius: 8px;
	-moz-border-radius: 8px;
    text-align: center;
    /* animate changes on hover and click */
    -webkit-transition: box-shadow 200ms;
    -moz-transition: box-shadow 200ms;
    -o-transition: box-shadow 200ms;
    -ms-transition: box-shadow 200ms;
    transition: all 200ms;
    -webkit-transition: .2s ease-in-out;  
    -moz-transition: .2s ease-in-out;
    }
    /* on click, button shines a bit brighter */
    .btnBlue:active{
        background-color: rgba(34, 187, 255, 1.0);
        }
    /* make the whole button clickable, not just the text */
    .btnBlue a{
        display: block;
        height: 100px;
        margin-top: -38px;
        padding-top: 38px;
        }

/* style link to resume fixed atop screen */
.resumeBar{
    position: fixed;
    z-index: 2;
    top: 0;
    width: 100%;
    height: 40px;
    background: rgb(15, 15, 15);
    padding: 12px 0 0 0;
    margin: 0 auto;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    color: rgba(255, 255, 255, 0.99);
    text-align: center;
    /* animate changes on hover and click */
    -webkit-transition: box-shadow 200ms;
    -moz-transition: box-shadow 200ms;
    -o-transition: box-shadow 200ms;
    -ms-transition: box-shadow 200ms;
    transition: all 200ms;
    -webkit-transition: .2s ease-in-out;  
    -moz-transition: .2s ease-in-out;
    }
    /* on hover */
    .resumeBar:hover{
        color: rgba(0, 167, 230, 1.0);
        }
    /* on click */
    .resumeBar:active{
        color: rgba(0, 167, 230, 1.0);
        background-color: rgba(255, 255, 255, 1.0);
        }

/* style copy */
.content{
    font-weight: 300;
    }
    /* adjust copy style for inner blocks on lower part of home page */
    .innerCopyBlock .content{
        margin-bottom: 28px;
        }
    /* add a full break between lightbox paragraphs */
    .details .contentLightbox{
        margin-bottom: 24px;
        }
    /* italicize and shrink lightbox image captions */
    .hovers .contentLightbox{
        font-style: italic;
        font-size: 17px;
        line-height: 17px;
        }

/* style headlines atop project intros */
.headline{
    font-weight: 900;
    }
    /* adjust headline style for subHeadlines */
    .subHeadline{
        font-weight: 900;
        margin-bottom: 12px;
        }
        .details .subHeadlineFlatTop{
            margin-bottom: 24px;
            }

/* style text atop sections */
.sectionTitle{
    font-weight: 900;
    margin: 0;
	}
#checkOutProjects .sectionTitle{
    background-color: rgba(0, 167, 230, 1.0);
    }



/* IMAGES ---------------------------------------------------------- */

.industry{
    display: inline;
    vertical-align: middle;
    }

/* image */
.homeStill{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 28px 0;
    }
    .moduleBlock .homeStill{
        display: inline;
        margin: 0;
        width: auto;
        vertical-align: middle;
        opacity: 0.75;
        }
        .moduleBlock .homeStill:hover{
            opacity: 1.0;
            }