﻿@media only screen and (max-width : 959px) {
    .header,
    .content {
        width: auto;
    }

    .navIcon
    {
        display:block;
        float:right;
        top:35px;
        right:10px;
        position:absolute;
    }

    .wideNav,
    .newUserSideBar.sideBar
    {
        display:none;
    }

    .wideNav.responsive
    {
        background-color:white;
    }

    .wideNav.responsive
    {
        z-index:3;
        position:absolute;
        top:60px;
        right:10px;
        width:250px;
        padding:0px;
        display:block;
    }

    .wideNav.responsive > a
    {
        display:block;
        float:right;
        clear:right;
        width:250px;
        margin:1px 0;
        padding:5px;
        background-color:#F4EFEA;
    }

    .wideNav.responsive > a:first-child
    {
        margin-top:0;
    }

    .wideNav.responsive > a:last-child
    {
        margin-bottom:0;
    }

    .testimonialInner
    {
        padding: 16px 0 25px;
    }

    .testimonialInner > div
    {
        width:100%;
        padding:0;
        margin:0;
    }

    #contactTile,
    .standardServicesSideBar,
    #additionalServicesSideBar,
    .contactSideBar,
    .operationSideBar
    {display:none;}

    .servicesContent,
    .operationContent,
    .contactContent,
    .aboutContent,
    .item,
    .loginHeading,
    .loginNote,
    .newUserTable {
        width: 100%;
    }  
    
    .loginContent
    {
        width:270px;
    } 

    .standardContent
    {
        width:85%;
    }
    
    .faqContent
    {
        width:100%;
    }

    .tileAbout
    {
        display:block;
        clear:right;
        float:left;
        width:auto;
        margin:0;
    }

    .clientsContent > div:nth-of-type(odd)
    {
        display:none;
    }

    .clientsContent > div:nth-of-type(2)
    {
        width:100%;
    }

    .multiColumnClient
    {
        width:100%;
        margin: 0;
        padding: 0px 35px 20px;
    }
        
    .verticalNav
    {
        width:15%;
    }

    .faqNav,
    #loginHelpSideBar
    {
        float:left;
        clear:left;
    }

    .faqNav
    {
        width:100%;
    }

    #loginHelpSideBar
    {
        width:340px;
    }

    .faqNav.sideBar,
    #loginHelpSideBar
    {
        padding:0 35px 25px;
    }
    
    .verticalNav > a
    {
        background-image:none;
    }

    .loginContainer
    {
        width:100%;
    }

    .loginForm,
    .portfolioForm
    {
        width:305px;
    }

    .loginForm > tbody > tr > td:first-child,
    .portfolioForm > tbody > tr > td:first-child
    {
        width:100px;
    }

    .loginForm > tbody > tr > td:nth-child(2),
    .portfolioForm > tbody > tr > td:nth-child(2)
    {
        width:170px;
    }

    .addressSideBar {
        float: left;
        width:100%;
        padding: 0px 35px 10px;
    }

    .addressSideBar h4 {
        margin: 0.4em 0;
    }

    .mapLarge,
    .mapMedium,
    .mapSmall
    {
        padding: 0;
    }
}


@media only screen and (max-width : 959px) and (min-width : 664px){
   .tileReference,
    #logoMSP,
    #logoLSE,
    #logoNEX,
    #logoCH
    {width:50%;}

   .tilePeople .tileReference
   {
       width:100%;
   }

    .multiColumnClient > div
    {
        width:50%;
    }

    .multiColumnClient > div:first-child
    {
        padding: 0 10px 0 0;
    }

    .multiColumnClient > div:not(:first-child)
    {
        padding: 0;
        float:right;
        clear:right;
    }
}

@media only screen and (max-width : 663px){
   .tileReference,
    #logoMSP,
    #logoLSE,
    #logoNEX,
    #logoCH
    {width:100%;}

    #mail,
    #phone
    {
        display:none;
    }

    .multiColumnClient > div
    {
        width:100%;
        padding: 0;
    }

    .verticalNav > div:first-child
    {
        display:none;
    }

    .mapLarge {
        display: none;
    }

    .mapMedium {
        display: block;
        float: left;
        width: 100%;
        overflow: hidden;
    }

    .footer div
    {
        width:100%;
    }
}

@media only screen and (max-width : 340px) {
    .header,
    .content {
        width: 340px;
    }
}
