/*******************************************
*     
*    Description: WDI Responsive
*    Description URL: 
*    Version: 1.0
*    Author: Innovative Solutions - Rochester, NY
*    Author URL: http://www.innovativesol.com
*    	
*    Color Scheme:
*    #000 = Black
*    #FFF = White
*    
******************************************/

/**
* CONTENTS
*
* #DESKTOPS AND LAPTOPS
* Desktops and Laptops ................... @media only screen 
* ........................................ and (min-width : 1224px)
*
* #LARGE SCREENS
* Large Screens .......................... @media only screen 
* ........................................ and (min-width : 1824px)
*
* #TABLETS
* Tablets (portrait and landscape) ....... @media screen and (max-width: 780px)
* 
* Tablets (landscape) .................... @media only screen 
* ........................................ and (min-device-width : 768px) 
* ........................................ and (max-device-width : 1024px) 
* ........................................ and (orientation : landscape)
* 
* Tablets (portrait) ..................... @media only screen 
* ........................................ and (min-device-width : 768px) 
* ........................................ and (max-device-width : 1024px) 
* ........................................ and (orientation : portrait)
* 
* #SMARTPHONES
* Smartphones (landscape and portrait) ... @media screen and (max-width : 480px)
*
* Smartphones (landscape) ................ @media only screen 
* ........................................ and (min-width : 360px)
*
* Smartphones (portrait) ................. @media only screen 
* ........................................ and (max-width : 480px)
*
* iPhone 4 ............................... @media
* ........................................ only screen and (-webkit-min-device-pixel-ratio : 1.5),
* ........................................ only screen and (min-device-pixel-ratio : 1.5)
*
*/

/******************************************/
/* #DESKTOPS AND LAPTOPS  */
/******************************************/
/**
 * Desktops and Laptops
 */

html, body {
    width: 100%;
    overflow-x: hidden;
}



.featuredButton {
    background: #4063AA;
    border: 1px solid #4063AA;
    text-decoration: none !important;
    display: inline-block;
    padding: 8px 20px;
    text-align: center;
    text-decoration: none;
    /*text-transform: uppercase;*/
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-appearance: none;
    color: white !important;
    margin-top: 0.5em;
    font-family: 'open_sansbold', sans-serif;
    font-style: normal;
    line-height: normal;
}

footer {
    padding: 30px 0;
    font-size: 16px;
    width: 100%;
}



@media only screen and (min-width : 1360px) {

    .columnOne { width: 8.333333333333332%; }
    .columnTwo { width: 16.666666666666664%; }
    .columnThree { width: 25%; }
    .columnFour { width: 33.33333333333333%; }
    .columnFive { width: 41.66666666666667%; }
    .columnSix { width: 50%; }
    .columnSeven { width: 58.333333333333336%; }
    .columnEight { width: 66.66666666666666%; }
    .columnNine { width: 75%; }
    .columnTen { width: 83.33333333333334%; }
    .columnEleven { width: 91.66666666666666%; }
    .columnTwelve {  width: 100%; }

    /* Welcome Bar */
        #pnlWelcome {
            font-size: 16px;
            line-height: 40px;
            height: 40px;
        }

        #pnlWelcome .container {
            padding: 0 30px;
        }

            #welcomeInformation p {
                float: left;
            }
    
        /* Welcome Links */
        #pnlWelcome .welcomeLinks{
            float: right;
            border-top: none;
            width: auto;
        }

            #pnlWelcome .welcomeLinks a{
                border-right: 1px solid #18345a !important;
                width: auto;
            }

        #pnlWelcome .welcomeLinks .loginLink {
            display: block;
        }

    /* Header */
        header {
            position: absolute;
            background: none;
        }
        
        #headerWrapper {
            height: 130px;
        }

        #headerWrapper .container {
            padding: 0 60px;
        }

            #headerWrapper .headerLogo {
                height: 130px;
                padding: 20px 0 30px;

                -webkit-box-sizing: border-box;
                   -moz-box-sizing: border-box;
                        box-sizing: border-box;
            }

        #headerWrapper #navSocialWrapper {
            display: block;
        }

        #headerWrapper .mobileMenu {
            display: none;
        }

        .largeHomeTitle {
            font-size: 5em;
        }
 
        .smallHomeTitle {
            font-size: 2em; 
        }

    /* General Styles */
        h1 { font-size: 40px; }
        h2 { font-size: 30px; }
        h3 { font-size: 24px; }
        h4 { font-size: 24px; }
        h5 { font-size: 20px; }
        h6 { font-size: 18px; }

        h1, h2, h3, h4, h5, h6 {
            margin: 20px 0;
        }
        h3 {
            margin-bottom:10px;
        }

    /* Navigation & Social */

        #mainNav ul > li > span, #mainNav ul > li > a {
            padding: 15px 16px;
        }

        /* sub nav */
        #subNavMobile {
            display: none;
        }


    /* Main Content */

        #breadcrumb {
            display: block;
        }

        /* page - home */
        #homeImageRotator #rotatorDetails{
            /*display: block;
            top: 40%;*/
            /*width: 55%;*/
        }


            /*#homeImageRotator #rotatorDetails{
                margin-left: 5% !important;
                width: 55%;
            }*/


            #homeImageRotator #rotatorDetails .imageDescription {
                display: block;
                font-size: 18px;
                line-height: 30px;
            }

            #homeImageRotator #rotatorDetails .imageTitle {
                font-size: 40px;
                line-height: 40px;
            }

            #homeImageRotator #rotatorDetails .rotatorLinkStyle {
                font-size: 20px;
                padding: 15px 25px;
            }

        /*sector icons*/
        .sectorIcon {
            max-width: 175px;
            width: 100%;
        }

            .sectorIcon.inside {
                max-width: 135px;
                width: 100%;
            }


        /* new homepage - blog and explore our work images */
        #ExploreContainer .columnFour img, .BlogContainer .columnFour img {
            width: 100%;
            height: auto;
        }


        /* page - inside landing */
        .inside header {
            height: 290px;
        }

        .insidePageTitle {
            font-size: 46px;
            top: 65px;
        }

        #twoCol.content section.columnNine {
            padding: 40px 60px !important;
            /*width: 75%;*/
        }

        #subNav {
            display: block;
        }
    

    /* Footer */
    footer {
        padding: 30px 0;
    }

    #mainFooter {
        text-align: left;
    }

        #mainFooter .copyright p {
            display: inline-block;
        }

        #mainFooter .copyright p:after {
            content: '|';
            margin: 0 10px 0 15px;
        }

        #mainFooter .copyright p:last-child:after {
            content: none;
        }

        #mainFooter .socialMedia {
            display: none;
        }

        #mainFooter .loginLink {
            display: none;
        }

    .supDiv .button, .enrchDiv .button, .devDiv .button {
        display: none;
    }

}




/******************************************/
/* #LARGE SCREENS  */
/******************************************/

/**
 * Large Screens
 */

@media only screen and (min-width : 1824px) {


/* Home page */

    .columnFour img {
        width: 100%;
        height: auto;
    }



    /* Navigation & Social */
        #mainNav {
            display: inline-block;
        }

            #mainNav ul > li > span, #mainNav ul > li > a {
                padding: 15px 25px;
            }

            #mainNav ul > li > span, #mainNav ul > li:last-child > a {
                padding-right: 25px;   
            }

        .socialMedia {
            display: inline-block;
            float: none;
        }

        /* sub nav */
        #subNavMobile {
            display: none;
        }


    /* Main Content */

        /* page - home */
        #homeImageRotator #rotatorDetails{
            display: block;
            width: 45%;
        }

            /*#homeImageRotator #rotatorDetails{
                margin-left: 12% !important;
                width: 39%;
            }*/



            #homeImageRotator #rotatorDetails .imageDescription {
                display: block;
                font-size: 24px;
                line-height: 160%;
            }

            #homeImageRotator #rotatorDetails .imageTitle {
                text-transform: uppercase;
            }


        .largeHomeTitle {
            font-size: 5em;
        }
 
        .smallHomeTitle {
            font-size: 2em; 
        }

    /* Footer */
    footer {
        padding: 30px 0;
        font-size: 16px;
        width: 100%;
    }

    #mainFooter {
        text-align: left;
    }

        #mainFooter .copyright p {
            display: inline-block;
        }

        #mainFooter .copyright p:after {
            content: '|';
            margin: 0 10px 0 15px;
        }

        #mainFooter .copyright p:last-child:after {
            content: none;
        }

        /*#mainFooter .socialMedia {
            display: none;
        }*/

}


/******************************************/
/* #TABLETS  */
/******************************************/

/**
 * Tablets (portrait and landscape)
 */



    @media only screen and (min-width: 768px) and (max-width: 1360px) {


        .columnOne {
            width: 8.333333333333332%;
        }

        .columnTwo {
            width: 16.666666666666664%;
        }

        .columnThree {
            width: 25%;
        }

        .columnFour {
            width: 33.33333333333333%;
        }

        .columnFive {
            width: 41.66666666666667%;
        }

        .columnSix {
            width: 50%;
        }

        .columnSeven {
            width: 58.333333333333336%;
        }

        .columnEight {
            width: 66.66666666666666%;
        }

        .columnNine {
            width: 75%;
        }

        .columnTen {
            width: 83.33333333333334%;
        }

        .columnEleven {
            width: 91.66666666666666%;
        }

        .columnTwelve {
            width: 100%;
        }

        /* Welcome Bar */
        #pnlWelcome {
            font-size: 16px;
            height: 40px;
            line-height: 40px;
            text-align: left;
        }

            #pnlWelcome .container {
                padding: 0 10px;
            }

        #welcomeInformation p {
            float: left;
        }

        /* Welcome Links */
        #pnlWelcome .welcomeLinks {
            float: right;
            border-top: none;
            width: auto;
        }

            #pnlWelcome .welcomeLinks a {
                width: auto;
            }

            #pnlWelcome .welcomeLinks .loginLink {
                display: block;
            }





        /* Header */
        header {
            position: absolute;
            background: none;
        }

        #headerWrapper .container {
            padding: 0 0 0 30px;
        }

        #lblDescription {
            display: none !important;
        }



        /* Main Content */
        #breadcrumb {
            display: block;
        }

        /* page - home */
        #homeImageRotator #rotatorDetails {
            /*display: block;
            top: 40%;*/
            padding: 10px;
        }

        div#rotatorDetails > div{
            padding: 15px !important;
        }


        /* new homepage - blog and explore our work images */
        #ExploreContainer .columnFour img, .BlogContainer .columnFour img {
            width: 100%;
            height: auto;
        }


        #homeImageRotator #rotatorDetails .imageTitle {
            font-size: 25px;
            line-height: 25px;
            margin-bottom: 10px;
        }

        #homeImageRotator #rotatorDetails .imageDescription {
            display: block;
            font-size: 18px;
            line-height: 30px;
        }

        #homeImageRotator #rotatorDetails .rotatorLinkStyle {
            font-size: 18px;
        }


        .largeHomeTitle {
            font-size: 3.5em;
        }

        .smallHomeTitle {
            font-size: 1.5em;
        }

        /* page - inside landing */
        .inside header {
            height: 230px;
        }

        .insidePageTitle {
            display: block;
            color: #FFFFFF;
            font-family: 'PT Sans', sans-serif;
            font-style: normal;
            font-size: 38px;
            font-weight: 400;
            position: relative;
            top: 48px;
        }


        #twoCol.content .columnNine {
            padding: 20px 30px;
        }

        /* Sub Nav */
        #subNav {
            display: block;
        }

            #subNav h2 {
                padding-left: 24px;
            }

            #subNav ul li {
                padding-left: 20px;
            }

        #subNavMobile {
            display: none;
        }

        /* Footer */
        #mainFooter .loginLink {
            display: none;
        }

        .supDiv .button, .enrchDiv .button, .devDiv .button {
            display: none;
        }
    }


    /**
 * Tablets (landscape)
 */

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {

        /* Main Content */

        /* page - home */
        #homeImageRotator #rotatorDetails, #blogContainer, #exploreContainer {
            display: block;
        }

            #homeImageRotator #rotatorDetails .imageTitle {
                font-size: 20px;
                line-height: 20px;
                margin-bottom: 15px;
            }

        /* page - inside landing */
        #twoCol.content .columnNine {
            padding: 20px 30px;
        }

        /* sub nav */
        #subNav {
            padding-top: 35px;
        }

            #subNav h2 {
                font-size: 20px;
                padding-left: 28px;
            }

            #subNav ul li {
                padding-left: 20px;
            }

        #subNavMobile {
            display: none;
        }

        div#rotatorDetails > div {
            padding: 15px !important;
        }
    }


    /**
 * Tablets (portrait)
 */

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {

        /* Header */
        #headerWrapper .container {
            padding: 0 0 0 30px;
        }


        /* Main Content */

        /* page - home */
        #homeImageRotator #rotatorDetails {
            /*display: block;*/
            /*top: 50%;*/
        }

            #homeImageRotator #rotatorDetails .imageDescription {
                display: none;
            }

            #homeImageRotator #rotatorDetails .imageTitle {
                font-size: 20px;
                line-height: 20px;
                /*margin-bottom: 20px;*/
            }

            #homeImageRotator #rotatorDetails .rotatorLinkStyle {
                margin-top: 0;
            }

        /* page - inside landing */
        .inside header {
            height: 200px;
        }

        .insidePageTitle {
            font-size: 36px;
            top: 38px;
        }

        /* sub nav */
        #subNav {
            display: none;
        }

        #subNavMobile {
            display: block;
        }

        #twoCol.content .columnNine {
            padding: 20px 30px;
            width: 100%;
        }
    }


    /**
 * Tablets (custom)
 */

    /* Column adjustment to certain widths */
    @media only screen and (min-width: 480px) and (max-width: 1224px) {
        #headerWrapper .columnThree {
            width: 25%;
        }

        #headerWrapper .columnNine {
            width: 75%;
        }


        #headerWrapper .columnTwo {
            width: 25%;
        }

        #headerWrapper .columnTen {
            width: 75%;
        }


    }

/* Hide PersonaBar for mobile */
@media only screen and (max-width: 767px) {
    body {
        margin-left: 0px !important;
    }

    .personalBarContainer {
        display: none !important;
    }
}


    @media only screen and (min-width: 480px) and (max-width: 767px) {
                       
        .enrchDiv .button, .supDiv .button, .devDiv .button {
            width: 100%;
            margin-bottom: 10px;
            display: inline-block;
        }


        #ExploreContainer .columnFour img, .BlogContainer .columnFour img {
            width: 100%;
            height: auto;
        }

        .lowerButtonRow {
            display: none;
        }

        /* need to make all the images on the home page centered for mobile  */
        .Explore, .HomeBlog {
            margin: 0 auto;
            text-align: center;
            width: 100%;
        }

        .HomeTitle p {
            text-align: center;
        }

        .BlogContainer div.column.columnFour, #ExploreContainer div.column.columnFour {
            text-align: center;
        }
    }

    /* Image Rotator adjustment for title and description */
    @media only screen and (min-width: 480px) and (max-width: 915px) {

        /* Main Content */


        /* page - home */
        #homeImageRotator #rotatorDetails {
            /*display: block;*/
            /*top: 45% !important;
            left: 5% !important;*/
            display: none !important;
        }
        /*div#rotatorDetails > div {
            padding: 10px !important;
        }*/


            /*#homeImageRotator #rotatorDetails .imageTitle {
                font-size: 15px;
                line-height: 15px;
                margin-bottom: 10px;
            }

            #homeImageRotator #rotatorDetails .rotatorLinkStyle {
                margin-top: 0;
                padding: 10px 20px;
            }*/
    }




    /******************************************/
    /* #SMARTPHONES  */
    /******************************************/

    /**
 * Smartphones (portrait and landscape)
 */

    @media only screen and (min-width: 145px) /* adjusted size for browser width */
    and (max-width: 480px) {


        /* need to make all the images on the home page centered for mobile  */
        .Explore, .HomeBlog {
            margin: 0 auto;
            text-align: center;
        }

        .BlogContainer div.column.columnFour, #ExploreContainer div.column.columnFour {
            text-align: center;
        }

            #ExploreContainer div.column.columnFour img, .BlogContainer div.column.columnFour img {
                width: 100%;
                height: auto;
            }

        .HomeTitle p {
            text-align: center;
        }

        .row {
            padding: 0;
        }

        #twoCol.content {
            padding: 5px;
        }

        /* General Styles */
        h1 {
            font-size: 24px;
            margin: 10px 0;
        }

        h2 {
            font-size: 20px;
        }

        h3 {
            font-size: 18px;
        }

        h4 {
            font-size: 16px;
        }

        p {
            margin: 0 0 16px 0;
        }

        .insidePageTitle {
            font-size: 24px;
        }

        .image,
        .imageRight,
        .imageLeft,
        .imageCenter {
            float: none;
            margin: 10px auto;
            display: block;
        }

        .button,
        .secondaryButton,
        .loginContent .dnnFormItem a {
            width: 100%;
            margin: 5px 0;
            text-align: center;
            display: inline-block;
        }

        .lowerButtonRow {
            display: none;
        }


        /* Header */
        #headerWrapper .columnThree,
        #headerWrapper .columnNine {
            width: 50%;
        }

        #headerWrapper .columnTwo,
        #headerWrapper .columnTen {
            width: 50%;
        }



        #headerWrapper .columnNine {
            float: right;
        }

        #headerWrapper .columnTen {
            float: right;
        }


        /* Main Content */

        #homeImageRotator #rotatorDetails {
            display: none;
        }

        .sectorIcon.inside {
            display: none;
        }


        /* Modules & Controls */

        /* contact us */
        #contactUsForm .formItem input[type='text'],
        #contactUsForm .formItem #ddlSubject,
        #contactUsForm .formItem #ddlSubject,
        #contactUsForm .formItem #txtComment {
            width: 100%;
        }

        #contactUsForm .formItem {
            margin-bottom: 0;
        }

        #contactUsForm .requiredLegend {
            float: left;
            margin: 8px;
        }

        #contactUsForm #submit input {
            width: 100%;
        }

        #homeImageRotator #rotatorDetails {
            display: none !important;
        }
    }

    /**
 * Smartphones (landscape)
 */

    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {

        .columnOne, .columnTwo, .columnThree,
        .columnFour, .columnFive, .columnSix,
        .columnSeven, .columnEight, .columnNine,
        .columnTen, .columnEleven, .columnTwelve {
            float: left;
            display: inline-block;
        }

        /* Header */
        header, #headerWrapper {
            height: 100px;
        }

            header .headerLogo {
                /*padding: 0 44px 0 0;*/
                height: 100px;
            }

            header .mobileMenu {
                height: 30px;
                padding: 35px 25px;
            }

                header .mobileMenu a#pull {
                    font-size: 30px;
                }

        /* page : home */
        .largeHomeTitle {
            font-size: 1.5em;
            margin: 0;
            padding: 0;
        }

        .smallHomeTitle {
            font-size: 1em;
            margin: 0;
            padding: 0;
        }
    }


    /**
 * Smartphones (portrait)
 */

    @media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

        .columnOne, .columnTwo, .columnThree,
        .columnFour, .columnFive, .columnSix,
        .columnSeven, .columnEight, .columnNine,
        .columTen, .columnEleven, .columnTwelve {
            width: 100%;
            margin: 0;
        }

        /* Header */

        #headerWrapper {
            height: 70px;
        }

        header {
            background: url('/Portals/0/WDI/Images/WDI_insideBanner.jpg') no-repeat center top;
            height: 70px;
            position: relative;
        }

        .headerLogo {
            height: 70px;
            padding: 15px 0;
        }

        header .mobileMenu {
            height: 20px;
            padding: 25px 20px;
        }

            header .mobileMenu a#pull {
                font-size: 25px;
            }

        .inside header {
            height: 160px;
        }

        /* page :  home */

        .largeHomeTitle {
            font-size: 1.5em;
            margin: 0;
            padding: 0;
        }

        .smallHomeTitle {
            font-size: 0.65em;
            margin: 0 0 20px 0;
            padding: 0;
        }

        .sectorIcon {
            max-width: 75px;
        }
    }


    /**
 * iPhone 4
 */

    @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

        /* Styles */

    }

    @media print {

        .columnNine {
            width: 100% !important;
        }
    }


    /* this is to ensure that the header behaves the right way after we edited the names */
    @media only screen and (min-width: 768px) and (max-width: 1430px) {

        /* make the mobile menu display */
        #headerWrapper .mobileMenu {
            display: block !important;
        }

        /* make the main nav bar disappear */
        #headerWrapper #navSocialWrapper {
            display: none !important;
        }
    }