/*
Website Name: WNDC
Author: Kinetic Creative
Author URI: http://www.kineticwecreate.co.uk
Version: 1.0
*/

/* CSS Reset based on http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */

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, 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;}
a img{border:none;}
a{color: inherit; text-decoration:none;}
body {line-height: 1.2;}
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;}
.clearboth{clear:both;}
img embed, object, video{max-width: 100%; /* Responsive: Stop Images exceeding container dimensions */}
textarea, input { outline: none;} /* Safari Focus Outlines */
:focus { outline-color: transparent; outline-style: none;}
input[type="submit"] {-webkit-appearance:none;} /* Ipad Button Style Override */
textarea {resize: vertical;}
input, textarea{border-radius: 0;}
em{font-style:italic;}	
@-webkit-viewport {width: device-width;} @-moz-viewport {width: device-width;} @-ms-viewport {width: device-width;} @-o-viewport {width: device-width;} @viewport {width: device-width;}
.displaynone{display:none;}
.no_fallback{display:none !important;}
p{margin: 0 0 20px 0;}
.clearfix:before,
.clearfix:after {content: "."; display: block; height: 0; overflow: hidden;}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

/* CSS Document */
html{color: #666666; font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 18px; font-weight: 300; background: url("assets/background.gif") no-repeat top left #f2f2f2; background-size: cover; background-position: fixed;}

    .site_container{width: 1026px; margin: 0 auto;}
        .header{}
            .nav{margin: 20px 0;}
            .mobile_nav{color: #666; display: none; float: right; width: 35px; height: 15px; font-size: 12px; line-height: 14px; font-weight: 400; padding: 49px 15px 13px 35px; background: url("assets/menu-icon.gif") no-repeat 37px 19px transparent;}
            ul.navigation{color: #c6AEC9;}
                ul.navigation li{float: left; margin: 0 4px 0 0; position: relative;}

                    .projects_sub_menu{display:none; width: 500px; clear: left; margin: 0 0 0 140px; padding: 10px 0 0 0;}
                        .projects_sub_menu ul li{width: 40%; padding: 6px 5%; float: left; color: #c6AEC9; text-decoration: underline;}
                        .projects_sub_menu ul li a:hover{color: #61116A;}

                    .about_sub_menu{display:none; width: 400px; clear: left; margin: 0 0 0 70px; padding: 10px 0 0 0;}
                        .about_sub_menu ul li{width: 90%; padding: 6px 5%; float: left; color: #c6AEC9; text-decoration: underline;}
                        .about_sub_menu ul li a:hover{color: #61116A;}
                    
                ul.navigation li a{text-decoration: underline; padding: 10px 17px; display: inline-block;}
                a.current-menu-item{color: #61116a; cursor: default; font-weight: 500;}
                .mobile_logo_link{border:none; width: 57px; height: auto; display: none; padding: 12px 15px;}
                    .mobile_logo{width: 100%; height: auto;}

        .section{}
            .sidebar{width: 220px; float: left;}
                .logo_link{border:none; width: 145px; height: auto; text-align: center; display: block; margin: 25px auto 40px auto;}
                .sidebar_logo{width: 100%; height: auto;}
                ul.breadcrumb{border-top: 1px solid #b6b6b6; padding: 15px 0 0 15px; margin: 0 0 5px 0;}
                    ul.breadcrumb li{font-size: 11px; display: inline;}
                    ul.breadcrumb li a{text-decoration: underline; color: #61116A;}
                        ul.breadcrumb li a:hover{color: #CFDD36;}
                    ul.breadcrumb li:after{content: "/"; margin: 0 0 0 5px;}
                    ul.breadcrumb li:last-of-type:after{content: "";}
                h1.detailpage_title{font-size: 28px; line-height: 28px; clear: both; font-weight: 400; padding: 0 0 0 15px; color: #61116A;}
                p.side_blurb{font-size: 12px; line-height: 16px; margin: 20px 0 35px 20px;}
                .section_links{margin: 0 0 30px 0;}
                    ul.subnav{padding: 5px 0 0 10px; font-size: 12px; line-height: 18px; clear:both;}
                        ul.subnav li{margin: 8px 0;}
                        ul.subnav li a{text-decoration: underline; padding: 4px 0 4px 28px; background: url("assets/sectionlink-icon.png") no-repeat 0 0;}
                            ul.subnav li a:hover{background-position: 0 -48px; color: #363638; text-decoration: none;}
                        ul.subnav li a.current-menu-item{color: #61116A; background-position: 0 -25px; text-decoration: underline;}
                
                span.submenu_filter, span.close_submenu{display: none; font-size: 12px; line-height: 14px; padding: 10px 2%; width: 91%; margin: 0 2% 10px 10px; cursor: pointer; background-color: #FFF; border: 1px dotted #B6B6B6;}
                    .submenu_filter:after{content: "+"; margin: 0 0 0 5px;}
                span.close_submenu{text-align: right; padding: 10px 20px 10px 0; background: none; border: none;}
                    .close_submenu:after{content: "-"; margin: 0 0 0 5px;}

            .detail_area{width: 776px; float:right;}
                .detail_image{width: 760px; height: 450px;}
                .detail_area iframe{width: 761px; height: 428px;}
                .detail_content{margin: 30px 0 40px 20px; width: 729px;}
                    h2.detailarea_title{color: #C5D904; font-size: 18px; line-height: 20px; font-weight: 400; font-style: italic; margin: 0 0 20px 0;}
                    .detail_content h2, .detail_content p{width: 600px;}
                    p.detail_quote{padding: 0 0 5px 20px; margin: 0 0 25px 25px; border-left: 6px solid #61116A; color: #61116A; text-align: left; width: 270px; font-weight: 400; float: right; font-size: 22px; line-height: 26px;}

            .homedetail_area{width: 1020px;}
                .related_content{margin: 0 0 40px 0;}                    
                    span.related_title{text-decoration: underline; font-size: 11px; line-height: 14px; display: block; margin: 0 0 20px 0;}

                    .col_1, .col_2, .col_3, .homecol_1, .homecol_3, .homecol_4, .homecol_5{width: 240px; float: left; margin: 0 14px 10px 0; vertical-align: top; /*transition: all 0.4s ease;*/}
                    .homecol_2{width: 496px; float: left; margin: 0 14px 10px 0; vertical-align: top;}
                    .homecol_5{float:right;}

                    .box, .home_slideshow{position: relative; padding: 0 0 35px 0; font-size: 24px; line-height: 28px; font-weight: 400; color: #FFF; margin: 0 0 15px 0;}
                        .extended_box{padding: 0 0 55px;}
                        a.box_image{position: relative; display: block}
                            a.box_image img{display:block; width: 100%; height: auto;}
                            a.box_image span.overlay{display:none; background: url("assets/boxoverlay-grad.png") repeat top left transparent; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
                        a.box_link{padding: 8px 15px 8px 20px; width: 205px; text-align: left; display: block; text-decoration: underline; font-size: 12px; line-height: 20px; font-weight: 300; position: absolute; bottom: 0; left: 0;}
                        a.box_link .link_icon, .home_slide .link_icon{width: 19px; height: 19px; background-image: url("assets/boxlink-icon.png"); background-repeat:no-repeat; float: right;}
                        .home_slide .link_icon{position: absolute; top: 35%; right: 0;}

                        .home{padding: 20px 0 35px 0; background: url("assets/box_grad.png") repeat-x bottom left #CFDD36;}
                            .home_logo_link{display:block; margin: 10px auto 15px auto; width: 145px;}
                                .home_logo{width: 100%; height: auto;}
                            .home .box_title{width: 160px; margin: 0 0 40px 10px;}  
                            .home a.box_link{color: #FFF; border-top: 1px solid #CFDD36;}  
                            .home .link_icon{background-position: 0 -26px;}
                                .home:hover{color: #61116A;}

                        .about{padding: 20px 0 35px 0; background: url("assets/box_grad.png") repeat-x bottom left #CFDD36;}    
                            .about .box_title{width: 160px; margin: 0 0 90px 10px; padding: 20px 0 0 0;}  
                            .about a.box_link{color: #FFF; border-top: 1px solid #CFDD36;}  
                            .about .link_icon{background-position: 0 -26px;}
                                .about:hover{color: #61116A;}

                                span.org_title{display: block; text-align: center; width: 80%; font-size: 11px; line-height: 14px; margin: 0 auto 75px auto; text-transform: uppercase;}
                                .home_aboutbox:hover span.org_title{color: #FFF;}

                        .project{text-align: center; background: url("assets/box_grad.png") repeat-x bottom left transparent;}
                            .project a{display:block;}
                            .project a.box_link{color: #FFF;}
                            .project .link_icon{background-position: 0 -50px;}
                            .project_location{display:block; font-size: 11px; line-height: 14px; font-weight: 300; margin: 18px 0 0 0; display:block;}
                                .project:hover span.overlay{display: block;}
                            
                            .project.purple{background-color: #BD27C4;}
                                .purple a.box_link{border-top: 1px solid #BD27C4;}
                                .purple .box_title{margin: 0 0 30px 0;}
                                .purple .project_location{margin: 22px 0 0 0; color: #e5b1eb;}
                                .purple .link_icon{background-position: 0 -50px;}

                            .project.green{background-color: #CFDD36;}
                                .green a.box_link{border-top: 1px solid #CFDD36;}
                                .green .box_title{margin: 20px 0 0 0;}
                                .green .project_location{margin: 0 0 18px 0; color: #eff4bb;}
                                .green .link_icon{background-position: 0 -72px;}

                            .top_location .project_location{margin: 18px 0 0;}
                            .top_location .box_title{margin: 0 0 20px 0;}

                        .page{background-color: #FFF; text-align: center; color: #666;}
                            .page .box_title{padding: 0;}
                            .no_location .box_title{padding: 20px 0 15px 0;}
                            .page a.box_link{color: #b3b3b3; border-top: 1px solid #d9d9d9;}
                            .page .link_icon{background-position: 0 0;}
                                .page:hover span.overlay{display: block;}
                            .page .project_location{display:block; font-size: 11px; line-height: 14px; font-weight: 300; margin: 18px 0 0 0; display:block;}
                            .related_content .page{margin: 0 0 10px 0;}

                        .video{background-color: #666; text-align: center; color: #FFF; padding: 0;}
                            .video a.box_link{color: #FFF; border-top: 1px solid #FFF;}
                            .video .link_icon{background-position: 0 -50px;}
                                .video:hover span.overlay{display: block;}

                        .homepage_slide_cont{width: 100% !important; height: auto !important; position: relative; }
                        .caroufredsel_wrapper{width: 100% !important; max-width: 490px;}
                        .home_slideshow{margin: 0; padding: 0; width: 100% !important; height: auto !important;overflow: hidden;}
                            .home_slide{padding: 0 0 20px 0; background: url("assets/box_grad.png") repeat-x bottom left #BD27C4; width: 100%; height: auto; float: left;}
                                .home_slide .project_location{margin: 22px 0 0 20px; color: #e5b1eb;}
                                .home_slide .box_title{padding: 0; margin: 0 0 10px 20px;}
                                .home_slide a.slideshow_link{padding: 8px 15px 8px 20px; width: 350px; height: 40px; text-align: left; display: block; text-decoration: underline; font-size: 12px; line-height: 20px; font-weight: 300; position: relative; color: #d2a4d5;}
                                .home_slide .link_icon{background-position: 0 -50px;}

                            .slideshow_btn_next, .slideshow_btn_prev{display:block; cursor: pointer; z-index: 4000; width: 36px; height: 36px; position: absolute; top: 35%; background: url("assets/button_slideshow.png") no-repeat 0 0;}
                            .slideshow_btn_next{right: 2%; background-position: -36px 0;}
                                .slideshow_btn_next:hover{background-position: -36px -41px;}
                                .slideshow_btn_next.disabled{display:none;}
                            .slideshow_btn_prev{left: 2%; background-position: 0 0;}
                                .slideshow_btn_prev:hover{background-position: 0 -41px;}
                                .slideshow_btn_prev.disabled{display:none;}

                        .purple_text .box_title{color: #85218a;}
                            .purple_text .project_location{color: #85218a;}
                            .purple_text > a.box_link{color: #85218a;}
                            .purple_text .link_icon{background-position: 0 -50px;}

                        ul.lessons_learned{padding: 0; margin: 0; list-style: none;}
                            ul.lessons_learned li{margin: 0 0 10px 0; clear:left; display:block;}
                            ul.lessons_learned li strong{font-weight: 700; margin: 0; padding: 6px 0 6px 30px; display: block; background: url("assets/sectionlink-icon.png") no-repeat 2px -21px;}
                            ul.lessons_learned li p{display: inline-block; float: left; width: 80%;}
                            ul.lessons_learned li span.icon{display:inline-block; width: 30px; height: 22px; background: url("assets/sectionlink-icon.png") no-repeat 2px -25px; margin: 0 5px 0 0; float: left;}
                            .detail_content ul.lessons_learned li  p.list_point{margin: 0 0 0 4%;}
            

                    .timeline_col .left{float: left; clear: left;}
                    .timeline_col .right{float:right; clear: right;}
                        .timeline_col{background: url("assets/timeline-line.gif") repeat-y top center transparent;}
                    .year_title{display:block; width: 10%; margin: 0 auto; clear:both; text-align: center; font-size: 16px; line-height: 20px; font-weight: 400; padding: 8px 0; background-color: #f2f2f2; padding: 15px 0;}  
                    .timeline_marker{width: 21px; height: 21px; display: block; background: url("assets/timeline-icon.png") no-repeat top left;}
                    .timeline_area {width: 630px; margin: 0 0 0 2%; float: left;}  
                    .timeline_col .box{width: 240px;}

                        /* Timeline Markers*/
                        .marker_zero{margin: 30px auto 0;}
                        .marker_one{margin: 30px auto 0;}
                        .marker_two{margin: 30px auto 0;}
                        .marker_three{margin: 30px auto 0;}
                        .marker_six{margin: 30px auto 0;}
                        .marker_four{margin: 80px auto 0;}
                        .marker_five{margin: 90px auto 0 auto;}
                        .marker_seven{margin: 35px auto 0;}
                        .marker_eight{margin: 180px auto 0;}
                        .marker_nine{margin: 40px auto 0 auto;}
                        .marker_ten{margin: 160px auto 0 auto;}
                        .marker_eleven{margin: 150px auto 0 auto;}
                        .marker_twelve{margin: 30px auto 0 auto;}
                        .marker_thirteen{margin: 30px auto 0 auto;}
                        .marker_fourteen{margin: 240px auto 0 auto;}
                        .marker_fifteen{margin: 30px auto 0 auto;}
                        .marker_sixteen{margin: 100px auto 0 auto;}
                        .marker_seventeen{margin: 30px auto 0 auto;}
                        .marker_eighteen{margin: 130px auto 0 auto;}
                        .marker_nineteen{margin: 20px auto 0 auto;}
                        .marker_twenty{margin: 280px auto 0 auto;}
                        .marker_twentyone{margin: 30px auto 0 auto;}
                        .marker_twentytwo{margin: 130px auto 0 auto;}
                        .marker_twentythree{margin: 80px auto 0 auto;}
                        .marker_twentyfour{margin: 200px auto 0 auto;}
                        .marker_twentyfive{margin: 280px auto 0 auto;}
                        .marker_twentysix{margin: 90px auto 0 auto;}
                        .marker_twentyseven{margin: 40px auto 0 auto;}
                        .marker_twentyeight{margin: 60px auto 0 auto;}
                        .marker_twentynine{margin: 230px auto 0 auto;}
                        .marker_thirty{margin: 30px auto 0 auto;}
                        .marker_thirtyone{margin: 30px auto 0 auto;}
                        .marker_thirtytwo{margin: 120px auto 0 auto;}
                        .marker_thirtythree{margin: 60px auto 0 auto;}
                        .marker_thirtyfour{margin: 110px auto 0 auto;}
                        .marker_forty{margin: 400px auto 0 auto;}
                        .marker_fortyone{margin: 120px auto 0;}
                        .marker_fortytwo{margin: 180px auto 0 auto;}
                        .marker_fortythree{margin: 100px auto 0 auto;}
                        .marker_fortyfour{margin: 220px auto 0 auto;}
                        .marker_fortyfive{margin: 430px auto 0;}
                        .marker_fortysix{margin: 20px auto 0 auto;}
                        .marker_fortyseven{margin: 240px auto 0 auto;}
                        .marker_fortyeight{margin: 260px auto 0 auto;}
                        .marker_fortynine{margin: 150px auto 0 auto;}
                        .marker_fifty{margin: 80px auto 0 auto;}
                        .marker_fiftyone{margin: 340px auto 0 auto;}
                        .marker_fiftytwo{margin: 385px auto 0 auto;}
                        .marker_fiftythree{margin: 20px auto 0 auto;}
                        .marker_fiftyfour{margin: 70px auto 0 auto;}
                        .marker_fiftyfive{margin: 110px auto 0 auto;}
                        .marker_fiftysix{margin: 270px auto 0 auto;}
                        .marker_fiftyseven{margin: 100px auto 0 auto;}
                        .marker_fiftyeight{margin: 30px auto 0 auto;}
                        .marker_fiftynine{margin: 200px auto 0 auto;}
                        .marker_sixty{margin: 160px auto 0 auto;}

        
                        /*Timeline Object Margins */
                        .margin_2006_one{margin-top: 50px !important;}
                        .margin_2006_two{margin-top: 220px !important;}
                        .margin_2007_one{margin-top: 280px !important;}
                        .margin_2008_two{margin-top: 110px !important;}
                        .margin_2008_three{margin-top: 180px !important;}
                        .margin_2008_four{margin-top: 20px !important;}
                        .margin_2009_two{margin-top: 110px !important;}
                        .margin_2009_three{margin-top: 90px !important;}
                        .margin_2009_four{margin-top: 140px !important;}
                        .margin_2009_five{margin-top: 180px !important;}
                        .margin_2009_six{margin-top: 200px !important;}
                        .margin_2009_seven{margin-top: 60px !important;}
                        .margin_2010_two{margin-top: 60px !important;}
                        .margin_2010_three{margin-top: 80px !important;}
                        .margin_2011_two{margin-top: 120px !important;}
                        .margin_2011_three{margin-top: 440px !important;}
                        .margin_2012_two{margin-top: 160px !important;}
                        .margin_2012_three{margin-top: 120px !important;}
                        .margin_2012_four{margin-top: 120px !important;}
                        .margin_2012_five{margin-top: 60px !important;}
                        .margin_2012_six{margin-top: 150px !important;}
                        .margin_2012_seven{margin-top: 230px !important;}
                        .margin_2012_eight{margin-top: 250px !important;}
                        .margin_2012_nine{margin-top: 640px !important;}
                        .margin_2012_ten{margin-top: 40px !important;}
                        .margin_2012_eleven{margin-top: 200px !important;}
                        .margin_2012_twelve{margin-top: 260px !important;}
                        .margin_2013_one{margin-top: 120px !important;}
                        .margin_2013_two{margin-top: 60px !important;}
                        .margin_2013_three{margin-top: 220px !important;}
                        .margin_2013_four{margin-top: 160px !important;}
                        .margin_2013_five{margin-top: 30px !important;}
                        .margin_2013_six{margin-top: 30px !important;}
                        .margin_2013_seven{margin-top: 130px !important;}
                        .margin_2013_eight{margin-top: 500px !important;}
                        .margin_2013_nine{margin-top: 80px !important;}
                        .margin_2013_ten{margin-top: 140px !important;}
                        .margin_2014_one{margin-top: 30px !important;}
                        .margin_2014_two{margin-top: 80px !important;}
                        .margin_2014_three{margin-top: 300px !important;}
                                        

                        .timeline_item_title{margin: 10px 2% 10px 5%; width: 94%; font-size: 17px; line-height: 21px;}
                        .timeline_item_title .month{margin: 0 5px 0 0; display: inline; float: left; font-weight: 300;}
                        .timeline_item_title .year{margin: 0; display: inline; float: left;}
                        .timeline_col a.box_link{border: none; text-decoration: none; text-transform: none; font-size: 12px; line-height: 16px;}
                            a.highlight_purple:hover{color: #61116A; font-weight: 400;}
                            a.highlight_green:hover{color: #CFDD36; }
                            .timeline_col .page .link_icon{background-position: 0 -48px;}

        .footer{clear:both; margin: 30px 0 20px 0; font-size: 11px; line-height: 18px; color: #999; padding: 0 20px;}
            .copyright{font-weight:400;}
            .sitemap_link{font-weight: 400; text-decoration: underline; margin: 0 0 0 10px;}
            .sitemap_link:hover{color: #CFDD36;}
            .kinetic_link{float: right;}
                .kinetic_link a{color: #CFDD36; font-weight: 400; text-decoration: underline;}
                .kinetic_link a:hover{color: #61116A;}

        .mobile_show, .homemobile_show, .homemobilesmall_show{display:none;}
        .desktop_show, .homedesktop_show{display:block;}

        ul.sitemap{list-style:none; margin: 10px 0 10px;}
            ul.sitemap li{padding: 4px 0;}
                ul.sitemap li a{color: #666; text-decoration: underline;}
                ul.sitemap li a:hover{color: #61116A;}
                    ul.sitemap li ul{padding: 10px 0; margin: 10px 0 10px 20px;border-top: 1px dotted #CCC; border-bottom: 1px dotted #CCC;}
        
/* Responsive */
@media all and (min-width: 0){
    html{background: none #f2f2f2;}
    .site_container{width: 100%; max-width: 500px; min-width: 350px; margin: 0;} 
        .nav{margin: 0 0 10px 0;}
        .mobile_nav{display:block; margin: 5px 0 10px 0;}
        ul.navigation{display:none;}
            ul.navigation li{width: 96%; margin: 0 2%; background-color: #FFF; border-bottom: 1px dotted #dfdddd;}
            ul.navigation li a{width: 94%; padding: 15px 3%; text-decoration: none;}
            .mobile_logo_link{display:block; width: 20%; max-width: 57px; float: left;}
    .sidebar{width: 99%; margin: 0 1% 0 0;}
        .logo_link{display:none;}      
        .section_links{margin: 0; border: none;}
            span.submenu_filter, span.close_submenu{display: block; padding: 10px 2%; width: 93%; margin: 0 2% 10px 2%;}               
            .sub_nav_cont{display:none;}
                ul.subnav{padding: 0 0 0 10px;}
                    ul.subnav li{padding: 3px 0;}
                ul.breadcrumb{border-top: none;}
    .detail_area{width: 96%; margin: 0 2%; float: none;}       
        .detail_content{width: 100%; margin: 30px 0 40px 0;}
        .related_content, .product_list{width: 100%;}
        .detail_image{width: 100%; height: auto;}
        .detail_area iframe{width: 100%;}
        .detail_content h2, .detail_content p{width: 100%; max-width: 600px;}
        p.detail_quote{width: 90%; margin: 0 0 25px 5%;}
    .homedetail_area{width: 100%; max-width: 1000px;}
        .home_slideshow{min-height: auto;}
    .timeline_area {width: 96%; margin: 0 2%; float: left;}  
    .related_content, .product_list{width: 100%;}
        .col_1, .col_2, .col_3{width: 49%; margin: 0 2% 2% 0; float: left;}
            .col_2{margin: 0 0 2% 0; float:right;}
        .homecol_3, .homecol_4, .homecol_5{width: 47%; float: left;}
            .homecol_1, .homecol_2{width: 96%; margin: 0 1% 2% 2%; float: none; max-width: 500px; }
            .homecol_3, .homecol_4{max-width: 244px;}
            .homecol_3{margin: 0 2% 2% 2%;}
            .homecol_4{margin: 0 0 2% 0;}
            .homecol_5{margin: 0 0 2% 0; float:right;}
        .timeline_col{width: 100%; background: url("assets/timeline-line.gif") repeat-y top center transparent;}
            .timeline_col .box{width: 45%;}
                .timeline_col .box.left{margin: 0;}
                .timeline_col .box.right{margin: 0;}
                .year_title{background-color: #F2F2F2; width: 100%; margin: 10px 0; cursor: pointer; font-weight: 500;}
                    .year_title:after{content: "+"; margin: 0 0 0 5px;}
        .box{margin: 0 0 6% 0; }
        .timeline_area .box{padding: 0 0 55px 0;}
        .timeline_area .extended_box{padding: 0 0 85px 0;}
        .homedetail_area .box{margin: 0 0 4% 0;}
        .homedetail_area .home_aboutbox{margin: 0;}
        .about .box_title{width: 70%; margin: 0 0 90px 8%;}
        .home .box_title{width: 65%; margin: 0 0 20px 5%;}
        .home_slide .project_location{margin: 30px 0 0 5%;}
        .home_slide .box_title{margin: 0 0 10px 5%;}
            a.box_link{padding: 8px 4% 8px 5%; width: 91%;}
            .home_slide a.slideshow_link{padding: 8px 21% 8px 5%; width: 70%; height: auto; min-height: 40px; max-width: 350px;}
        .home_logo_link{width: 100%; height: auto; max-width: 80px; float: right; margin: 46px 4% 0 0;}
        .mobile_show, .homemobile_show{display:block;}
        .desktop_show, .homedesktop_show{display:none;}
        .homemobilesmall_hide{display:none;}
        .homemobilesmall_show{display:block;}    
    .footer{text-align: center;}
    .kinetic_link{width: 100%; text-align: center;}
    .box, .home_slideshow{font-size: 20px; line-height: 24px;}
    span.org_title{margin: 0 0 20px 5%; text-align: left;}
    ul.lessons_learned li p{width: 80%;}
}

@media all and (min-width: 440px){
    .box, .home_slideshow{font-size: 24px; line-height: 28px; }
            .home_logo_link{ max-width: 100px; margin: 40px 4% 0 0;}
            .timeline_area .box{padding: 0 0 35px 0;}
            .timeline_area .extended_box{padding: 0 0 55px 0;}
}

@media all and (min-width: 490px){
    .related_content, .product_list{max-width: 475px;}   
    .timeline_area .related_content{max-width: 650px; margin: 0 auto;}
    .col_1, .col_2, .col_3, .homecol_5{width: 32%; min-width: 230px; max-width: 240px;}
    .homecol_2{float: left;}

    .home_logo_link{ margin: 30px 4% 0 0;}

}

@media all and (min-width: 500px){
    .related_content, .product_list{max-width: 780px;}   
    .year_title{background-color: #F2F2F2; width: 10%; margin: 10px auto; cursor: default; font-weight: 400;}
        .year_title.first_year{margin: 0px auto 10px auto;}
        .year_title:after{content: "";}
}

@media all and (min-width: 520px){
    p.detail_quote{width: 96%; max-width: 270px; margin: 0 0 25px 4%;}
    .detail_content h2, .detail_content p{width: 80%;}
     .timeline_col .box{width: 32%;  max-width: 240px; min-width: 220px;}
}

@media all and (min-width: 550px){
    .timeline_col .box,  .timeline_col .timeline_marker{display:block !important;}
}

@media all and (min-width: 600px){  
    .footer{text-align: left;}
    .kinetic_link{width: auto; text-align: right;}
}

@media all and (min-width: 750px){
    .related_content .product_list{max-width: 780px;}   
        .col_2{margin: 0 2% 2% 0; float:left;}
        .col_3{margin: 0 0 2% 0;}
        .mobile_show{display:none;}
        .desktop_show{display:block;}   
}

@media all and (min-width: 754px){
    .homecol_1{width: 32%; min-width: 230px; max-width: 240px;float: left;margin: 0 1% 2% 1%;}
    .home_logo_link{height: auto; max-width: 145px; float: none; margin: 10px auto 15px auto;}
    .homemobilesmall_hide{display:block;}
    .homemobilesmall_show{display:none;}

    .homecol_2{width: 98%; margin: 0 1% 1% 0; float:left; max-width: 490px;}
        .home_slideshow{min-height: 600px;}
    .homecol_3{margin: 0 1% 1% 0; max-width: 240px;}
    .homecol_4{margin: 0 0 1% 0; max-width: 240px;}

    .site_container{max-width: 755px; } 

    html{background: url("assets/background.gif") no-repeat top left #f2f2f2; background-size: cover;}

    .homedetail_area .home_aboutbox{margin: 0 0 4% 0;}

     span.submenu_filter, .span.close_submenu{width: 93%; margin: 0 0 10px 2%;}   
             .timeline_col .box.left{margin: 0 0 2% 8%;}
        .timeline_col .box.right{margin: 0 8% 2% 0;}   

    .mobile_nav{display:none;}
    .nav{display:block; float: none; margin: 28px 0;}
    ul.navigation{display:block !important; }
          ul.navigation{display:block; }
            ul.navigation li{width: auto; background: none; border: none; margin: 0 15px; }
            ul.navigation li a{width: auto; padding: 10px 4px; text-decoration: underline;}
            .mobile_logo_link{display:none;}  
    .logo_link{display:block; width: 100px; float: right; margin: 0 2% 0 0;}
    .sidebar_title{display: inline-block; width: 60%;}

    span.org_title{margin: 0 auto 75px auto; text-align: center;}

    .projects_sub_menu{margin: 0 0 0 145px;}
    .about_sub_menu{margin: 0 0 0 74px;}
                    
}


@media all and (min-width: 815px){
    .sidebar{width: 28%; max-width: 200px;}
        .sidebar_title{width: 100%;}
        .logo_link{width: 65%; max-width: 125px; float: none; margin: 25px auto 40px auto;}
        .section_links{margin: 0 0 30px 0; border-top: 1px solid #B6B6B6;}
            span.submenu_filter, span.close_submenu{display: none;}
            .sub_nav_cont{display:block !important;}
                ul.subnav{padding: 20px 0 0 10px;}
                ul.breadcrumb{border-top: 1px solid #B6B6B6;}
    .detail_area{width: 70%; margin: 0 0 0 2%; float: left; }
    .timeline_area{width: 72%; margin: 0; float: right; }
        .timeline_col .box.left{margin: 0 0 2% 2%;}
        .timeline_col .box.right{margin: 0 2% 2% 0;}
}

@media all and (min-width: 820px){
    .related_content, .product_list{max-width: 475px;}   
        .col_2{margin: 0 0 2% 0; float:right;}
        .col_3{margin: 0 2% 2% 0;}
        .mobile_show{display:block;}
        .desktop_show{display:none;}
    .site_container{max-width: 1026px; margin: 0 auto;} 
    .timeline_area{max-width: 630px; float: left; margin: 0 0 0 2%;}
        .timeline_col .box.left{margin: 0 0 2% 6%;}
        .timeline_col .box.right{margin: 0 6% 2% 0;}
}

@media all and (min-width: 870px){

.detail_area, .timeline_area{ width: 73%; } 
}


@media all and (min-width: 1000px){
    .related_content, .product_list{width: 100%; max-width: 780px;}   
        .col_2{margin: 0 2% 2% 0; float:left;}
        .col_3{margin: 0 0 2% 0;}
        .mobile_show{display:none;}
        .desktop_show{display:block;}
        .homemobile_show{display:none;}
        .homedesktop_show{display:block;}
        .homecol_1{margin: 0 1% 1% 1%;}

}