/* uSkinned overrides */

@media (min-width:768px) {

    .navigation nav.main {
        background-color: #21677e;
    }

    header::after {
        background-color: #21677e;
    }

    header .site-search {
        top: 30px;
    }
}

@media (max-width: 767px) {
    h1.heading.main {
        margin-left: 15px;                  /* Fix alignment of titles in mobile mode */
    }
}

.col-md-8.col-sm-10.col-sm-offset-1.col-xs-12.text-left {
    width: 85%;                             /* Banner image title width (left-aligned) */
}

.col-md-8.col-md-offset-2.col-sm-10.col-sm-offset-1.col-xs-12.text-center {
    background-color: rgba(100,100,100,0);  /* Banner image title (center) remove text background colour */
}

blockquote.floating-quote {
    border-left: 5px solid #21677e;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-size:18px;
    padding: 10px 35px 10px 35px;
}

blockquote::before{
    font-family: Georgia;
   font-size: 60px;
    padding: 10px 0px 0px 5px;
    content:"\201C";
}

blockquote::after{
    font-family: Georgia;
    font-size: 60px;
    padding: 0px 0px 0px 10px;
    bottom:-30px;
    content:"\201D";
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
}

@media (min-width: 992px){
    blockquote.floating-quote {
        margin:30px 50px 30px -16.67%;
        width: 50%;
        font-size:18px;
        float:left;
    }
}

@media (min-width:768px) and (max-width: 991px) {
    blockquote.floating-quote {
        padding: 10px 35px 10px 35px;margin:20px 20px 20px 0px;
        width: 40%;
        font-size:16px;
        float:left;
    }
}

@media (max-width:767px){
    blockquote {
        font-size:16px;
        margin: 20px 10px 20px 10px;
    }
}

.well {
    box-shadow: 0px 5px 10px 0px rgba(136,136,136,0.6);
    background: #ffffff;
}


/* Navigation padding and font size for various screen widths */

@media (min-width: 768px) {
    .navigation nav.main ul li a span {
        padding: 23px 7px !important;
        font-size: 13px;
    }
}

@media (min-width:992px) {
    .navigation nav.main ul li a span {
        padding: 23px 16px !important;
        font-size: 14px;
    }
}

@media (min-width: 1200px) {
    .navigation nav.main ul li a span {
        padding: 23px 28px !important;
        font-size: 14px;
    }
}


/* General */

.no-padding {
    padding: 0px;
}


/* MegaMenu dropdown */

@media (min-width: 768px) {
    .mega-dropdown {
        position: static !important;
    }

        .mega-dropdown > a {
            display: inline-block !important;
        }

        .mega-dropdown > ul {
            width: 100% !important;
            position: absolute !important;
        }

        .mega-dropdown > i {
            display: none;
        }

        .mega-dropdown .mega-header {
            border-bottom: 1px solid #21677e;
            font-weight: bold;
            min-height: 72px;
        }

    .navigation nav.main ul li:hover ul {
        left: 0;
    }

    .navigation nav.main li a:hover {
        color: #21677e !important;
        background-color: #fff !important;
    }

    .navigation nav.main li a.active {
        color: #fff;
        opacity: 1;
    }

    .navigation nav.main li.mega-dropdown a.active:hover {
        opacity: 1;
    }

    .navigation nav.main li.mega-dropdown ul {
        background-color: #fff;
    }

        .navigation nav.main li.mega-dropdown ul li a {
            color: #21677e;
            vertical-align: top!important;
        }

    .mega-items span {
        /*min-height: 72px;*/
        min-height: 48px;
    }

    .navigation nav.main li.mega-dropdown ul li a:hover {
        text-decoration: underline !important;
    }

    .navigation nav.main li.mega-dropdown ul a::before {
        background-color: none;
        /*background-color: rgba(33,103,126,0.4);*/
    }

    .navigation nav.main li.mega-dropdown ul a:hover::before {
        background-color: none;
        /*background-color: rgba(33,103,126,0.8);*/
    }
}

@media (max-width: 768px) {
    .mega-dropdown .mega-items {
        display: none;
    }
}

p.link.pull-right {
    margin-top: 0px;
}


/* Promo and News Pods */

@media (min-width: 1200px) {
    .news-pods .item,
    .promo-pods .item {
        width: 22%;
        margin: 1.5%;
    }
}

@media (min-width: 992px) and (max-width:1199px) {
    .news-pods .item,
    .promo-pods .item {
        width: 31%;
        margin: 1%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .news-pods .item,
    .promo-pods .item {
        width: 46%;
        margin: 2%;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .news-pods .item,
    .promo-pods .item {
        width: 46% !important;
        margin: 2%;
    }   
}

@media (max-width: 479px) {
    .news-pods .item,
    .promo-pods .item {
        width: 94%;
        margin: 3%;
    }
}

.news-pods .item,
.promo-pods .item {
    box-shadow: 0px 5px 10px 0px rgba(136,136,136,0.6);
    padding-left: 0px;
    padding-right: 0px;
    background: #fff;
}

    .news-pods .item .heading,
    .news-pods .item .text,
    .news-pods .item .link,
    .promo-pods .item .heading,
    .promo-pods .item .text,
    .promo-pods .item .link {
        padding-left: 7%;
        padding-right: 7%;
    }

    .news-pods .item .link,
    .promo-pods .item .link {
        padding-bottom: 7%;
    }

.news-pods .item{
    height: 396px;
}

.news-pods .text{
    height: 140px;
}

.news-pods .heading{
    display: block;
    height: 120px;
}

.news-date {
    display: block;
    color: #999;
}

/* Specific Content pages */

.search-field, .search-date-1, .search-date-2, .search-researcharea, .search-andor {
    -webkit-appearance: menulist-button;
}

.search-advancedRow {
    margin-bottom: 10px;
}

#studypage #studytitle {
    font-size: 15pt;
    padding: 10px 19px;
    clear: right;
    letter-spacing: 1px;
    line-height: 25px;
}

#studypage #studyheadline {
    margin-top: 5px;
    font-size: 11pt;
    font-weight: bold;
    padding: 10px 19px;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

div#studytitle {
    padding-left: 0px;
    padding-right: 0px;
}

div#studyheadline {
    background: rgba(33,103,126,1);
    box-shadow: 0px 5px 10px 0px rgba(136,136,136,0.6);
    border-color: rgba(33,103,126,0);
    margin-bottom: 20px!important;
}

p.studyheadline-equalmargin {
    margin-bottom: 8px;
}

@media (max-width:768px){
    div#studytitle {
        margin-left:5%!important;
        margin-right:5%!important;
    }
    div#whenwherewho {
        margin-left:5%!important;
        margin-right:5%!important;
    }    
}

.our-research img {
    display: block;
    width: 70%;
    margin: auto;
}


/* Staff profile images */

img.staff-profile-img {
    /* keep aspect ration when resizing */
    object-fit: cover;
    object-position: top;
    overflow: hidden;
}

@media (min-width: 768px) {
    /* make space for lengthy job titles */
    .senior-staff-tile {
        height: 420px;
    }
    .senior-staff-tile-img {
        height: 240px;    
        /* set as background img to fix ie problems */
        background-size: cover; 
        background-position: center 0;
    }
}

@media (max-width: 767px) {
    .senior-staff-tile {
        height: 350px;
    }
    .senior-staff-tile-img {
        height: 300px;  
        max-width:250px;
        background-size: cover; 
        background-position: center 0;
    }
    .senior-staff-tile a.btn {
        margin-top: 80px;
    }
    #staff-profile img.staff-profile-img {
        width: 40%;
    }
}


/* Twitter widget */

ol.timeline-TweetList {
    display: flex;
    list-style-type: none;
    margin-left: 0px;
}

li.Timeline-TweetList-tweet {
    width: 31.33%;
    height: fit-content;
    display: table;
    margin: 1%;
    box-shadow: 0px 5px 10px 0px rgba(136, 136, 136, 0.6);
    border-radius: 4px;
    background-color: #ffffff;
}

.TweetAuthor {
    display: flex;
    margin: 20px 15px;
}

p.timeline-Tweet-text {
    font-family: 'Helvetica', 'Arial', sans-serif;
    word-wrap: break-word;
    font-size: 16px;
    line-height: 20px;
    color: #000000;
    margin: 20px 15px;
}

img.twitter-Media {
    border-radius: 4px 4px 0px 0px;
    object-fit: cover;
    background-size: cover;
}

li.timeline-Tweet-action {
    display: none;
}

a.TweetAuthor-avatar {
    height: 45px;
    width: 45px;
}

img.Avatar {
    max-height: 100%;
    max-width: 100%;
    border-radius: 50%;
}

img.twitter-Media {
    max-width: 100%;
    height: auto;
    max-height: 500px;
    justify-content: center;
}

span.TweetAuthor-twitterHandle {
    position: relative;
    display: block;
}

.TweetAuthor-screenNameContainer {
    padding-top: 6px;
    padding-left: 2px;
}

a.TweetAuthor-screenNameLink {
    padding-left: 10px;
    text-decoration: none;
}

span.TweetAuthor-screenName {
    color: #000000;
    font-weight: 700;
}

span.TweetAuthor-twitterHandle {
    color: #697882;
}

.Tweet-brand-twitterIcon-icon {
    height: 20px;
    width: 20px;
    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%231da1f2%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E);
}

.Tweet-brand {
    margin-left: auto;
}

.MediaCard-mediaAsset.Video {
    position: relative;
}

a.timeline-Tweet-body {
    text-decoration: none;
}

time.timeago {
    color: #697882;
}

.TweetTime {
    text-align: right;
    margin-right: 15px;
    margin-bottom: 10px;
}

.timeline-Tweet-media {
    overflow: hidden;
}

@media (max-width:768px) {
    ol.timeline-TweetList {
        display: block;
        padding-inline-start: 0px;
        margin-block-start: 0px;
        margin-block-end: 0px;
    }

    li.Timeline-TweetList-tweet {
        width: 96%;
        margin: 2%;
    }

    .timeline-Tweet-media {
        display: none;
    }

    p.timeline-Tweet-text {
        font-size: 14px;
    }

    time.timeago {
        font-size: 12px;
    }
}