﻿.collapsedMenuBottom {
    display: none;
}
.openNavButton {
    display: none;
}
.menu-link {
    display: none !important;
}

@media all and (max-width:959px) {

    body {
        min-width: 0;
    }
    .wrapper {
        width: 100%;
    }

    /*
        -----------------------------------------
            HEADER start
    */

    .header {
        width: 100%;
        background: none;
    }
    .branding {
        width: auto;
        max-width: 100%;
    }
    .branding img {
        max-width: 100%;
    }

    .actions {
        background-color: transparent;
        float: left;
        display: block;
        margin-left: 20px;
    }
    .actions li.AspNet-Menu-Leaf {
        position: relative;
        left: 0px;
        display: inline-block;
    }

    .social {

        width: auto;
    
        float: left;
        left: auto;
        bottom: initial;
        position: relative;
        margin-left: 20px;
}



    .navigation div {
        width: 100%;
    }
   
.navigation {
    font-size: 14px;
    max-width: 100%;
    overflow: hidden;
}

.navigation ul {
    padding: 0;
    margin: 0;
    list-style-position: outside;
}

.navigation li,
.navigation li a {
    transition: 0.2s all ease;
    -webkit-transition: 0.2s all ease;
    -moz-transition: 0.2s all ease;
    display: none;
}
.navigation li a:hover {
    background-color: #627480 !important;
}
    
.navigation .AspNet-Menu-Link { display: none;}
.navigation .AspNet-Menu-Vertical { 
  float: left;
  -webkit-transition: all 0.2s ease;  
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease; 
}
.navigation .AspNet-Menu-Vertical ul { 
  padding: 0px;
  margin: 0px;
  list-style: none;
  position: relative;
  display: none;
}
.navigation .AspNet-Menu-Vertical > li > ul {
	min-width: 10em;
	padding: 4px 0;
	background-color: #50616B;
	border: 1px solid #CCC;
}
.navigation .AspNet-Menu-Vertical ul li { padding: 0px; }
.navigation .AspNet-Menu-Vertical > ul > li { display: block; width: 100%;}
.navigation .AspNet-Menu-Vertical ul li a { display: block; text-decoration: none; color: #fff;}
.navigation .AspNet-Menu-Vertical ul li > a { 
    width: 94%;
    padding: 10px 3%;
}
.navigation .AspNet-Menu-Vertical ul ul { 
  display: none; 
  position: absolute; 
  top:100%;
  min-width: 160px;
  background-color: #5F717C;
  border: 1px solid #CCC;
  border-left: none;
  border-right: none;
}
.navigation .AspNet-Menu-Vertical ul.active li {
    display: block;
}
.navigation li ul.active {
    float: left;
}
.navigation li ul.active,
.navigation li ul.active li {
    width: 100%;
    position: relative;
}

.navigation .AspNet-Menu-Vertical ul.active li ul { 
    display: inline-table;
}
.navigation .AspNet-Menu-Vertical ul.active li a {
    display: block;
}
.navigation .AspNet-Menu-Vertical ul li:hover, .navigation .AspNet-Menu-Vertical ul li:hover > ul { display: block; }
.navigation .AspNet-Menu-Vertical ul ul > li { position: relative; margin: 0; }
.navigation .AspNet-Menu-Vertical ul ul > li a { padding: 5px 15px 5px 10px; height: auto; background-color: #606E76; }
.navigation .AspNet-Menu-Vertical ul ul > li a:hover { background-color: #42BBA3; color: #fff; }
.navigation .AspNet-Menu-Vertical ul ul ul { position: absolute; left: 100%; top:0; }


.example-header .container { width: 100%; }
  
.navigation a.AspNet-Menu-Link { display: block; color: #fff; background-color: #50616B; float: right; text-decoration: none; /* padding: 19px 10px; */}
.navigation .AspNet-Menu-Vertical { clear: both; min-width: inherit; float: none; }
.navigation .AspNet-Menu-Vertical, .AspNet-Menu-Vertical > ul ul { overflow: hidden; max-height: 0; background-color: #5F717C; }
.navigation .AspNet-Menu-Vertical > li > ul { padding: 0px; border: none; }
.navigation .AspNet-Menu-Vertical.active, .AspNet-Menu-Vertical > ul.active ul { max-height: none; }

.navigation .AspNet-Menu-Vertical > ul { border-top: 1px solid #808080; }
.navigation .AspNet-Menu-Vertical li, .AspNet-Menu-Vertical > ul > li { display: block; }
.navigation .AspNet-Menu-Vertical li a { color: #000; display: block; /* padding: 0.8em; */ border-bottom: 1px solid #808080; position: relative; }
.navigation .AspNet-Menu-Vertical li.AspNet-Menu-WithChildren > a:after {
    content: '+';
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    font-size: 22px;
    padding: 4px 12px;
}
.navigation .AspNet-Menu-Vertical li.AspNet-Menu-WithChildren > a.active:after {
content: "-";
}
.navigation .AspNet-Menu-Vertical ul ul > li a { background-color: #606E76; /* height: 56px; */ padding: 10px 3% 10px 3%; }
.navigation .AspNet-Menu-Vertical ul ul, .AspNet-Menu-Vertical ul ul ul { display: inherit; position: relative; left: auto; top:auto; border:none; }

.navigation .AspNet-Menu-Vertical.active ul { 
    display: block;
}

.AspNet-Menu-WithChildren ul.active {
    max-height: none;
    display: block;
}

.menu-link {
    display: block !important;
    width: 94%;
    background-color: #50616B;
    padding: 10px 3%;
    color: #FFF;
    border-bottom: 1px solid #808080;
    text-align: left;
    font-family: arial;
    text-decoration: none;
    font-weight: bold;
    border-left: none;
    border-right: none;
}
.menu-link, .menu-link-icon {
    transition: 0.3s all ease;
    -webkit-transition: 0.3s all ease;
    -moz-transition: 0.3s all ease;
}
.menu-link.active {
    color: #3B464C;
    text-shadow: 0px 0px 2px #D5E3EF;
}
.menu-link:hover {
    background-color: #627480;
    color: hsl(180, 100%, 97%);
}
.menu-link-icon {
    display: inline-block;
    width: 20px;
    /* height: 20px; */
    transform: rotate(1turn);
    font-size: 19px;
    margin-right: -5px;
    margin-top: 2px;
    vertical-align: top;
}
.active .menu-link-icon {
    transform: rotate(0.75turn);
    margin-top: -4px;
    margin-right: 0px;
}

span.mli {
    display: block;
    /* line-height: 4px; */
    margin-top: -18px;
}
.mli:nth-child(1) {
     transition: 0.9s all ease;
    -webkit-transition: 0.9s all ease;
    -moz-transition: 0.9s all ease;
}
.mli:nth-child(2) {
     transition: 0.7s all ease;
    -webkit-transition: 0.7s all ease;
    -moz-transition: 0.7s all ease;
}
.mli:nth-child(3) {
     transition: 0.5s all ease;
    -webkit-transition: 0.5s all ease;
    -moz-transition: 0.5s all ease;
}
    /*
            HEADER end
        ----------------------------------------
    */
    img {
        max-width: 100%;
        height: auto;
    }
    
    .contentHeader .prelude {
        width: 100%;
        padding-bottom: 10px;
    }



    .footer > div {
        padding-top: 50px;
        width: 94%;
        padding-left: 3%;
        padding-right: 3%;
    }

    .footer {
        text-align: center;
        margin-top: 20px;
    }

    a#btndeftPayment {
        right: 0px;
        left: 0px;
        margin: auto;
    }

    .footer .credit {
        position: relative;
        margin-top: 20px;
        right: 0;
        left: 0;
        bottom: 0;
    }

    .footer li {
        float: none;
        display: inline-block;
        margin-top: 10px;
    }

    
    .contentFooter.clearfix {
        width: 94%;
        margin: 0px;
        padding: 20px 3%;
    }
    .contentFooter .fineprint {
        width: 100%;
        margin: 0px 0px 10px 0px;
    }
    
    .content {
      padding: 35px 3% 0 3%;
      margin: 0px;
      width: 94%;
    }
    .primary {
        width: 100%;
    }
    .secondary {
        width: 97%;
        margin: 0;
        padding: 0px 0px 3% 0px;
    }

    .slider {
        width: 100% !important;
        height: auto;
        float: left;
    }
    .slider img {
        max-width: 100%;
        margin: auto;
        left: 0;
        right: 0;
    }
    .introduction {
        position: relative;
        width: 100%;
        float: left;
    }



    .segments .segment {
        width: 44%;
        height: 150px;
        background-image: url(../App_Themes/Default/Images/bg-segment.png);    
        background-position: 20px 0;    
        background-repeat: no-repeat;
        padding-left: 3%;
        padding-right: 3%;
        border-left: none !important;
    }
    .segment.first,
    .segment.second {
        background-image: none;
    }
    .segment.third {
        margin-right: 0;
    }
    .segment.seventh {
        width: 94%;
        padding-left: 3%;
        padding-right: 3%;
    }

    .news {
        width: 100%;
        background: none;
    }
    .news h2 {
        width: auto;
        margin-left: 20px;
    }
    .newsItem {
        width: 94%;
        margin: 0px;
        padding: 0px 3%;
    }
    .supplemental.newsMenu ul {
        background-color: transparent;
    }
    .mailingList {
        width: 94%;
        padding: 0 3%;
    }
    .newsMenu img {
        display: none;
    }
    .supplemental.newsMenu > div > .AspNet-Menu {
        margin: 0px;
        padding-bottom: 3px;
    }

    .sectionHeader  {
        height: auto;
        text-align: center;
        height: 294px;
        overflow: hidden;
    }
    .sectionHeader.wrapper > img {
        max-width: 100%;
        height: auto;
        display: none;
    }
    .sectionHeader.wrapper > img:first-child {
        display: block;
    }

    .bannerImage.firstImage,
    .bannerImage.thirdImage {
        display: none;
    }
    .bannerImage.secondImage {
        text-align: center;
        width: 100%;
        height: auto;
        border: none;
        border-width: 0px;
    }
    .bannerImage.secondImage img {
        max-width: 100%;
        height: auto;
    }

    div#ctl00_ctl00_cphMain_ContentPlaceHolder1_pcSideMenuHeading img {
        display: none;
    }
    div#ctl00_ctl00_cphMain_ContentPlaceHolder1_pcSideMenuHeading {
        padding-top: 10px;
    }
    .supplemental {
        width: 100%;
        float: none;
        overflow: hidden;
    }
    .collapsedMenuBottom {
        display: block;
        width: 100%;
        height: 15px;
        position: absolute;
        left: 0px;
        right: 0px;
        background-color: blue;
        margin-top: -15px;
        /* IE9 SVG, needs conditional override of 'filter' to 'none' */  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZhMzg4YyIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);  background: -moz-linear-gradient(top,  rgba(106,56,140,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(106,56,140,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */  background: -webkit-linear-gradient(top,  rgba(106,56,140,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */  background: -o-linear-gradient(top,  rgba(106,56,140,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */  background: -ms-linear-gradient(top,  rgba(106,56,140,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */  background: linear-gradient(to bottom,  rgba(106,56,140,0) 0%,rgba(255,255,255,1) 100%); /* W3C */  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006a388c', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */;
    
        border-bottom: 1px solid #CBD7DC;
}
    .openNavButton {
        display: block;
        cursor: pointer;
        width: 86%;
        padding: 5px 6%;
        margin: auto;
        margin-top: 0px;
        position: relative;
        color: rgb(255, 255, 255);
        border-radius: 0px 0px 5px 5px;
        border: 1px solid rgb(76, 92, 101);
        border-top: 0px;
        background-color: rgb(40, 61, 77);
        box-shadow: rgb(204, 204, 204) 1px 1px 3px;
        text-align: center;
        font-family: arial;
        font-weight: bold;
        line-height: 15px;
        vertical-align: top;
        transition: 0.5s all ease;
        -webkit-transition: 0.5s all ease;
        -moz-transition: 0.5s all ease;
    
        z-index: 999;
}
    .openNavButton:hover {
        border-color: rgb(139, 171, 189);                        
        background-color: rgb(69, 102, 127);    
        box-shadow: rgb(76, 76, 76) 1px 1px 3px;
    }
    span.expand-icon {
        display: none;
        font-size: 20px;
        font-weight: 200;
        font-stretch: extra-condensed;
        color: rgb(234, 239, 242);
        position: absolute;
        margin-left: 7px;
        top: 5px;
        transition: 0.5s all ease;
        -webkit-transition: 0.5s all ease;
        -moz-transition: 0.5s all ease;
    }
    span.expand-icon:before {
        content: "I";
        font-size: 25px;
        margin-right: -7px;
    }
    span.expand-icon.expanded {
        transform: rotate(0.5turn);
        top: 2px;
    }

    .supplemental {
        overflow: hidden;
        position: relative;
    }
    .supplemental > img {
        display: none;
    }

    .supplemental ul {
        width: 94%;
        margin: 0;
        padding: 10px 3% 20px 3%;
        position: relative;
        padding-top: 10px;
    }
    /*
    .supplemental .AspNet-Menu-Leaf:first-child {
        margin-top: 20px;
    }
    .supplemental .newsMenu .AspNet-Menu-Leaf:first-child {
        margin-top: auto;
    }*/

    .supplemental li.AspNet-Menu-Selected {
        display: block;
        /*position: absolute;
        top: 0px;
        left: 20px;
        right: 20px;*/
        color: #939393;
        text-decoration: none;
    }
    .supplemental a.AspNet-Menu-Selected {
        color: #5A5A5A;
        text-decoration: none;
        pointer-events: none;
        font-weight: bold;
    }





    .supplemental .contact-details {
        padding-top:20px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .supplemental .contact-details img {
        display: none;
    }

    .contact.wide {
        width: 100%;
    }
    .contact-details {
        background: none;
    }
    .form-col {
        width: 100%;
    }
    .form-col.first {
        margin-bottom: 10px;
    }
    .contact-details .form-col label {
        width: 30%;
    }
    .contact-details .form-col input[type="text"] {
        width: 70%;
        box-sizing: border-box;
        height: 28px;
    }

    .contact-form .quote-details .form-col label {
          width: 80%;
    }
    .quote-details .form-col input[type="checkbox"] {
          width: 5%;
          margin: 5px 0 5px 0;
    }


    .contact-message input[type="submit"] {
        right: 27px;
    }

    .contact-message textarea {
        width: 100%;
        max-width: 100%;
    }

    .request, .enquiry {
        position: relative;    
        display: inline-block;
        right: 0px;    
        bottom: 0px;
    }
    #ctl00_ctl00_cphMain_ContentPlaceHolder1_pnlForm > * {
        display: block;
    }
    #m-mining .sectionHeader .secondImage,
    #m-motorfleetmotorvehicle .sectionHeader .secondImage {
        width: 100%;
    }
    
    .fb_iframe_widget > span {
        width: 100% !important;
        overflow: hidden;
    }

    .fb-like.fb_iframe_widget {
        width: 100%;
    }



    /*

        EXTRANET:

    */
    .extranetUsername {
        max-width: 100%;
    }
    .login .fieldGroup .label,
    .login .fieldGroup .field {
        display: inline-block;
    }

    .breadcrumbs {
        width: 100%;
        margin-right: 0px;
    }

    .categoryNav {
        width: 100%;
        position: relative;
    }

    .categoryFilterNav select {
        width: 100%;
    }

    #extranet .filterCatagories-btn,
    #extranet .manageCatagories-btn {
        margin: 10px 0;
    }
    .documentList table {
        width: 100%;
    }
}



@media all and (max-width:699px) {
    .actions li.AspNet-Menu-Leaf {
        font-size: 12px;
    }
    .social {
        margin-left: 80px;
    }
    .social h2 {
        font-size: 1em;
        display: inline-block;
        line-height: 30px;
    }
    .social ul {
        display: inline-block;
        vertical-align: top;
        margin-left: 10px;
    }
}



@media all and (max-width:599px) {
   .branding {
       margin-top: 10px;
   }
    div#ctl00_ctl00_smHeader ul {
        display: block;
        margin: auto;
        margin-left: 0px;
    }
    .header .branding,
    .header .actions {
        display:inline-block;
    
}
    .actions {
        background: none;
    
        width: 49%;
        float: left;
        margin: 20px 0px 0px;
}
    .actions li.AspNet-Menu-Leaf {
        width: auto;
        height: 18px;
        line-height: 18px;
    
        margin-bottom: 10px;
}
    .actions li.AspNet-Menu-Leaf:first-child {
        margin-right: 20px;
}
    .social {
        width: auto;
        position: absolute;
        top: -23px;
        right: 10px;
        width: 110px;
    }
    .social ul {
        /*
            silly IE!
        */
        position: absolute;
        top: 0px;
        right: 10px;
    }

    a.extranet-btn {
        right: auto;
        left: 10px;
    }
    a.extranet-btn:hover {
        right: auto;
        left: 10px;
    }

    .social li a:link {
        margin-right: 0px;
    }

    .sectionHeader  {
        height: auto;
        max-height: 294px;
    }


    .content {
        padding: 35px 3% 0 3%;
    }

    .segments .segment {
        width: 94%;
        height: auto;
        background-image: url(../App_Themes/Default/Images/bg-segment.png);    
        background-position: 20px 0;    
        background-repeat: repeat-x;
        padding-left: 3%;
        padding-right: 3%;
    }
    .segment.first {
        background-image: none;
    }
    .segment.third {
        margin-right: 0;
    }
    .segment.seventh {
        width: 94%;
    }
    .segment:nth-child(1n) {
        background-color: #EAEFF2;
    }
    .segment:nth-child(2n) {
        background-color: #DEE8ED;
    }

    table td {
        border: 1px solid #DFDFDF;
        padding: 5px 5px;
        font-size: 12px;
    }

    table.stafftable td:first-child {
        display: none;
    }
    #ctl00_ctl00_cphMain_ContentPlaceHolder1_txtImageVer {
        margin-top: 10px;
        margin-right: 30%;
        width: 70%;
    }
    

    /*
        EXTRANET

    */
    #extranet .filterCatagories-btn,
    #extranet .manageCatagories-btn {
        margin: 10px auto;
    }
}

@media all and (max-width:530px) {
    .branding {
        width: 50%;
}

    .actions li.AspNet-Menu-Leaf {
        margin-bottom: 0px;
        margin-top: 20px;
}

    .actions.clear {
        margin-top: 0px;
    }
}




    .nav-whyusemccormickharris.AspNet-Menu-Leaf .AspNet-Menu-Link {
       
    }


@media all and (min-width: 959px) {
    .nav-whyusemccormickharris.AspNet-Menu-Leaf .AspNet-Menu-Link {
        background: transparent;
        white-space: nowrap;
        width: auto;
    }
	
	.nav-wanttobecomeanar.AspNet-Menu-Leaf .AspNet-Menu-Link {
        background: transparent;
        white-space: nowrap;
        width: auto;
    }

    ul.AspNet-Menu .AspNet-Menu-Leaf.nav-contractreviews a.AspNet-Menu-Link {
        white-space: nowrap;
        width: auto;
    }
}


