/*  -------------------------------------------------------------
    MEDIA QUERIES - CLEAR PIXEL 2015
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -   */

/*  Make all columns full width under 1200px
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -   */

    @media screen and (max-width: 1200px) {

        /* Menu Main */

        #menu_main-ii li {
            margin-right: 20px;
            padding: 2px 5px;
        }




        /* Content */

        #content .article .date {
            float: left;
            padding-right: 0;
        }

        #content .column.last {
            float: none;
            width: 100%;
        }

        #content .login_form input.field {
            margin: 0 0 10px 0;
            width: 100%;
            border-left: none;
            border-right: none;
        }

        #content .featured_staff .text h3 {
            padding: 0 0 5px 0;
        }
        #content .featured_staff .text p {
            float: none;
            padding: 10px 0;
            width: 100%;
        }

        #content .maps .left {
            width: 100%;
        }

        #content .maps .left h5 {
            padding: 10px 0 2px 0;
        }

        #content .map {
            display: block;
            float: none;
            padding-top: 30px;
            width: auto;
            margin: 0;
        }

        #content #summariseSub .sub .details h2 a:hover {
            color: #9acb9b;
            background: none;
        }
    }




/*  Make all columns full width under 910px
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -   */

    @media screen and (max-width: 910px) {

        /* Menu */

        #menu_main-ii li a:hover {
            color: #86b3ce;
        }

        #menu_main-ii li {
            margin-right: 10px;
            padding: 2px 5px;
        }
        
        #menu_main-ii li a:link,
        #menu_main-ii li a:visited {
            font-size: 1em;
            text-decoration: none;
            overflow: hidden;

        }

        #menu_main li.hasChilds:hover ul {
            opacity: 0;
            visibility: hidden;
        }





        /* main_banner */

        #main_banner .hero_text-i {
            bottom: 0;
            left: 0;
        }

        #main_banner .hero_text h1 {
          padding: 10px;
          font-size: 2em;
        }

        #main_banner .hero_text h5 {
            padding: 10px;
            font-size: 1em;
            line-height: 1em;
        }




        /* Main */

        #main .home_box h2:hover {
            background: none;
        }

        #main .home_box h2:hover a {
            text-decoration: none;
            color: #9acb9b;
        }





        /* Content */

        #content a:hover {
            color: #7daeca;
            text-decoration: none;
        }

        #content a.btn_general:hover {
            color: #7daeca;
            background: #fff;
        }

        #content .login .btn:hover {
            color: #fff;
            background-color: #9acb9a;
        }

        #content .login input.btn:hover,
        #content .login input.btn:focus {
            color: #fff;
            border: 1px solid #9acb9a;
            background-color: #9acb9a;
        }

        #content .resources .links a:hover {
            font-weight: normal;
        }

        #content .featured_staff .btns:hover a.btn:link,
        #content .featured_staff .btns:hover a.btn:visited {
            width: auto;
        }

        #content .featured_staff .btns:hover a.btn:hover {
            width: auto;
            background-color: #fff;
        }




        /* Latest News */

        #latestNews h2 a:hover {
            color: #9acb9b;
            background-color: #fff;
        }




        /* Form */

        #main #content .contentForm input:focus,
        #main #content .contentForm textarea:focus {
            color: #fff;
            background: #9acb9a;
        }

        #main #content .contentForm .submitBox .submitBtn,
        #main #content .contentForm .submitBox .submitBtn:hover {
            color: #fff;
            background: #9acb9a;
        }






        /* Footer */

        #footer .contact .social .btn img:hover {
            margin: 0;
            width: 32px;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            background-color: #fff;
        }

        #footer a.clearpixel:hover {
            background-position: top center;
        }
    }



    /*  Make all columns full width under 840px
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -   */

    @media screen and (max-width: 840px) {

        /* Header */

        #header a.btn_show_menu:link,
        #header a.btn_show_menu:visited,
        #header a.btn_hide_menu:link,
        #header a.btn_hide_menu:visited {
            display: block;
        }




        /* Menu Main */

        #menu_main {
            position: fixed;
            top: 0;
            right: -85%;
            z-index: -1;
            width: 100%;
            height: 100%;
            -webkit-transition: all 0.75s ease;
            -moz-transition: all 0.75s ease;
            -o-transition: all 0.75s ease;
            transition: all 0.75s ease;
            overflow-x: hidden;
            overflow-y: auto;
        }

        #wrapper.show_menu #menu_main {
            right: 0;
            z-index: 10000;
        }

        #menu_main-i {
            position: relative;
            float: right;
            padding: 12px 0 50px 0;
            width: 85%;
            min-height: 100%;
            background: #005ba5;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            overflow: hidden;
        }

        #wrapper.show_menu #menu_main-i {
            -webkit-box-shadow: -2px 0px 10px 0px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: -2px 0px 10px 0px rgba(0, 0, 0, 0.5);
            box-shadow: -2px 0px 10px 0px rgba(0, 0, 0, 0.5);
        }

        #menu_main-ii {
            float: none;
            display: block;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        #menu_main-ii li {
            float: none;
            display: block;
            margin: 0;
            padding: 0;
            width: 100%;
            text-align: center;
            background: #005ba5;
        }

        #menu_main-ii li a:link,
        #menu_main-ii li a:visited,
        #menu_main li.hasChilds ul li a:link,
        #menu_main li.hasChilds ul li a:visited,
        #menu_main li.hasChilds ul li a:hover,
        #menu_main li.hasChilds:hover ul li a:link,
        #menu_main li.hasChilds:hover ul li a:visited,
        #menu_main li.hasChilds:hover ul li a:hover,
        #menu_main li.hasChilds.active ul li a:link,
        #menu_main li.hasChilds.active ul li a:visited,
        #menu_main li.hasChilds.active ul li a:hover {
            display: block;
            float: none;
            margin: 0 auto;
            padding: 12px 0;
            width: auto;
            font-size: 1.1em;
            color: #fff;
            border: none;
        }

        #menu_main-ii li a:hover {
            background: #005ba5;
        }

        #menu_main-ii li.hasChilds:hover a:link, 
        #menu_main-ii li.hasChilds:hover a:visited {
            color: #fff;
        }

        #menu_main-ii li a.active,
        #menu_main-ii li.active a:link,
        #menu_main-ii li.active a:visited,
        #menu_main-ii li.active a:hover,
        #menu_main li.hasChilds ul li.active a:link,
        #menu_main li.hasChilds ul li.active a:visited,
        #menu_main li.hasChilds ul li.active a:hover,
        #menu_main li.hasChilds:hover ul li.active a:link,
        #menu_main li.hasChilds:hover ul li.active a:visited,
        #menu_main li.hasChilds:hover ul li.active a:hover,
        #menu_main li.hasChilds.active ul li.active a:link,
        #menu_main li.hasChilds.active ul li.active a:visited,
        #menu_main li.hasChilds.active ul li.active a:hover {
            color: #7daeca;
        }

        #menu_main li.hasChilds ul {
            display: none;
        }

        #menu_main li.hasChilds.about a:link,
        #menu_main li.hasChilds.about a:visited {
            display: none;
        }

        #menu_main li.hasChilds.about ul {
            position: static;
            top: auto;
            left: auto;
            z-index: auto;
            display: block;
            width: 100%;
            opacity: 1;
            filter: alpha(opacity=100);
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            visibility: visible;
        }

        #menu_main li.hasChilds.about ul a:link,
        #menu_main li.hasChilds.about ul a:visited {
            display: block;
        }




        /* Main */

        #main {
            padding-bottom: 0;
        }

        #main .home_box.home_box {
            float: none;
            margin: 0 0 15px 0;
            width: 100%;
        }

        #main .home_box.getting_started {
            padding-top: 10px;
            margin: 0 0 20px 0;
        }

        #main .home_box.management {
            float: none;
            margin-bottom: 25px;
        }

        #main .home_box.news {
            clear: none;
            margin-top: 30px;
        }

        #main .home_box .article {
            width: 55%;
        }

        #main .home_box .article.last a:link {
            margin-bottom: 35px;
        }




        /* Content */

        #content .columns .column.first,
        #content .columns .column.last,
        #content .columns.half_width .column.first,
        #content .columns.half_width .column.last,
        #content .columns.side_left .column.first,
        #content .columns.side_left .column.last {
            position: static;
            float: none;
            margin-top: 0;
            padding: 0 10px;
            width: 100%;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        #content .columns .column.first.mobile_none,
        #content .columns .column.last.mobile_none,
        #content .columns.half_width .column.first.mobile_none,
        #content .columns.half_width .column.last.mobile_none,
        #content .columns.side_left .column.first.mobile_none,
        #content .columns.side_left .column.last.mobile_none {
            display: none;
        }

        #content .columns .login_form {
            float: left;
            width: 49%;
        }

        #content .resources {
            float: right;
            width: 49%;
        }

        #content .featured_staff {
            float: right;
            width: 49%;
            padding-right: 10px;
        }

        #content .featured_staff .text h3 {
            padding: 0;
        }

        #content .featured_staff .text p {
            float: none;
            padding-top: 5px;
            width: 100%;
        }

        #content .maps .left {
            width: 100%;
            text-align: center;
        }

        #content .map {
            display: block;
            margin: 0 auto;
        }




        /* Staff Profiles */

        #content #staff_members .member:nth-child(odd) {
            margin-left: -10px;
            margin-right: -10px;
            padding-left: 20px;
            padding-right: 20px;
        }

        #content #staff_members .member .image {
            padding-left: 0;
            width: 30%;
        }

        #content #staff_members .member .details {
            width: 70%;
        }

    }




    /*  Make all columns full width under 725px
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -   */

    @media screen and (max-width: 725px) {

        /* main_banner */

        #main_banner .hero_text {
            position: static;
            width: 100%;
        }

        #main_banner .hero_text h1 {
          padding: 10px;
          font-size: 2em;
        }

        #main_banner .hero_text h5 {
            padding: 10px;
            font-size: 1em;
            line-height: 1em;
        }




        /* Content */

        #content .columns .featured_staff {
            clear: none;
            float: none;
            padding-right: 10px;
            width: auto;
        }




        /* Column first */

        #content .columns .column.first {
            float: none;
            margin-top: 0;
            padding: 0;
            width: 100%;
        }





        /* Column second */

        #content .column .login_form {
            float: none;
            width: 100%;
        }

        #content .column .resources {
            float: none;
            width: 100%;
        }

        #content .column .contact {
            clear: none;
            float: none;
            width: auto;
        }



        /* Latest News */

        #latestNews .news_item {
            display: block;
            padding-left: 0;
            padding-right: 0;
            width: 100%;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
    }






    /*  Make all columns full width under 665px
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -   */
        
    @media screen and (max-width: 665px) {

        /* Wrapper */

        #wrapper {
            z-index: 10000;
            height: 100%;
            width: 100%;
            -webkit-transition: all 0.75s ease;
            -moz-transition: all 0.75s ease;
            -o-transition: all 0.75s ease;
            transition: all 0.75s ease;
        }




        /* main_banner */

        #main_banner .hero_text {
            position: static;
            margin: 0;
            padding: 0;
            width: auto;
        }

        #main_banner .hero_text-i {
            position: static;
            margin: 0;
            width: 100%;
        }

        #main_banner .hero_text h1 {
            display: none;
        }

        #main_banner .hero_text h5 {
            padding: 17px 39px 17px 21px;
            line-height: 30px;
            color: #fff;
            background-color: rgba(125, 174, 202, 0.8);
        }





        /* Main */

        #main .home_box .article h4 {
            float: left;
            padding: 0;
            width: 100%;
        }

        #main .home_box .article h4 a {
            width: 100%;
        }




        /* Content */

        #content .resources {
            float: none;
            width: 100%;
        }

        #content .columns .featured_staff {
            clear: none;
            float: none;
            padding-right: 10px;
            width: auto;
        }

        #content .resources .links a:link,
        #content .resources .links a:visited {
            text-align: left;
        }




        /* Summarise Sub */

        #content #summariseSub {
            padding: 0;
        }

        #content #summariseSub .sub,
        #content #summariseSub .sub:nth-child(even) {
            float: none;
            padding: 10px 0;
            width: 100%;
        }

        #content #summariseSub .sub p,
        #content #summariseSub .sub h2 {
            padding-left: 2%;
            padding-right: 2%;
        }




        /* Columns */

        .column,
        #column.first,
        #column.last {
            float: none;
            margin: 0;
            width: 100%;
        }

    }




    /*  Make all columns full width under 550px
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -   */

    @media screen and (max-width: 550px) {

        /* Header */

        #header a.btn_show_menu:link,
        #header a.btn_show_menu:visited {
            color: #fff;
        }




        /* Main Banner */

        #main_banner .hero_text h5 {
            padding: 17px 21px;
            line-height: 30px;
            color: #fff;
            background: url("../../images/bg/bluegraphic_mobile.png") center center no-repeat rgba(125, 174, 202, 0.8);
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }




        /* Columns */


        #content .column.first h1 {
            font-size: 2em;
        }

        #content .columns .login_form {
            float: none;
            width: 100%;
        }




        /* Staff Profiles */

        #content #staff_members .member .image {
            float: none;
            margin: 0 auto 10px auto;
            padding: 0;
            width: 100%;
            max-width: 300px;
        }

        #content #staff_members .member .details {
            float: none;
            padding: 10px 0 0 0;
            width: auto;
        }




        /* Footer */

        #footer {
            text-align: center;
        }

        #footer .logo_mca {
            display: none;
        }

        #footer .contact {
            float: none;
            padding-top: 20px;
        }

        #footer p.address {
            float: none;
            font-size: 0.6em;
            color: #fff;
        }

        #footer .address a:link,
        #footer .address a:visited,
        #footer .address a:hover {
            text-decoration: none;
            color: #fff;
        }

        #footer .social {
            clear: none;
            float: none;
            margin: 0 auto;
            height: 30px;
        }

        #footer .contact .social .btn:link,
        #footer .contact  .social .btn:visited {
            display: inline-block;
            float: none;
            margin-top: 10px;
        }

        #footer .social a.linkedin:link,
        #footer .social a.linkedin:visited {
            bottom: 0;
            left: 50px;
        }

        #footer .social a.linkedin img {
            margin: 0;
        }


        #footer a.clearpixel:link,
        #footer a.clearpixel:visited {
            float: none;
            margin: 20px 50% 20px auto;
        }

        #footer .clearpixel img {
            display: inline-block;
            margin-top: 10px;
            padding-top: 10px;
            
        }

        #footer p.copyright {
            display: none;
        }

    }




    /*  Make all columns full width under 365px
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -   */

    @media screen and (max-width: 365px) {

        /* Header */

        #header a.btn_show_menu:link,
        #header a.btn_show_menu:visited {
            padding: 0;
            width: 40px;
            height: 40px;
            text-indent: 9999px;
            overflow: hidden;
            background-position: 8px center;
            background-size: 60%;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
        }




        /* Column second */

        #content .column .news .article h4 {
            font-size: 0.6em; 
            line-height: 0.6em;
        }

        #content .column .news .article p {
            font-size: 0.5em; 
            line-height: 1em;
        }

        #content .column .contact .contact_box {
            clear: none;
            float: none;
        }

        #content .column .contact .details {
            float: none;
            width: 100%;
        }

        #content .column .contact .text h3 {
            margin-left: 0;
            padding-left: 0;
        }

        #content .column .contact .text p {
            margin-left: 0;
            padding-left: 0;
        }
    }