html {
    font-size: 10px;
    /* Base font size for em calculation */
}

body {
    font-family: "Roboto", Arial, sans-serif;
    line-height: 1.7em;
    font-size: 1.5em;
    color: #333;
    overflow-x: hidden;
}

h1 {
    color: #702082;
    font-weight: 900;
    margin-bottom: 20px;
    margin-top: 0
}

h4 {
    text-transform: uppercase;
    font-size: 1em;
    font-weight: 700
}

h1,
h2,
h3,
h4 {
    line-height: 1.4em
}

ol,
p,
ul {
    margin-bottom: 20px
}

hr {
    border-color: #ddd
}

a {
    color: #B21013;
    text-decoration: none;
}

a:hover {
    color: #B21013;
    text-decoration: underline
}

.btn-primary {
    border: 1px solid #702082;
    background-color: #702082
}

.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:focus,
.btn-primary:hover {
    background-color: #932aab
}

img {
    border-radius: 0
}

.skip-to-content {
    position: fixed;
    top: 10px;
    left: 10px;
    -webkit-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
    background-color: #B21013;
    color: #fff;
    text-decoration: underline;
    z-index: 1000
}

.skip-to-content:hover {
    color: #fff
}

.skip-to-content:focus {
    color: #fff;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
}

.message {
    margin: 0;
    padding: 25px;
    background: #444444;
    color: #ffffff;
    border: 0;
    border-bottom: 1px solid rgba(221, 221, 221, 0.2);
    border-radius: 0
}

.message a {
    color: #dddddd;
    text-decoration: underline
}

.message a:hover {
    text-decoration: none
}

.message .btn {
    color: #dddddd
}

.message .btn.cookie-message-dismiss-accept {
    margin-right: 20px;
    color: #ffffff;
    border: 2px solid #ffffff;
    background-color: transparent
}

.message .global-message-dismiss {
    display: block;
    margin-top: 10px;
    text-decoration: none
}

.message .global-message-dismiss:hover {
    text-decoration: underline
}

.cookie-message .message hr {
    border-top: 2px solid rgba(221, 221, 221, 0.2)
}

.cookie-message .message strong {
    display: block;
    margin-bottom: 15px
}

.cookie-message .message .btn {
    padding: 8px 32px;
    border-radius: 20px;
    background-color: #702082;
    color: #ffffff;
    text-decoration: none
}

.cookie-message .message .btn.cookie-message-dismiss-accept {
    margin-right: 20px;
    color: #ffffff;
    border: 2px solid #ffffff;
    background-color: transparent
}

.cookie-message .message .btn:hover {
    text-decoration: underline
}

.header {
    background-color: #000;
    padding: 20px 0
}

.header .logo img {
    max-height: 100px
}

.header .university-essex-logo img {
    max-height: 100px
}

.header p.strapline {
    color: #fff;
    font-size: 1.1em;
    line-height: 1.7em;
    margin: 20px 0 0 0
}

@media (min-width:768px) {

    .container,
    .container-md,
    .container-sm {
        max-width: 750px;
    }
}

@media (min-width:1200px) {
    .header p.strapline {
        margin-left: -70px;
        margin-top: 35px
    }

    .container {
        max-width: 1170px;
    }
}

@media (min-width:992px) and (max-width:1199px) {
    .header p.strapline {
        margin-left: -35px
    }

    .container,
    .container-md,
    .container-sm {
        max-width: 970px;
    }
}

.navbar-ukda {
    border: 0;
    margin-bottom: 40px;
    background-color: #222;
    padding: 0;
}

.navbar-ukda .navbar-toggler {
    margin-right: 0;
    border: 0;
    padding: 7px;
    margin: 8px 0px 8px 17px;
}

.navbar-ukda .navbar-toggler:focus,
.navbar-ukda .navbar-toggler:hover {
    box-shadow: none;
    background-color: #333;
}

.navbar-toggler .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #fff;
}

.navbar-toggler .icon-bar+.icon-bar {
    margin-top: 4px;
}

.navbar-ukda .navbar-toggler-icon {
    width: 2.2em
}

.navbar-ukda .navbar-collapse {
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #222;
}

.navbar-ukda .navbar-collapse .navbar-nav li a {
    font-size: 1.2em;
    color: #eee;
    font-weight: 700;
    padding: 12px 17px;
}

.navbar-ukda .navbar-collapse .navbar-nav li a:hover {
    text-decoration: none;
}

.navbar-ukda .navbar-collapse .navbar-nav li.open>a {
    background-color: #222
}

.navbar-ukda .navbar-collapse .navbar-nav li.active a {
    color: #fff;
    background-color: #080808;
}

.navbar-ukda .navbar-collapse .navbar-nav li ul li a {
    color: #333;
    font-size: 1.15em
}

.navbar-ukda .navbar-collapse .navbar-form .form-control {
    border: none;
    background-color: #fff;
    color: #333;
    border-radius: 0;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
}

.navbar-ukda .btn-link {
    color: #9d9d9d;
    font-weight: 400;
}

.navbar-ukda .btn-link .fa-lg {
    font-size: 1.9em;
}

.sidenav {
    border: 1px solid #ddd;
    border-top: none;
    margin-bottom: 20px
}

.sidenav .nav-list {
    display: block;
}

.sidenav ul li {
    border-top: 1px solid #ddd
}

.sidenav ul>li.active>a:first-child {
    border-left: 2px solid #B21013
}

.sidenav ul>li.active>a:first-child:hover {
    background-color: transparent
}

.sidenav ul li a {
    color: #333;
    padding: 10px;
    display: block;
    font-weight: 700
}

.sidenav ul li a:hover {
    text-decoration: underline;
    background-color: transparent
}

.sidenav ul li a.sidenav-parent {
    max-width: 80%
}

.sidenav ul li a.sidenav-toggle:hover {
    cursor: pointer
}

.sidenav ul ul li {
    border-top: 1px dashed #ddd
}

.sidenav ul ul li a {
    font-weight: 400
}

.sidenav ul ul ul li a {
    padding-left: 20px
}

.sidenav ul ul ul ul li a {
    padding-left: 30px
}

.sidenav ul ul ul ul ul li a {
    padding-left: 40px
}

.sidenav ul ul ul ul ul ul li a {
    padding-left: 50px
}

.sidenav ul ul ul ul ul ul ul li a {
    padding-left: 60px
}

.intro {
    font-size: 1.2em;
    line-height: 1.7em;
    margin-bottom: 20px
}

.wysiwyg {
    margin-bottom: 20px
}

.wysiwyg img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 20px
}

.content-links {
    margin-bottom: 20px;
    padding-top: 10px;
    border-top: 10px solid #eee
}

.content-links h2.title {
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.4em
}

.article-grid {
    margin-bottom: 20px;
    margin-top: 20px
}

.article-grid .col-sm-4:nth-child(3n+4) {
    clear: left
}

.article-grid .grid-card {
    margin-bottom: 40px
}

.article-grid .grid-card a {
    text-decoration: none;
    display: block
}

.article-grid .grid-card a .title {
    font-size: 1.2em;
    font-weight: 700;
    margin: 20px 0 10px 0
}

.article-grid .grid-card a h2,
.article-grid .grid-card a p {
    margin-bottom: 10px;
    color: #333
}

.article-grid .grid-card a:hover .title {
    text-decoration: underline
}

p.home-headline {
    color: #333;
    line-height: 1.4em;
    font-size: 1.6em;
    margin: -10px 0 40px 0
}

.container-grid-home {
    background: url("/img/home-bg.jpg") no-repeat center center fixed;
    background-size: cover;
    margin-bottom: 50px
}

.container-grid-home .grid-card-home {
    background-color: #702082;
    border-radius: 5px;
    margin: 50px 10px
}

.container-grid-home .grid-card-home:hover {
    opacity: 0.9;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out
}

.container-grid-home .grid-card-home h2,
.container-grid-home .grid-card-home p {
    color: #fff;
    padding: 20px;
    margin: 0;
    font-size: 1.1em;
    line-height: 1.7em
}

.container-grid-home .grid-card-home h2.title {
    font-size: 1.3em;
    line-height: 1.4em;
    text-align: center;
    font-weight: 700
}

.container-grid-home .grid-card-home img {
    padding: 0 20px
}

.container-grid-home .grid-card-home a {
    text-decoration: none
}

.container-grid-home .grid-card-home a:hover {
    text-decoration: none
}

.sidebar .sidebar-image {
    margin-bottom: 20px;
    border: 10px solid #eee;
    padding: 10px
}

.sidebar .sidebar-quote {
    margin-bottom: 20px;
    background-color: #702082;
    color: #fff;
    padding: 20px
}

.sidebar .sidebar-quote p.quote {
    font-size: 1.2em;
    line-height: 1.7em;
    font-style: italic;
    font-weight: 700
}

.sidebar .sidebar-quote p.quote-line {
    width: 30px;
    height: 1px;
    background-color: #fff
}

.sidebar .sidebar-quote p.quote-name {
    font-weight: 900;
    margin-bottom: 0
}

.sidebar .sidebar-quote p.quote-role {
    text-transform: uppercase;
    font-size: 0.9em;
    margin-bottom: 0
}

.sidebar .sidebar-links {
    margin-bottom: 20px
}

.footer {
    color: #ddd;
    background-color: #000;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-top: 40px
}

.footer hr {
    border-color: #222
}

.footer a {
    color: #999;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline
}

.footer img.border {
    border: 2px solid #fff
}

.footer img.esrc {
    padding-left: 50px
}

.gsc-control-cse {
    padding: 0 !important
}

.gsc-thumbnail-inside {
    padding: 0 !important
}

.gsc-result-info {
    padding-left: 0 !important
}

.gs-title,
.gs-title * {
    font-family: "Roboto", Airal, sans-serif !important;
    color: #B21013 !important;
    text-decoration: none !important;
    margin-bottom: 5px;
    font-size: 1.175em !important
}

a.gs-title {
    border-bottom: 1px solid #B21013 !important
}

.gs-visibleUrl {
    color: #666 !important
}

.gs-snippet,
.gsc-cursor,
.gsc-orderby,
.gsc-result-info,
.gsc-url-top {
    font-family: "Roboto", Airal, sans-serif !important;
    font-size: 1.15em !important;
    line-height: 1.7em !important;
    color: #333 !important
}

.gsc-search-button {
    padding: 10px 10px !important;
    line-height: 0 !important
}

.gcsc-branding {
    display: none !important
}

.gsc-url-top {
    padding: 0 !important
}

.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}

.breadcrumb-item.active {
    color: #333;
}

.row>* {
    padding-right: calc(var(--bs-gutter-x));
    padding-left: calc(var(--bs-gutter-x));
}