#cover {
    background: #222 url("images/newimg.jpg") no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
}

#cover-caption {
    width: 100%;
}

h5 {
    margin-left: 2%;
}

.my {
    background-color: black;
    width: 100%;
    border-radius: 10%;
    border-style: hidden;
}

.btn {
    background-color: steelblue;
    white-space: normal;
}

.my > h1 {
    color: white;
    padding: 5%;
}

.myfoot {
    padding-top: 1%;
    color: white;
}

body {
    font-family: "Roboto", sans-serif;
    background-color: #f0f0f0;
}

a,
a:hover {
    color: purple;
}

.black {
    color: black;
}

.bluelink {
    color: blue;
    text-decoration: underline;
}

.normlink > a {
    color: blue;
    text-decoration: underline;
}

ul {
    list-style: none;
}

h1 {
    padding-top: 1%;
    padding-bottom: 2%;
    text-align: center;
    font-family: "Verdana", sans-serif;
    font-weight: bold;
    width: 100%;
}

figure {
    margin-bottom: 30px;
}

header nav {
    display: flex;
    justify-content: flex-end;
}
nav > a {
    color: white;
}
nav > a:hover {
    color: white;
}
div > h1,
.site-name {
    font-size: 2.5rem;
    color: black;
}

.pageheading > h1 {
    padding-top: 1%;
    font-weight: bold;
    text-align: center;
}

h2 {
    text-align: center;
}

nav > p {
    cursor: pointer;
}

.main-column {
    flex: 2;
}

/* Bootstrap overrides */
.navbar,
.navbar-default {
    margin: 0;
    background-color: #282828;
    font-weight: 800;
    border: none;
    justify-content: space-around;
}

.courserow {
    width: 100%;
}

.coursecontainer {
    height: 200px;
    width: 100%;
}

.cardcenter {
    text-align: center;
}

.dukecontainerrpt {
    background-image: url(images/dukeaward.avif);
    width: 100%;
    height: 131px;
    background-position: center;
    background-repeat: repeat-x;
}

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}

.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.column {
    font-family: sans-serif;
    font-weight: 800;
    float: left;
    width: 25%;
    color: white;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
    padding-bottom: 10%;
}

.row {
    margin-left: 0%;
    margin-right: 0px;
}

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

.cardbkcolour {
    background-color: black;
    padding-bottom: 2%;
    padding-top: 2%;
}

.colpad {
    padding-bottom: 3%;
}

#myBtn {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Fixed/sticky position */
    bottom: 20px;
    /* Place the button at the bottom of the page */
    right: 30px;
    /* Place the button 30px from the right */
    z-index: 99;
    /* Make sure it does not overlap */
    border: none;
    /* Remove borders */
    outline: none;
    /* Remove outline */
    background-color: red;
    /* Set a background color */
    color: white;
    /* Text color */
    cursor: pointer;
    /* Add a mouse pointer on hover */
    padding: 15px;
    /* Some padding */
    border-radius: 10px;
    /* Rounded corners */
    font-size: 18px;
    /* Increase font size */
}

iframe {
    border: 0px;
}

#myBtn:hover {
    background-color: #555;
    /* Add a dark-grey background on hover */
}

.bannerimg {
    width: 100%;
}

.myimg {
    width: 100%;
    height: auto;
}

.logo {
    width: 100%;
    height: auto;
    padding-left: 20%;
    padding-right: 20%;
}

.padclass {
    padding-bottom: 1%;
}

.news {
    width: 160px;
    color: black;
}

.news-scroll a {
    text-decoration: none;
    color: black;
}

.dot {
    height: 6px;
    width: 6px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 2px !important;
    background-color: rgb(207, 23, 23);
    border-radius: 50%;
    display: inline-block;
}

.rowsub {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.columnsub {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

.columnsub img {
    vertical-align: middle;
    width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .columnsub {
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .columnsub {
        flex: 100%;
        max-width: 100%;
    }
}

/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
    position: relative;
    background-color: transparent;
    /*width: flex;
  height: 480px;*/
    border: 1px solid transparent;
    perspective: 1000px;
    /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
    position: relative;
    top: 0;
    left: 0;
    width: flex;
    text-align: justify;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front {
    position: relative;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
}

.flip-box-back {
    position: absolute;
    top: 0px;
    left: 0px;
    -webkit-backface-visibility: hidden;
    /* Safari */
    backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-box-front {
    background-color: green;
    color: black;
}

/* Style the back side */
.flip-box-back {
    width: 100%;
    height: 100%;
    background-color: white;
    color: black;
    transform: rotateY(180deg);
}

.news {
    width: 160px;
}

.news-scroll a {
    text-decoration: none;
}

.dot {
    height: 6px;
    width: 6px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 2px !important;
    background-color: rgb(207, 23, 23);
    border-radius: 50%;
    display: inline-block;
}

.btn {
    display: inline-block;
    padding: 0.375rem 1rem;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.btn:focus,
.btn.focus,
.btn:active:focus,
.btn:active.focus,
.btn.active:focus,
.btn.active.focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.btn:focus,
.btn:hover {
    text-decoration: none;
}

.btn.focus {
    text-decoration: none;
}

.btn:active,
.btn.active {
    background-image: none;
    outline: 0;
}

.btn.disabled,
.btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

a.btn.disabled,
fieldset[disabled] a.btn {
    pointer-events: none;
}

.btn-primary {
    color: #fff;
    background-color: #025;
    border-color: #025;
}

.btn-primary:hover {
    color: #fff;
    background-color: #025aa5;
    border-color: #025aa5;
}

.btn-primary:focus,
.btn-primary.focus {
    color: #fff;
    background-color: #025;
    border-color: #025;
}

.btn-primary:active,
.btn-primary.active,
.open > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #025;
    background-image: none;
    border-color: #025;
}

.btn-primary:active:hover,
.btn-primary:active:focus,
.btn-primary:active.focus,
.btn-primary.active:hover,
.btn-primary.active:focus,
.btn-primary.active.focus,
.open > .btn-primary.dropdown-toggle:hover,
.open > .btn-primary.dropdown-toggle:focus,
.open > .btn-primary.dropdown-toggle.focus {
    color: #fff;
    background-color: #025;
    border-color: #025;
}

.btn-primary.disabled:focus,
.btn-primary.disabled.focus,
.btn-primary:disabled:focus,
.btn-primary:disabled.focus {
    background-color: #025;
    border-color: #025;
}

.btn-primary.disabled:hover,
.btn-primary:disabled:hover {
    background-color: #025;
    border-color: #025;
}

.containerB {
    display: grid;
    background-color: white;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 2%;
    margin-bottom: 2%;
}

.containerB > div {
    margin-top: 1%;
    margin-bottom: 1%;
    text-align: center;
}

.footer-dark {
    padding: 50px 0;
    color: #ffffff;
    background-color: #282828;
    font-weight: 400;
}

.footer-dark h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-weight: bold;
    font-size: 18px;
}

.footer-dark ul {
    padding: 0;
    list-style: none;
    line-height: 1.6;
    font-size: 15px;
    margin-bottom: 0;
}

.footer-dark ul a {
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
}

.footer-dark ul a:hover {
    opacity: 1;
}

@media (max-width: 767px) {
    .footer-dark .item:not(.social) {
        text-align: center;
        padding-bottom: 20px;
    }
}

.footer-dark .item.text {
    margin-bottom: 36px;
}

@media (max-width: 767px) {
    .footer-dark .item.text {
        margin-bottom: 0;
    }
}

.footer-dark .item.text p {
    margin-bottom: 0;
    opacity: 0.9;
}

.footer-dark .item.social {
    text-align: center;
}

@media (max-width: 991px) {
    .footer-dark .item.social {
        text-align: center;
        margin-top: 20px;
    }
}

.footer-dark .item.social > a {
    font-size: 20px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
    margin: 0 8px;
    color: #ffffff;
    opacity: 0.9;
}

.footer-dark .item.social > a:hover {
    opacity: 1;
}

.footer-dark .copyright {
    text-align: center;
    padding-top: 24px;
    opacity: 0.8;
    font-size: 16px;
    margin-bottom: 0;
}

/* Initially hide the link, pushing it off-screen */
.skiplink {
    position: absolute; /* Allows precise positioning */
    top: -9999px; /* Moves the link far off-screen */
    left: 0; /* Keeps it on the left edge */
    background-color: #000; /* Example styling for visibility */
    color: #fff;
    padding: 8px;
    z-index: 100; /* Ensures it appears on top of other elements */
    text-decoration: none; /* Removes underline */
}

/* Style the link when it gains keyboard focus */
.skiplink:focus {
    position: static; /* Resets positioning to be visible */
    top: auto; /* Resets position */
    left: auto; /* Resets position */
    width: auto; /* Resets width */
    height: auto; /* Resets height */
    display: block; /* Ensures it's a block-level element */
    z-index: 100; /* Ensures it remains on top */
    padding: 8px; /* Applies padding */
    transform: translateY(0%); /* Ensures it's at the top of the viewport */
    transition: transform 0.3s; /* Smooth transition for appearance */
}