html, body {
    font-family: "Frutiger LT W01_55 Roma1475738";
    font-size: 14px;
}

/*Full Page Height*/
.main-content {
    min-height: 620px;
}

/*Force the width on desktop to be 990px wide*/
@media(min-width:1200px) {
    .container {
        width: 990px;
    }
}
/*End Media*/

.row {
    margin-top: 10px;
    margin-bottom: 10px;
}

h1, h2, h3, h4 {
    font-family: "Frutiger LT W01_55 Roma1475738";
}

h2, h3 {
    color: black;
}


a:focus, a:hover {
    color: #A00054;
}

/*border halfway margin under titles
	h1:after {
		content: ".";
		display: block;
		height: 0;
		overflow: hidden; 
	}

	h1:after {
		height: .2em;
		display: block;
		width: 3em;
		background-color: #E28C05; 
	}*/

p {
    font-family: "Frutiger LT W01_55 Roma1475738";
    font-size: 1.2em;
}

.main-content li {
    font-family: "Frutiger LT W01_55 Roma1475738";
    font-size: 1.2em;
}

/*===== HEADER - LOGOS =====*/
.header {
    padding-top: 20px;
    margin-bottom: 20px;
}

/*MECC Logo*/
img.MECC {
    margin-top: -30px;
}

.hr-hee {
    border: 5px solid #E28C05;
    /* Upgrade to Bootstap 4 uses rem to add margin to nav-bar which causes issues in IE11. Use px instead. */
    margin-top: 20px;
    margin-bottom: 0px;
}



/*===== NAVBAR =====*/
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
    margin-bottom: 0;
    border-radius: 0;
}

.navigation {
    font-size: 1.1em;
}

/*Navigation*/
.navbar-light {
    background-color: transparent;
    border: 0;
    color: #333;
}

    .navbar-light .navbar-nav > li > a.nav-link {
        color: #333;
        padding-left: 0;
    }

        .navbar-light .navbar-nav > li > a.nav-link:hover, .navbar-inverse .navbar-nav > li > a:focus {
            color: #333;
            transition: bottom 0.3s, background-color 0.3s
        }

.glyphicon-chevron-down {
    color: #A00054;
    padding-left: 10px;
}

/*allow the nav links to all sit on one line */
@media(min-width:768px) {
    .navbar .container-fluid, .navbar-collapse {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}
/*Media*/

/*first and last remove left and right padding*/
.li-first-nav {
    padding-left: 0px !important;
}

.li-last-nav {
    padding-right: 0px !important;
}

.navbar-nav li {
    font-size: 1.150em;
    margin-right: 8px;
}

.dropdown li a:first-child {
    padding-left: 0px;
}

/* Allow the root dropdown nav items to be positioned alongside the FontAwesome arrows, whilst allowing the appearing
   dropdown menu to be positioned below the clicked nav-item.
*/
.navbar-root-node {
    display: inline-block
}


/* REMOVE Nav links - additional margin */
@media(min-width:768px) {
    a.news-nav-link, a.contact-nav-link {
        /*margin-left:20px;
			margin-right:10px;*/
    }
}
/*End Media*/

/*Dropdown navs bg color*/
.navbar-light .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    background: none;
}

.navbar.navbar-expand-md.navbar-light {
    padding: 0px;
}

a.nav-header {
    position: relative;
    padding-right: 0px;
}

/*Navbar hover*/
ul.navbar-nav > li > a.nav-header:before {
    content: "";
    transition: all 0.3s;
    width: 3em;
    max-width: 30%;
    height: 0.3em;
    position: absolute;
    bottom: 0.3em;
}


/*Navbar hover*/
ul.navbar-nav > li > a.nav-header:hover:before, ul.navbar-nav > li > a:focus:before, 
ul.navbar-nav > li.active > a:before {
    background-color: #E28C05;
    bottom: 0rem;
}

ul.navbar-nav > li {
    position: relative;
}

/* Apply margin between adjacent nav-elements on full scale nav-bar.*/
ul.nav.navbar-nav .nav-item {
    margin-right: 15px;
}

/*  Format nav-bar on mobile devices. Add extra padding and set display to inline-block. This is a solution
    to issues encountered on IE11, where the underline effect on the nav headers was causing the nav-item containers
    to grow on hover despite the pseudo-content being absolute and outside the normal flow. This appears to be a bug
    with IE 11. By providing extra space inside the nav-items via padding, the underline now seems to have enough space
    and the containing nav-items no longer grow.
*/
@media (max-width: 768px) {
    a.nav-header {
        display: inline-block;
        vertical-align: middle;
        margin-right: .75px;
        padding-bottom: .75rem;
        padding-top: .75rem;
    }
}


div.dropdown-menu > a.dropdown-item {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

div.dropdown-menu :active {
    display: none;
    position: relative;
}
/* Override the custom arrows that Bootstrap renders to the side of the nav's dropdown menus. We can then add a custom
    AwesomeFont chevron. 
*/
.dropdown-toggle::after {
    content: none;
}
/**/
ul.dropdown-menu > li > a:before {
    position: absolute;
    bottom: 0.3em;
}
/**/
ul.dropdown-menu > li > a:hover {
    bottom: 0;
}


/*===== SEARCH =====*/
/*Search button - Pinky*/
.btn-hee {
    background-color: #A00054;
}

    .btn-hee .glyphicon {
        color: #FFF;
    }

.search-form {
    margin-top: 20px;
    padding-left: 0;
    padding-right: 0;
}

.search-result h2 {
    color: #A00054;
}
/*===== CAROUSEL =====*/
@media(min-width:1200px) {
    .carousel-caption {
        /*width:70%;*/
    }
}
/*media*/

/*
    Commented out to prevent images flying off the sides of the carousel viewport during a transition.
@media(max-width:767px) {
    .carousel-inner {
        overflow: visible;
    }
}
*/


.carousel-caption {
    background-color: rgba(255,255,255,1);
    /*background-color:#FFF;*/
    color: #333;
    text-align: left;
    right: 0;
    left: 0%;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: bitter;
    text-shadow: none;
}


    .carousel-caption p {
        font-size: 1.2em;
        padding: 10px;
        font-family: "Frutiger LT W01_55 Roma1475738";
    }

.carousel-control.left, .carousel-control.right {
    background: none;
}

.left-control-gradient {
    background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
    z-index: 11;
}

.right-control-gradient {
    background-image: linear-gradient(to left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
    z-index: 11;
}

.carousel-inner .item {
    border-left: 1px solid #EEE;
    border-right: 1px solid #EEE;
}

#myCarousel {
    margin-bottom: 25px;
}

/*===== TILE BUTTONS =====*/
.tile-row {
    margin-bottom: 30px;
}

.tile {
    position: relative;
    background-color: #EEEEEF;
    min-height: 250px;
    color: #333;
    padding: 10px;
    font-family: "Frutiger LT W01_55 Roma1475738";
    font-weight: bold;
    margin: 5px 0 5px 0;
}

/*  On screens medium and smaller, set the minimum height to 150px. This stops the full width tiles becoming
    too deep and taking up too much screen space. 
*/
@media screen and (min-width: 0) and (max-width: 768px) {
    .tile {
        min-height: 150px;
    }
}

/*  On screens larger than medium, provide the tiles with a minimum height of 200px. This ensures
    all tiles are rendered to the same height on ALL rows. Can be achieved via flex, but flex will
    only equalise height on a row-by-row basis. This approach comes with the caveat that content that
    exceeds the minimum height will be of different height. 
*/
@media screen and (min-width: 769px) {
    .tile {
        min-height: 250px;
    }
}

a.tile:hover {
    text-decoration: none;
    /*background-color:#cccccc;*/
}

.tile h3 {
    font-size: 1.2em;
    font-family: "Frutiger LT W01_55 Roma1475738";
    color: #A00054;
    margin-top: 0px;
    font-weight: bold;
}

.tile p {
    font-size: 1em;
}
/*Read more buttons*/
.btn-more {
    color: #FFF;
    font-family: "Frutiger LT W01_55 Roma1475738";
    background-color: #A00054;
    float: right;
    margin-bottom: 15px;
    border-radius: 0;
    position: absolute;
    bottom: 0;
    right: 20px;
    /*inset = Inside the div, Horizontal (minus for reverse) vertical, blur, Spread*/
    box-shadow: inset 0 0 0 0 #333;
    -webkit-transition: all ease 0.8s;
    -moz-transition: all ease 0.8s;
    transition: all ease 0.8s;
}

.btn-more-srch {
    color: #FFF;
    font-family: "Frutiger LT W01_55 Roma1475738";
    background-color: #A00054;
    margin-top: 15px;
    border-radius: 0;
    box-shadow: inset 0 0 0 0 #333;
    -webkit-transition: all ease 0.8s;
    -moz-transition: all ease 0.8s;
    transition: all ease 0.8s;
}

    .btn-more:hover, .btn-more:active, .btn-more:focus, .btn-more-srch:hover, .btn-more-srch:active, .btn-more-srch:focus {
        color: #FFF;
        box-shadow: inset 0 100px 0 #31302B;
    }

    .btn-more:focus, .btn-more-srch:focus {
        outline: none;
    }

/*
    Removed due to interference with Flex scaling of tiles.
    .tile {
    min-height: 150px;
}*/

/*===== FOOTER ======*/
footer {
    border-top: 5px solid #E28C05;
    background-color: #f2f2f2;
    padding: 25px;
}

    footer a, footer a:hover, footer a:focus {
        color: #333;
    }

.copyright {
    font-family: "Frutiger LT W01_55 Roma1475738";
    padding-top: 20px;
}


/*Sub nav*/
#sub-nav {
    /*display:none;*/
}
/*Socila Media Icons*/
ul.social {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

    ul.social li {
        float: left;
    }

        ul.social li a {
            display: block;
            background-color: #BBB;
        }

.social a {
    color: #FFF;
    display: inline-block;
    height: 40px;
    width: 40px;
    text-align: center;
    padding: 11px 0;
    line-height: 1;
    margin: 2px
}


.social-facebook a, .social-twitter a, .social-youtube a, .social-linkedin a, .social-instagram a {
    color: #FFF;
    font-size: 1.4em;
    display: block;
    box-shadow: inset 0 0 0 0 #BBB;
    -webkit-transition: all ease 0.8s;
    -moz-transition: all ease 0.8s;
    transition: all ease 0.8s;
}

    .social-facebook a:hover, .social-facebook a:focus {
        background-color: #3B5998;
        color: #FFF;
    }

    .social-twitter a:hover, .social-twitter a:focus {
        background-color: #4099FF;
        color: #FFF;
    }

    .social-linkedin a:hover, .social-linkedin a:focus {
        background-color: #0B78B7;
        color: #FFF;
    }

    .social-youtube a:hover, .social-youtube a:focus {
        background-color: #C4302B;
        color: #FFF;
    }

    .social-instagram a:hover, .social-instagram a:focus {
        background-color: #125688;
        color: #FFF;
    }
/*Socila Media Icons*/



/*CSS CHANGES - Removed due to interference with flex scaling of tiles. */
/*.tile {
    min-height: 225px;
}*/

.pageTitle {
    background-image: url('https://hee.nhs.uk/sites/default/files/styles/hero_image/public/nurse%20woman%20header%20image.jpg?itok=fZ3DQod-'); /*('https://placeholdit.imgix.net/~text?txtsize=33&txt=990%C3%97475&w=990&h=200');*/
    background-repeat: no-repeat;
    background-size: initial;
    height: 200px;
    margin-bottom: 20px;
}

    .pageTitle h1 {
        position: relative;
        top: 120px;
        left: 10px;
        padding: 1px;
    }

        .pageTitle h1 span {
            background: #FFF;
            padding: 10px;
            display: inline;
            line-height: 50px;
        }



@media(max-width:767px) {
    h1 {
        font-size: 2em;
    }

    .pageTitle h1 {
        top: 50px;
    }
}
/*End Media*/


a {
    color: #A00054;
}



ul.dropdown-menu li a:hover {
    text-decoration: none;
}


/*===COOKIE BANNER*/
#cookie-banner {
    background: #4d4d4d;
    color: #FFF;
    padding: 6px;
    text-align: center;
}

    #cookie-banner a {
        text-decoration: underline;
        color: #FFF;
    }

        #cookie-banner a:hover {
            text-decoration: underline;
            color: #D0D0D0;
        }








/*
Removed from Paragraphs
		line-height:28.16px;
		margin-bottom:22.88px;
*/

/* SOCIAL FEED */
.feed {
    width: 100%;
    height: 300px;
}

/* FONTAWESOME ICONS */
#searchIcon {
    color: white;
}

i.fa.fa-chevron-down {
    -moz-transition: color .2s ease-in;
    -o-transition: color .2s ease-in;
    -webkit-transition: color .2s ease-in;
    transition: color .2s ease-in;
    color: #A00054;
    font-size: 1rem;
}

    i.fa.fa-chevron-down:hover {
        color: #54002c
    }

/**umb_name:Heading Two*/
h2 {
	font-family: "Frutiger LT W01_55 Roma1475738";
	color: #D28304;
	font-size: 1.8em;
}

/**umb_name:Heading Three*/
h3 {
	font-family: "Frutiger LT W01_55 Roma1475738";
	color: #A56703;
	font-size: 1.6em;
}

/**umb_name:Paragraph*/
p {
	font-family: "Frutiger LT W01_55 Roma1475738";
	font-size: 1.2em;
}