/* ==========================================================================

   EGIP - Edinburgh Glasgow Improvement Programme

    - Font Replacement
    - Base styles
    - Main Containing Elements
    - Header
    - Footer
    - Panels
    - Buttons
    - Font styles
    - List styles
    - Content colour styles
    - FAQ Accordion
    - Google Map Filter
    - Form styles
    - Grid adjustments

   ========================================================================== */



/* ===== | Font replacement | =============================================== */
/*
/* ========================================================================== */

@font-face
{
    font-family: 'Open Sans';
    src: url('libs/fonts/opensans-regular-webfont.eot');
    src: url('libs/fonts/opensans-regular-webfont.eot#iefix') format('embedded-opentype'), url('libs/fonts/opensans-regular-webfont.woff') format('woff'), url('libs/fonts/opensans-regular-webfont.ttf') format('truetype'), url('libs/fonts/opensans-regular-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Open Sans Light';
    src: url('libs/fonts/opensans-light-webfont.eot');
    src: url('libs/fonts/opensans-light-webfont.eot#iefix') format('embedded-opentype'), url('libs/fonts/opensans-light-webfont.woff') format('woff'), url('libs/fonts/opensans-light-webfont.ttf') format('truetype'), url('libs/fonts/opensans-light-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Open Sans Semibold';
    src: url('libs/fonts/opensans-semibold-webfont.eot');
    src: url('libs/fonts/opensans-semibold-webfont.eot#iefix') format('embedded-opentype'), url('libs/fonts/opensans-semibold-webfont.woff') format('woff'), url('libs/fonts/opensans-semibold-webfont.ttf') format('truetype'), url('libs/fonts/opensans-semibold-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ===== | Base styles | ==================================================== */
/*
/* ========================================================================== */

body
{
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    color: #343434;
}

nav ul
{
    margin: 0;
    padding: 0;
}

nav li
{
    list-style: none;
}

a
{
    color: #343434;
}

    a:hover
    {
        color: #909090;
    }

/**
 * Set font-weight on H tags to normal to void faux bold on ios
 */

h1, h2, h3, h4
{
    font-family: 'Open Sans Semibold', sans-serif;
    font-weight: normal;
    font-style: normal;
}

h1
{
    font-size: 1.375em;
}

h2
{
    font-size: 1.125em;
    border-left: 5px solid #004e70;
    padding-left: 1em;
}

h3
{
    font-size: 1em;
}

h4
{
    font-size: 1em;
}

.lead p
{
    font-family: 'Open Sans Light', sans-serif;
    font-size: 1em;
    line-height: 1.6;
}

 p.paddingTop {
     padding-top: 2em;
 }

  p.nomargin , h4.nomargin {
     margin: 0;
 }

  p.double-padding {
      padding: 2em 0;
  }

hr
{
    border-color: #e0e0e0;
    margin: 2em 0;
}

/**
 * Media Queries for Base styles  ( > 480px )
 */

@media only screen and (min-width : 480px)
{
    h1
    {
        font-size: 2em;
    }

    h2
    {
        font-size: 1.625em;
    }

    h3
    {
        font-size: 1.375em;
    }

    h4
    {
        font-size: 1.125em;
    }

    .lead p
    {
        font-size: 1.375em;
    }
}

/* ===== | Main Containing Elements | ======================================= */
/*
/* ========================================================================== */

.main,
header,
footer
{
    margin: 0 auto;
    max-width: 1280px;
}

.main
{
    background-color: #fff;
}

.container
{
    max-width: 1280px;
}

    .fixed .container,
    .container.fixed
    {
        width: 960px;
        margin: 0 auto;
        position: relative;
    }

.overview,
.intro,
.pane,
.highlights,
.latest,
.project-gallery,
.information
{
    margin: 1em 0;
}

.carousel {
    border: none;
}

.overview,
.highlights
{
    padding-bottom: .5em;
    margin: 0;
    border-bottom: 1px solid #e0e0e0;
}

.overview,
.intro
{
    border-top: 1px solid #e0e0e0;
}

address {
    font-style: inherit;
}

/**
 * Media Queries for Main Elements  ( 480px > )
 */

@media only screen and (min-width : 980px)
{
    footer
    {
        padding: 3em 0 0;
    }

    .pane,
    .latest,
    .project-gallery,
    .information
    {
        margin: 2em 0;
    }

    .overview,
    .intro,
    .highlights
    {
        padding: 1em 0;
        margin: 1em 0;
    }
}

/* ===== | Header | ========================================================= */
/*      
/* ========================================================================== */

.grad
{
    background: #004e70;
    background: -moz-linear-gradient(left, #004e70 0%, #82b8ca 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#004e70), color-stop(100%,#82b8ca));
    background: -webkit-linear-gradient(left, #004e70 0%,#82b8ca 100%);
    background: -o-linear-gradient(left, #004e70 0%,#82b8ca 100%);
    background: -ms-linear-gradient(left, #004e70 0%,#82b8ca 100%);
    background: linear-gradient(to right, #004e70 0%,#82b8ca 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004e70', endColorstr='#82b8ca',GradientType=1 );
}

.grad-fixed
{
    height: 5px;
    margin-bottom: 1.5em;
}

header a.logo
{
    width: 75px;
    height: 67px;
    position: absolute;
    left: 2.5%;
    z-index: 11;
}

/**
 * Mobile Nav
 */

.mobile-header
{
    position: relative;
    min-height: 95px;
    z-index: 2;
}

.mobile-nav
{
    position: absolute;
    width: 100%;
    z-index: 10;
}

    .mobile-nav .accordion,
    .mobile-nav .accordion-head
    {
        border: none;
    }

    .mobile-nav .accordion-head
    {
        padding: 1em 0;
    }

    .mobile-nav .accordion-body
    {
        padding: 0;
    }

    .mobile-nav ul
    {
        margin: 0;
        padding: 0;
        background-color: #343434;
    }

    .mobile-nav li
    {
        border-bottom: 1px solid #1A1A1A;
        position: relative;
        list-style: none;
    }

        .mobile-nav li + li
        {
            border-top: 1px solid #494949;
        }

    .mobile-nav a
    {
        color: #fff;
        font-size: 1.25em;
        padding: 0.8em;
        display: block;
        text-decoration: none;
    }

    .mobile-nav .dropdown:after
    {
        content: "+";
        position: absolute;
        right: 1em;
    }

    .mobile-nav .mobile-icon,
    .mobile-nav .search-icon
    {
        background-repeat: no-repeat;
        background-position: right center;
        display: block;
        height: 46px;
        margin-right: 2.5%;
        padding: 0;
    }

    .mobile-nav .mobile-icon
    {
        background-image: url(libs/images/icons/mobile-nav-icon.png);
    }

    .mobile-nav .search-icon
    {
        background-image: url(libs/images/icons/search-nav-icon.png);
        margin-right: 1.5em;
    }

    .mobile-nav ul ul
    {
        background-color: #000000;
    }

        .mobile-nav ul ul a
        {
            font-size: 0.9em;
        }

    .mobile-nav .search-input
    {
        background-color: #343434;
        padding: 1em;
    }

    .mobile-nav input[type="search"]
    {
        max-width: 100% !important;
    }

/**
 * Media Queries for Desktop Nav  ( > 980px )
 * 1. Main nav
 * 2. Dropdown menu
 */

@media only screen and (min-width : 980px)
{
    header
    {
        padding: 0 0 1.875em 0;
    }

        header a.logo
        {
            width: 151px;
            height: 136px;
            position: relative;
        }

        header .search
        {
            float: right;
            margin-bottom: 3.750em;
        }

    .search .search-input,
    .search .search-label
    {
        float: left;
    }

    .search .search-label
    {
        margin: .5em 1em;
    }

    header input[type="search"]
    {
        min-width: 310px;
        max-width: 100%;
        padding: .5em;
    }

    /* 1 */

    .desktop-nav
    {
        float: right;
        z-index: 2;
    }

        .desktop-nav li
        {
            list-style: none;
            display: block;
            float: left;
            position: relative;
        }

            .desktop-nav li + li
            {
                border-left: 1px solid #cdcdcd;
            }

            .desktop-nav li.dropdown:after
            {
                content: "";
                background-image: url(libs/images/icons/menu-open.png);
                background-repeat: no-repeat;
                background-position: right center;
                width: 11px;
                height: 7px;
                position: absolute;
                right: 1em;
                top: 1.1em;
            }

            .desktop-nav li.dropdown:hover:after
            {
                background-image: url(libs/images/icons/menu-close.png);
            }

        .desktop-nav a
        {
            color: #343434;
            font-size: 1.25em;
            line-height: 2em;
            text-decoration: none;
            display: block;
            cursor: pointer;
            margin: 0;
            padding: 0 1.2em;
        }

            .desktop-nav a:hover
            {
                color: #909090;
            }

            .desktop-nav a.active
            {
                color: #82b8ca;
            }

        .desktop-nav li.dropdown a.dropdown-title
        {
            padding-right: 2em;
        }

        .desktop-nav li.dropdown:hover a.dropdown-title
        {
            color: #fff;
            background-color: #343434;
        }

        /* 2 */

        .desktop-nav ul ul
        {
            display: none;
            position: absolute;
            z-index: 1;
            left: 0;
            min-width: 300px;
            background-color: #343434;
            border-bottom: 3px solid #1a1a1a;
        }

        .desktop-nav ul .dropdown:hover ul
        {
            display: block;
        }

        .desktop-nav ul ul li
        {
            border-left: none;
            float: none;
            margin: 1em 0;
            background-color: #343434;
        }

        .desktop-nav ul ul a
        {
            color: #fff;
            display: block;
            font-size: .9em !important;
            line-height: 1.2;
            border-left: 3px solid red;
            margin: 0 0 0 1.2em;
            padding: 0 0 0 .8em;
        }
}

/* ===== | Footer | ========================================================= */
/*      
/* ========================================================================== */

footer li
{
    list-style: none;
}

footer nav
{
    background-color: #343434;
    padding: 1em;
    margin-top: 0.5em;
}

    footer nav li
    {
        padding: .5em 0;
    }

        footer nav li + li
        {
            border-top: 1px solid #cdcdcd;
        }

    footer nav a
    {
        color: #ffffff;
        font-size: 0.938em;
        text-decoration: underline;
        font-weight: bold;
    }

        footer nav a:hover
        {
            color: #b2b2b2;
            -moz-transition: all 0.1s ease-in-out;
            -o-transition: all 0.1s ease-in-out;
            -webkit-transition: all 0.1s ease-in-out;
            transition: all 0.1s ease-in-out;
        }

    footer nav ul
    {
        padding: 0;
    }

footer .group-logos
{
    padding: 0;
    margin: 0;
}

    footer .group-logos li
    {
        text-align: center;
        max-width: 30%;
        float: left;
    }

        footer .group-logos li + li
        {
            margin-left: 5%;
        }

        footer .group-logos li h4
        {
            font-size: .813em;
            color: #cdcdcd;
            margin: 0 0 .5em;
        }

footer p
{
    font-size: 0.875em;
}

footer .copyright
{
    color: #fff;
    font-size: 12px;
    line-height: 20px;
}

footer .legals
{
    background-color: #09181e;
    padding: 1.5em 0 1em;
    margin-top: 2em;
    font-size: 0.938em;
    line-height: 33px;
}

/**
 * Media Queries for Footer
 * 1. > 420px
 * 2. 420px > 768px
 * 3. > 768px
 */

@media only screen and (min-width : 420px) /* 1 */
{
    footer .footer-container
    {
        display: table;
        width: 100%;
    }

    .footer-main,
    .footer-sub
    {
        display: block;
        width: 100%;
    }

    .footer-sub
    {
        display: table-caption;
    }

    footer nav
    {
        padding: 2em 1em;
    }

        footer nav li
        {
            width: 50%!important;
            float: left;
        }

            footer nav li + li
            {
                border-top: none;
            }

        footer nav a,
        footer nav .copyright
        {
            margin: 0 .8em;
        }
}

@media screen and (min-width: 420px) and (max-width: 768px) /* 2 */
{
    footer .group-logos li
    {
        width: 30%;
    }
}

@media screen and (min-width: 768px) /* 3 */
{
    footer nav li
    {
        float: none;
        display: inline;
    }

    footer .group-logos
    {
        width: 100%;
    }

        footer .copyright,
        footer .group-logos li
        {
            text-align: left;
        }

        footer .group-logos li
        {
            padding-left: .85em;
            border-left: 2px solid #cdcdcd;
            min-height: 80px;
        }

    footer p
    {
        margin: 2em 0;
    }
}

/* ===== | Panes | ========================================================== */
/*
/* ========================================================================== */

.pane
{
    background-color: #343434;
    color: #ffffff;
}

    .pane .btn
    {
        background-color: #82b8ca;
    }

        .pane .btn:hover,
        .pane .btn:focus
        {
            background-color: #6d98a7;
        }

    .pane.feature .headline
    {
        padding: 0 1em 1em;
    }

    .pane.feature .btn
    {
        color: #ffffff;
    }

    .pane.feature p
    {
        text-transform: uppercase;
        font-size: 1.25em;
    }

    .pane.twitter {
        background-position: right 50px center;
        background-image: url('libs/images/icons/twtter-egip.png');
        background-repeat: no-repeat;
        padding-bottom: 1em;
    }

    .pane.twitter h3 {
        text-transform: uppercase;
    }

    .pane.events h4
    {
        margin: .5em 0;
    }

    .pane a,
    .pane a:link,
    .pane a:visited,
    .pane a:active {
        color: #fff;
    }

    .pane a:hover {
        color: #909090;
    }



/**
 * Media Queries for Pane  ( > 480px )
 */

@media only screen and (min-width : 480px)
{
    .pane
    {
        padding: 1em 2em 2em;
    }

        .pane.feature
        {
            padding: 0 2em 0 0;
        }
}

.signpost
{
    margin: 1em 0;
}

.signpost-title,
a.signpost-title
{
    background-color: #004e70;
    display: block;
    color: #ffffff;
    text-decoration: none;
    height: 50px;
    line-height: 50px;
    padding-left: 1em;
}

.signpost a.signpost-title:hover
{
    background-color: #003b54;
}

.supporting-content .pane
{
    margin: 2em 0;
    padding: 0 0 .5em;
    position: relative;
}

    .supporting-content .pane.contact {
        padding-top: 1px;
    }

    .supporting-content .pane img
    {
        float: none;
        margin: 0;
    }

.supporting-content h2
{
    font-size: 1.125em;
    padding: 0.5em 1em;
}

.supporting-content .pane > div {
    padding: 0 1.5em;
}

.supporting-content.downloads-box p{
    line-height: 1.4em;
}

.supporting-content.downloads-box h4 {
    margin-bottom: 0;
}

.supporting-content.downloads-box img {
    padding:10px;
}

.supporting-content.downloads-box a.btn{
    position: absolute;
    right: 1em;
    bottom: 1em;
}

/**
 * Media Queries for Supporting Content  ( 480px > 767px )
 */

@media screen and (min-width: 480px) and (max-width: 767px)
{
    .supporting-content .pane
    {
        float: left;
    }
}

/* ===== | Buttons | ======================================================== */
/*
/* ========================================================================== */

.btn,
button,
input[type="submit"],
input[type="button"]
{
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Open Sans Semibold', sans-serif;
    padding: 0.2em 0.6em;
}

.btn
{
    color: #ffffff !important;
    background-color: #004e70;
    /*border: 1px solid #004e70;*/
}

    .btn:hover
    {
        background-color: #00344a;
    }



/**
 * Media Queries for Buttons  ( > 480px )
 */

@media only screen and (min-width : 480px)
{
    .gallery-buttons
    {
        text-align: right;
        margin: 1em 0;
    }

        .gallery-buttons a.previous,
        .gallery-buttons a.next
        {
            float: left;
            margin-left: .5em;
        }
}

/* ===== | Font styles | =================================================== */
/*
/* ========================================================================== */

.centered
{
    text-align: center;
}

.follow
{
    float: right;
    font-size: 0.538em;
    padding: .5em 0 0 2.5em;
    height: 25px;
    background-image: url(libs/images/icons/twitter-bird.jpg);
    background-repeat: no-repeat;
    background-position: 0 .4em;
    cursor: pointer;
    text-decoration: none;
}

/**
 * Media Queries for Fonts  ( > 480px )
 */

@media only screen and (min-width : 480px)
{
    .intro p
    {
        line-height: 1.875em;
    }
}

/* ===== | List styles | ==================================================== */
/*
/* ========================================================================== */

.tick-list,
.bullet-list,
.row-list,
.pagination
{
    padding: 0;
}

    .tick-list p,
    .bullet-list p,
    .row-list p
    {
        margin: 0.5em 0;
    }

    .tick-list li,
    .bullet-list li
    {
        background-repeat: no-repeat;
        list-style: none;
        padding: 0.625em 0 0.625em 2.35em;
        background-position: 0 .85em;
    }

    .tick-list li
    {
        background-image: url(libs/images/icons/tick-list.png);
    }

.secondary .tick-list li
{
    background-image: url(libs/images/icons/tick-list-right.png);
}

.bullet-list li
{
    background-image: url(libs/images/icons/bullet-list.gif);
    background-position: 0 1.125em;
}

.secondary .bullet-list li
{
    background-image: url(libs/images/icons/bullet-list-right.gif);
}

.third .bullet-list li
{
    background-image: url(libs/images/icons/bullet-list-third.gif);
}

.row-list
{
    margin: 2em 0;
}

    .row-list li
    {
        list-style: none;
        border-bottom: 1px solid #e0e0e0;
        padding: .5em 0;
    }

        .row-list li:first-child
        {
            border-top: 1px solid #e0e0e0;
        }

    .row-list .news-item-link
    {
        font-size: 1.286em;
        margin: 0 0 0.6em;
        display: inline-block;
    }

.pagination li
{
    list-style: none;
    display: inline-block;
    text-align: center;
}

.pagination a
{
    display: block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    background-color: #ccc55f;
    color: #ffffff;
    text-decoration: none;
}

    .pagination a:hover
    {
        background-color: #e7e7e7;
        color: #343434;
    }

.pagination a.active {
    background-color: #e7e7e7;
    color: #343434;
}

/**
 * Media Queries for Lists  ( 480px > 767px )
 */

@media only screen and (min-width : 480px) and (max-width : 767px)
{
    .tick-list li,
    .bullet-list li
    {
        width: 45%;
        margin-right: 5%;
        float: left;
    }
}

/* ===== | Content colour styles | ========================================= */
/*
/* ========================================================================== */

.intro h1
{
    border-left: 5px solid;
    padding-left: 1em;
}

.intro h1,
.intro h2
{
    border-left-color: #c44646;
}

.project-gallery h2
{
    border-left-color: #c44646;
}

.overview .btn,
.project-gallery .btn,
.intro .btn
{
    background-color: #c44646;
}

.highlights h2,
.latest h2
{
    border-left-color: #ccc55f;
}

.highlights .date,
.highlights .date a,
.latest .date,
.latest .date a
{
    color: #ccc55f;
}

    .highlights .date a:hover,
    .latest .date a:hover
    {
        color: #a49e4d;
    }

.highlights .news-item-link,
.latest .news-item-link
{
    text-decoration: none;
}

    .highlights .news-item-link:hover,
    .latest .news-item-link:hover
    {
        text-decoration: underline;
    }

.highlights .btn,
.latest .btn
{
    background-color: #ccc55f;
}

    .highlights .btn:hover,
    .latest .btn:hover
    {
        background-color: #a49e4d;
    }

.highlights .secondary h2,
.latest .secondary h2
{
    border-left-color: #82b8ca;
}

.highlights .third h2
{
    border-left-color: #004e70;
}

.highlights .secondary .date,
.highlights .secondary .date a,
.latest .secondary .date,
.latest .secondary .date a
{
    color: #82b8ca;
}

    .highlights .secondary .date a:hover,
    .latest .secondary .date a:hover
    {
        color: #66919f;
    }

.highlights .secondary .btn,
.latest .secondary .btn
{
    background-color: #82b8ca;
}

    .highlights .secondary .btn:hover,
    .latest .secondary .btn:hover
    {
        background-color: #66919f;
    }

/* ===== | FAQs Accordian | ================================================= */
/*      
/* ========================================================================== */

.faq .accordion
{
    border-color: #cdcdcd;
    margin: 1em 0 0;
}

    .faq .accordion + .accordion
    {
        border-top: none;
        margin-top: 0;
    }

.faq .accordion-head
{
    padding: 1em 1em 1em 0;
    border-bottom: none;
    position: relative;
}

    .faq .accordion-head a
    {
        text-decoration: none;
        padding-left: 1em;
        display: block;
        border-left: 5px solid #ffffff;
    }

.faq .question:after
{
    content: "";
    background-image: url(libs/images/icons/menu-open.png);
    background-repeat: no-repeat;
    background-position: right center;
    width: 11px;
    height: 7px;
    position: absolute;
    right: 1em;
    top: 1.2em;
}

.faq .accordion-body
{
    padding: 0 1.875em;
}

.faq .accordion-head .question
{
    font-size: 1.375em;
    font-family: 'Open Sans Semibold', sans-serif;
}

.faq .accordion.activefaq
{
    margin: 1em 0;
}

    .faq .accordion.activefaq,
    .faq .accordion.activefaq + .accordion
    {
        border-top: 1px solid #cdcdcd;
    }

.faq .activefaq .accordion-head
{
    background-color: #f7f7f7;
    border-bottom: 1px solid #cdcdcd;
}

.faq .activefaq .question:after
{
    background-image: url(libs/images/icons/menu-close-alt.png);
}

.faq .activefaq .accordion-head a
{
    border-left: 5px solid #ccc55f;
}

/* ===== | Google Map filter | ============================================== */
/*      
/* ========================================================================== */

.map
{
    position: relative;
}

.map-toolbox
{
    position: absolute;
    z-index: 1;
    width: 260px;
    height: 100%;
    top: .5em;
    left: .5em;
}

    .map-toolbox > div
    {
        position: relative;
    }

    .map-toolbox a
    {
        color: #fff;
        text-decoration: none;
        outline: 0;
    }

.map-tools
{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #343434;
}

@media screen and (max-width: 767px)
{
    .map-tools
    {
        white-space: nowrap;
    }

    .map .collapse,
    .map .expand
    {
        -moz-transition: width 0.3s ease 0s;
        -o-transition: width 0.3s ease 0s;
        -webkit-transition: width 0.3s ease 0s;
        transition: width 0.3s ease 0s;
    }

    .map .expand
    {
        width: auto;
    }

    .map .collapse
    {
        height: auto;
        width: 0;
    }
}

@media screen and (min-width: 768px)
{
    /*
     * Overwrite the collapse on tablet.
     */
    .map-tools
    {
        width: 100%!important;
    }

    .map .collapse,
    .map .expand
    {
        -moz-transition: height 0.3s ease 0s;
        -o-transition: height 0.3s ease 0s;
        -webkit-transition: height 0.3s ease 0s;
        transition: height 0.3s ease 0s;
    }
}

@media screen and (min-width: 980px)
{
    /*
     * Overwrite the collapse on desktop.
     */
    .map-tools
    {
        height: auto !important;
    }
}

.map-tools form
{
    padding: .7em;
}

.map-tools select option:first-child
{
    color: #82B8CA;
}

.map-tools hr
{
    border-color: #000;
    height: 2px;
    background-color: #4d4d4d;
    margin: 2em 0 1em;
}

.map-tools > hr
{
    margin: 0;
}

.map-tools h3
{
    margin-top: 0;
    border-left: solid 5px #C44646;
    padding-left: 1em;
    font-size: 1em;
    font-family: 'Open Sans',sans-serif;
    font-weight: normal;
    color: #fff;
}

.map-tools ul
{
    list-style: none;
    padding-left: 1.5em;
    font-size: .8em;
}

.map-tools li
{
    margin-bottom: .5em;
}

.map-tools i
{
    display: inline-block;
    padding: 3px;
    line-height: 1em;
    border: solid 3px #000;
    margin-right: .8em;
}

    /*
     * Custom project types; probably subject to change.
     */
    .map-tools i.all-types
    {
        background-color: #c44646;
    }

    .map-tools i.electrification
    {
        background-color: #c49946;
    }

    .map-tools i.bridge-works
    {
        background-color: #99c446;
    }

    .map-tools i.platform-lengthening
    {
        background-color: #46c4a8;
    }

    .map-tools i.pathways
    {
        background-color: #4664c4;
    }


.map-tools-trigger
{
    display: block;
    padding: 1em 1em 1em 3.5em;
    text-transform: uppercase;
    background-color: #343434;
    background-image: url(libs/images/icons/mobile-map-icon.png);
    background-repeat: no-repeat;
    background-position: 1em center;
}

.map-tools-trigger-phone
{
    padding: 1em;
    width: 24px;
    background-position: center center;
}

.map .googlemap
{
    height: 400px;
}

.googlemap
{
    position: relative;
    height: 300px;
    width: 100%;
    margin: 1em 0;
    -webkit-transition: opacity 0.30s linear;
    -moz-transition: opacity 0.30s linear;
    -o-transition: opacity 0.30s linear;
    transition: opacity 0.30s linear;
    -moz-opacity: 0;
    opacity: 0;
}

    .googlemap:before,
    .googlemap:after
    {
        position: absolute;
        content: " ";
        z-index: 1;
        background: #c0c0c0;
        top: 0;
        left: 0;
    }

    .googlemap:before
    {
        width: 100%;
        height: 3px;
        height: 2px\9;
        background: -moz-linear-gradient(top, rgba(221,221,221,0.65) 0, rgba(0,0,0,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop( 0,rgba(221,221,221,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(221,221,221,0.65) 0,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(221,221,221,0.65) 0,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(221,221,221,0.65) 0,rgba(0,0,0,0) 100%); /* IE10+ */
        background: linear-gradient(to bottom, rgba(221,221,221,0.65) 0,rgba(0,0,0,0) 100%); /* W3C */
    }

    .googlemap:after
    {
        height: 100%;
        width: 3px;
        width: 2px\9;
        top: 1px;
        background: -moz-linear-gradient(left, rgba(221,221,221,0.65) 0, rgba(0,0,0,0) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, right top, color-stop( 0,rgba(221,221,221,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(left, rgba(221,221,221,0.65) 0,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(left, rgba(221,221,221,0.65) 0,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(left, rgba(221,221,221,0.65) 0,rgba(0,0,0,0) 100%); /* IE10+ */
        background: linear-gradient(to right, rgba(221,221,221,0.65) 0,rgba(0,0,0,0) 100%); /* W3C */
    }

    /*
     * Prevent border-box breaking infowindow.
     */
    .googlemap div
    {
        -webkit-box-sizing: content-box !important;
        -moz-box-sizing: content-box !important;
        -ms-box-sizing: content-box !important;
        box-sizing: content-box !important;
    }

    /*Prevent max-width from affecting Google Maps*/
    .googlemap img
    {
        max-width: none;
    }

/* Used for rendering maps off screen*/
.map-off
{
    position: absolute;
    left: -10000px;
}


/* ===== | Form styles | ==================================================== */
/*
/* ========================================================================== */

/**
 * Defining the placeholder colour in form elements
 */

::-webkit-input-placeholder
{
    color: #82b8ca;
}

:-moz-placeholder
{
    color: #82b8ca;
}

::-moz-placeholder
{
    color: #82b8ca;
}

:-ms-input-placeholder
{
    color: #82b8ca;
}

/**
 *  Validation
 **/

span.field-validation-error {
    background-color: #c44647;
    color: #fff;
    display: block;
    margin-bottom: 1em;
    padding: 0.6em;
}

input.input-validation-error,
textarea.input-validation-error {
    border-color: #c44647;
    color: #c44647;
    margin-bottom: 0;
}

/* ===== | Grid adjustments | =============================================== */
/*
/* ========================================================================== */

/**
 * Media Queries for Grid Adjustments  ( 480px > 768px )
 * 1. Resize into 2 columns for tablets
 */

@media screen and (min-width: 480px) and (max-width: 767px) /* 1 */
{
    .tablet-resize-5
    {
        width: 49%!important;
    }

        .tablet-resize-5 + .tablet-resize-5
        {
            margin-left: 2%!important;
        }
}

/* ===== | Lightbox Adjustments | =========================================== */
/*                                                                            */
/* ========================================================================== */

.lightbox {
    background-color: #000;
    color: #fff;
    padding: 0 0 4em 0;
}

.lightbox-header {
    display: none;
}

.lightbox-footer {
    margin: 1em;
    max-width: 928px;
}

    .lightbox-footer h4 {
        text-transform: uppercase;
    }

.lightbox-direction.right,
.lightbox-direction.left {
    background-color: #c44646 !important;
    padding: 0.25em 0.5em;
}

.lightbox-direction.left {
    top: auto;
    bottom: 16px;
    right: 100px;
    left: auto;
}

.lightbox-content {
    overflow-y: hidden;
    text-align: center;
}

.lightbox-direction.right {
    bottom: 16px;
    top: auto;
    right: 16px;
}
    a.lightbox-direction.right:before {
        content: "NEXT ";
    }

    a.lightbox-direction.left:after {
        content: " PREV";
    }

/* ===== | Helper Classes | ================================================= */
/*                                                                            */
/* ========================================================================== */

/**
 * Text Alignment Helpers
 */

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}