/************************************************
	
	Test Drive
	
	Table of Contents -
        1. Reset CSS
        2. Clearfix
        3. @font-face
        4. Global Style Rules
        5. Layout
            5.1 Header
            5.2 Body
            5.3 Footer
        6. IE Compatibility
        7. Plugins
        8. Mobile
    
	Authors -
        oll@olivergassman.net
    
	
************************************************/

/* 1. Reset CSS */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}


/* 2. Clearfix */
.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}


/* 3. @font-face */


/* 4. Global Style Rules */
body{font-family:"Century Gothic",CenturyGothic,AppleGothic,sans-serif;font-size:0.875em;line-height:1.2em;color:#575756;background:#00B7E7 url(../assets/bgMain.png) center -400px repeat-y;}
.js-loading body{background:#00B7E7 url(../assets/ajax-loader.gif) center 300px no-repeat;}
@media screen and (max-width:600px){
    .js-loading body{background:#00B7E7 url(../assets/ajax-loader.gif) center 150px no-repeat;}
}
h1{font-weight:bold;color:#00B7E7;font-size:2em;line-height:1.2em;margin:0 0 0.5em;}
h2{font-weight:bold;color:#00B7E7;font-size:1.571428571em;;line-height:1.2em;margin:0 0 0.5em;}
h3{font-weight:bold;color:#00B7E7;font-size:1.3571em;line-height:1.2em;margin:0 0 0.5em;}
p, li{margin:0 0 0.5em;}
a{font-weight:bold;color:#00B7E7;text-decoration:none;outline:0;}
a:hover{text-decoration:underline;}
img{max-width:100%;}
img.inline{margin:0.5em 0 1em;}
strong{font-weight:bold;}
em{font-style:italic;}

/* 5. Layout */
.content{max-width:980px;margin:0 auto;}
    /* 5.1 Header */
    .mainHeader{width:100%;background:transparent url(../assets/headerBackground.png) 0 0 repeat-x;position:fixed;top:0;z-index:99;}
    .logo{margin:0 0 0 20px;}
    .logo a{float:left;width:100%;height:105px;text-indent:-999em;background:transparent url(../assets/mainLogo.png) 0 center no-repeat;background-size:100%;max-width:175px;}
    .mainNav,
    .mobileNav{float:right;font-size:1.1428571em;text-transform:uppercase;margin:20px 20px 0 0;border-right:2px solid #EAEAEA;line-height:38px;height:38px;padding:0;}
    .js-loading .mainNav,
    .js-loading  .mobileNav{position:absolute;left:-9999em;}
    .mobileNav{border:0;.height:42px;margin:18px 20px 0 0;}
    .mainNav a,
    .mobileNav a{float:left;border-left:2px solid #EAEAEA;text-align:center;padding:0 15px;}
    .mobileNav a{border:2px solid #EAEAEA;border-radius:5px;}
    .mainNav .current{background:#EAEAEA;}
    .mobileNav{display:none;}
    @media screen and (max-width:960px){
        .mainNav{display:none;}
        .mobileNav{display:block;}
        #cboxLoadedContent .mainNav{display:block;border:0;border-top:2px solid #EAEAEA;margin:20px 0;}
        #cboxLoadedContent .mainNav a{display:block;float:none;width:100%;border:0;border-bottom:2px solid #EAEAEA;padding:0;}
    }
    @media screen and (max-width:750px){
        .mainHeader{position:static;}
    }
    /* 5.2 Body */
    .mainContent{padding:130px 0 129px;position:relative;z-index:98;}
    .js-loading .mainContent{position:absolute;left:-9999em;}
    @media screen and (max-width:600px){
        .mainContent{padding:25px 0;}
    }
    .mainContent h1{padding:0 0 0.25em;border-bottom:3px solid #EAEAEA;text-transform:uppercase;}
    .mainContent h2,
    .mainContent h3{text-transform:uppercase;}
    .bubble{padding:20px;background:#FFF;border-radius:20px;margin:0 0 50px;position:relative;}
    .stem{position:absolute;bottom:-30px;width:49px;height:50px;}
    .bubbleLeft .stem{left:0;background:transparent url(../assets/bubbleStemLeft.png) 0 0 no-repeat;}
    .bubbleRight .stem{right:0;background:transparent url(../assets/bubbleStemRight.png) 0 0 no-repeat;}
    .introBubble .slideshowWrapper{position:relative;overflow:hidden;}
    .introBubble .slideshowWrapper img{position:absolute;margin:0;width:100%;text-align:center;display:block;z-index:1;text-align:center;}
    .introBubble .slideshowWrapper .current{z-index:2;}
    .clientLogos{border-bottom:3px solid #EAEAEA;width:100%;margin:-15px 0 15px;overflow:hidden;position:relative;}
    .clientLogos ul{display:block;padding:0;margin:0;width:9999em;position:relative;}
    .clientLogos li{float:left;text-align:center;vertical-align:middle;margin:0;position:relative;height:75px;width:100px;padding:5px;}
    .clientLogos img{display:inline-block;}
    .clientLogos img:empty{position:absolute;left:50%;top:50%;-webkit-transform:translate3d(-50%,-50%,0);-moz-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);}
    .gallery{margin:0 -17px;}
    .gallery a{float:left;padding-top:5px;padding-bottom:5px;text-align:center;}
    .gallery img{border:3px solid #eaeaea;max-width:162px;width:100%;}
    #whyTestDrive img,
    #soMuchWork img{border:3px solid #eaeaea;}
    #soMuchWork h3 a{text-decoration:none;}
    #soMuchWork h3 a:hover{text-decoration:underline;}
    #soMuchWork .slideshowNav img{max-width:98px;}
    #soMuchWork .slideshow img{max-width:100%;border:0;}
    .portfolioPreview strong{font-weight:normal;}
    .portfolioWrapper{width:100%;overflow:hidden;position:relative;}
    .portfolioNav{font-size:1.571em;text-transform:uppercase;font-weight:bold;position:absolute;right:0;top:0;z-index:99;}
    .portfolioNav .navTitle{float:left;}
    .portfolioNav a{float:left;width:15px;height:15px;text-indent:-9999em;border:2px solid #575756;z-index:99;margin:0 0 0 5px;border-radius:15px;}
    .portfolioNav a.current,
    .portfolioNav a:hover{background:#575756;}
    .portfolio{position:relative;margin:0 -20px;}
    .portfolio h1{margin:0 10px 0.5em;}
    .portfolio > .item{background:#FFF;z-index:1;position:absolute;opacity:0;}
    .portfolio > .current{z-index:2;opacity:1;}
    @media screen and (max-width:750px){
        .portfolioWrapper{padding:30px 0 0;}
        .portfolioNav{text-align:center;width:100%;}
        .portfolioNav .navTitle{float:none;display:block;margin:0 0 10px;}
        .portfolioNav a{float:none;display:inline-block;margin:0 2px;}
    }
    .portfolio .item strong{font-size:1.1428571em;}
    .slideshow{position:relative;overflow:hidden;}
    .slideshowNav{position:relative;height:76px;clear:left;}
    .slideshowNav a{float:left;margin-left:4px;}
    .slideshowNav a:first-child{margin-left:2px;}
    .slideshow .images{border:3px solid #eaeaea;height:270px;left:0;position:relative;overflow:hidden;background-color:#9A9A99;}
    .slideshow .images li{position:absolute;margin:0;width:100%;text-align:center;display:block;z-index:1;background-color:#9A9A99;text-align:center;}
    .slideshow .images li:empty{left:50%;top:50%;transform:translate3d(-50%,-50%,0);-webkit-transform:translate3d(-50%,-50%,0);}
    .slideshow .images .current{z-index:2;}
    .slideshow .images img{display:inline;}
    .slideshow .dots{text-align:center;}
    .slideshow .dots li{display:inline-block;margin:5px 2px;}
    .slideshow .dots .dot{float:left;text-indent:-9999em;border-radius:10px;width:9px;height:9px;border:2px solid #00B7E7;}
    .slideshow .dots .current,
    .slideshow .dots .dot:hover{background:#00B7E7;}
    .slideshow .dots .next,
    .slideshow .dots .prev{float:left;text-indent:-9999em;background:transparent url(../assets/dotsNext.png) 0 center no-repeat;width:9px;height:13px;}
    .slideshow .dots .prev{background-image:url(../assets/dotsPrev.png);}
    .googleMap{width:100%;height:425px;}
    #thinkWeCanHelp .grid-container{margin:0 -20px;}
    #thinkWeCanHelp h3{text-transform:none;font-weight:normal;padding:20px 0 0;margin:20px 0 0.5em;border-top:3px solid #EAEAEA;}
    #thinkWeCanHelp .quote{font-size:1.428571em;line-height:1.2em;padding:36px 0 0;background:transparent url(../assets/quoteStart.png) 0 0 no-repeat;}
    #thinkWeCanHelp .quote span{display:block;padding:0 0 36px;background:transparent url(../assets/quoteEnd.png) right bottom no-repeat;}
    .contactDetails .email{padding-left:35px;line-height:30px;height:30px;background:transparent url(../assets/iconMail.png) 0 0 no-repeat;}
    .contactDetails .phone{padding-left:35px;line-height:30px;height:30px;background:transparent url(../assets/iconPhone.png) 0 0 no-repeat;}
    .contactDetails .mobile{padding-left:35px;line-height:30px;height:30px;background:transparent url(../assets/iconMobile.png) 0 0 no-repeat;}
    .footnote{text-align:center;padding-top:20px;}
        /* 5.2.1 Application Form */
        .appForm{display:none;}
        .appForm form{margin:0 -10px;}
        .form-item,
        .form-item label,
        .form-item input,
        .form-item textarea,
        .form-item select{float:left;}
        .grid-50 label{width:33%;margin-right:2%;}
        .grid-50 input[type=text],
        .grid-50 input[type=email],
        .grid-50 input[type=number],
        .grid-50 textarea{width:62%;}
        .grid-100 label{width:15%;margin-right:2%;}
        .grid-100 input[type=text],
        .grid-100 input[type=email],
        .grid-100 input[type=number],
        .grid-100 textarea,
        .grid-100 .radio-group{width:81.5%;}
        @media screen and (max-width:750px){
            .grid-100 label{width:33%;margin-right:2%;}
            .grid-100 input[type=text],
            .grid-100 input[type=email],
            .grid-100 input[type=number],
            .grid-100 textarea,
            .grid-100 .radio-group{width:62%;}
        }
        .form-item input[type=text],
        .form-item input[type=email],
        .form-item input[type=number],
        .form-item textarea{border:0;padding:3px;background:#EAEAEA;border-radius:5px;}
        .form-item{margin-bottom:10px;}
        .form-item .form-item{margin-bottom:3px;}
        .radio-row{width:100%;}
        .form-item .form-item .radio-row label{width:35px;}
        .form-item .form-item .radio-row .radio{width:57px;}
        .form-item .radio{width:75px;}
        .form-item .frm_checkbox{float:left;width:100px;margin:-bottom:3px;}
        .form-item .frm_checkbox input{margin:3px 3px 3px 0;}
        .form-item .frm_radio{float:left;width:75px;margin:-bottom:3px;}
        .frm_opt_container{float:left;}
        .form-item .frm_checkbox:nth-child(odd){clear:left;}
        .form-item .form-item label,
        .form-item .frm_checkbox label,
        .form-item .frm_radio label{width:auto;font-weight:bold;}
        .form-submit{padding:15px 0 0 18%;border-top:3px solid #eaeaea;}
        @media screen and (max-width:750px){
            .form-submit{padding:15px 0 0 35%;}
        }
        .form-submit input[type=submit]{background-color:#575756;padding:5px 10px;border-radius:5px;color:#FFF;border:0;font-weight:bold;}
        .form-submit input[type=submit]:hover{text-decoration:none;background-color:#00B7E7;}
    /* 5.3 Footer */
    .mainFooter{width:100%;background:#FFF;border-top:2px solid #BCBEC0;position:fixed;bottom:0;z-index:99;min-height:75px;}
    .js-loading  .mainFooter{position:absolute;left:-9999em;}
    @media screen and (max-width:750px){
        .mainFooter{position:static;}
    }
    .mainFooter .socialLinks a{float:right;line-height:38px;height:38px;margin:17px 12px 17px 0;padding:0 0 0 35px;background:transparent url(../assets/fb.png) 0 0 no-repeat;border-left:3px solid #eaeaea;text-transform:uppercase;}
    .mainFooter .socialLinks .tw{display:none;border-left:0;background:transparent url(../assets/iconTwitter.png) 0 0 no-repeat;margin:17px 12px 17px 0;}
    .mainFooter .socialLinks .ig{border-left:0;background:transparent url(../assets/ig.png) 0 0 no-repeat;margin:17px 12px 17px 0;}
    .mainFooter .socialLinks .sc{border-left:0;background:transparent url(../assets/snap.png) 0 0 no-repeat;margin:17px 12px 17px 0;}
    .mainFooter .tweet{position:relative;float:left;width:660px;margin:17px 0;height:38px;overflow:hidden;}
    .mainFooter .tweet li{height:38px;line-height:19px;}
    .tweet_list {list-style: none;margin: 0;padding: 0;overflow-y: hidden;position:relative;}
    .tweet_list li {overflow-y: auto;overflow-x: hidden;padding:0;list-style-type: none;margin:0}
    .tweet_list .tweet_avatar {padding-right: .5em;float: left;height: 38px}
    .tweet_list .tweet_avatar img {vertical-align: middle}
    /***************************/
    /* Hidden for release. TODO: unhide. */
    .tweetsWrapper,
    .socialLinks .tw{display:none;}
    /***************************/
    .tweetsWrapper .dots{float:right;margin:8px 16px;}
    .tweetsWrapper .dots a{display:block;width:12px;height:12px;border:2px solid #00B7E7;text-indent:-9999em;border-radius:10px;margin:2px;}
    .tweetsWrapper .dots a:hover,
    .tweetsWrapper .dots .current{background:#00B7E7;}
    @media screen and (max-width:960px){
        .tweetsWrapper{display:none;}
        .mainFooter .socialLinks{display:block;text-align:center;}
        .mainFooter .socialLinks .tw,
        .mainFooter .socialLinks a{display:inline-block;float:none;}
    }
    @media screen and (max-width:480px){
        .mainFooter .socialLinks .tw{margin:17px 0;border:0;}
        .mainFooter .socialLinks .fb{margin:17px 0;border:0;background-position:0 4px;}
    }


/* 6. IE Compatibility */
.ie7 .slideshow .dots li{float:left;}


/* 7. Plugins */
    /* 7.1 Colorbox */
    /*
        Colorbox Core Style:
        The following CSS is consistent between example themes and should not be altered.
    */
    #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
    #cboxOverlay{position:fixed; width:100%; height:100%;}
    #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
    #cboxContent{position:relative;}
    #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
    #cboxTitle{margin:0;}
    #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
    .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
    .cboxIframe{width:100%; height:100%; display:block; border:0;}
    #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

    /* 
        User Style:
        Change the following styles to modify the appearance of Colorbox.  They are
        ordered & tabbed in a way that represents the nesting of the generated HTML.
    */
    #cboxOverlay{background:url(../assets/colorbox/overlay.png) repeat 0 0;}
    #colorbox{outline:0;}
        #cboxTopLeft{width:21px; height:21px; background:url(../assets/colorbox/controls.png) no-repeat -101px 0;}
        #cboxTopRight{width:21px; height:21px; background:url(../assets/colorbox/controls.png) no-repeat -130px 0;}
        #cboxBottomLeft{width:21px; height:21px; background:url(../assets/colorbox/controls.png) no-repeat -101px -29px;}
        #cboxBottomRight{width:21px; height:21px; background:url(../assets/colorbox/controls.png) no-repeat -130px -29px;}
        #cboxMiddleLeft{width:21px; background:url(../assets/colorbox/controls.png) left top repeat-y;}
        #cboxMiddleRight{width:21px; background:url(../assets/colorbox/controls.png) right top repeat-y;}
        #cboxTopCenter{height:21px; background:url(../assets/colorbox/border.png) 0 0 repeat-x;}
        #cboxBottomCenter{height:21px; background:url(../assets/colorbox/border.png) 0 -29px repeat-x;}
        #cboxContent{background:#fff; overflow:hidden;}
            .cboxIframe{background:#fff;}
            #cboxError{padding:50px; border:1px solid #ccc;}
            #cboxLoadedContent{margin-bottom:28px;}
            #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
            #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
            #cboxLoadingOverlay{background:url(../assets/colorbox/loading_background.png) no-repeat center center;}
            #cboxLoadingGraphic{background:url(../assets/colorbox/loading.gif) no-repeat center center;}

            /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
            #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
            
            /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
            #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

            #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
            #cboxPrevious{position:absolute; bottom:0; left:0; background:url(../assets/colorbox/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
            #cboxPrevious:hover{background-position:-75px -25px;}
            #cboxNext{position:absolute; bottom:0; left:27px; background:url(../assets/colorbox/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
            #cboxNext:hover{background-position:-50px -25px;}
            #cboxClose{position:absolute; bottom:0; right:0; background:url(../assets/colorbox/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
            #cboxClose:hover{background-position:-25px -25px;}

    /*
      The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
      when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
      See: http://jacklmoore.com/notes/ie-transparency-problems/
    */
    .cboxIE #cboxTopLeft,
    .cboxIE #cboxTopCenter,
    .cboxIE #cboxTopRight,
    .cboxIE #cboxBottomLeft,
    .cboxIE #cboxBottomCenter,
    .cboxIE #cboxBottomRight,
    .cboxIE #cboxMiddleLeft,
    .cboxIE #cboxMiddleRight {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
    }
    
/* 8. Mobile */