@media /* =============== SITE =============== */ {
    .navbar-toggler {
        background-color: #631d76;
        border-left: none;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !important;
    }

    @media only screen and (max-width: 576px) {
        .titleBox {
            height: auto !important;
            min-height: auto !important;
        }

        .titleBox h1 {
            margin-bottom: 24px !important;
        }

        .headerImage {
            height: 250px !important;
        }
    }
}

@media /* ============= PAGE HEADER START =============== */ {

    /* LEFT SIDE */
    .titleBox {
        color: white;
        padding-left: 0px;
    }

    .titleBox .bcButton {
        background-color: white;
        border: none;
        color: black;
        text-transform: uppercase;
        height: 60px !important;
        min-width: 160px !important;
        font-size: 16px !important;
        text-align: center;
    }

    .titleBox .bcLinks a {
        font-size: 14px !important;
    }

    .titleBox h1 {
        margin-bottom: 24px;
    }

    .titleBox p, .titleBox a {
        color: white;
        text-decoration: none;
    }

    .titleBox a:hover {
        text-decoration: underline;
    }

    .titleBox p {
        margin-bottom: 30px;
    }

    @media screen and (max-width: 992px) {
        .titleBox {
            width: 70%;
        }
    }

    @media screen and (max-width: 768px) {
        .titleBox {
            padding: 10px;
            width: 100%;
        }

        .titleBox p {
            margin-bottom: 10px;
        }
    }

    @media (max-width: 576px) {
        .titleBox {
            min-height: 340px;
        }
    }

} /* ============= PAGE HEADER END =============== */

@media /* ============= COURSE PAGE START =============== */ {

    /* COURSE INTRODUCTION */
    .courseIntro {
        font-size: 16px;
        padding-right: 80px;
    }

    .courseIntro .title {
        font-size: 28px;
        font-family: 'agletsans-regular';
    }

    /* COURSE DETAILS */
    .courseDetails {
        font-family: 'agletsans-regular';
        font-size: 18px;
    }

    .courseDetails .title {
        font-size: 20px;
        font-weight: bold;
    }

    .courseDetails .subTitle {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .courseDetails .printButton {
        font-size: 14px;
        display: block;
        text-align: center;
    }

    .courseDetails .applyButton {
        width: 100%;
        display: block;
        text-align: center;
        text-transform: uppercase;
        font-family: Arial;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
    }

    /* CAREER OPTIONS */
    .courseIntro .careerOption {
        padding: 40px;
    }

    /* VIDEO */
    .courseIntro .iframe-header {
        height: 500px;
    }

    div.courseSticky {
        width: 100%;
        padding: 30px 0px;
        font-size: 22px;
        font-family: 'agletsans-regular';
        background-color: #f0f0f0;
        position: fixed;
        top: 10px;
        z-index: 999;
    }

    .courseSticky .applyButton,
    .courseSticky .standardButton {
        text-decoration: none;
        border: none;
    }

    .courseSticky .applyButton:hover,
    .courseSticky .standardButton:hover {
        text-decoration: none;
        border: none;
    }

    @media only screen and (max-width: 768px) {
        .courseIntro {
            padding-right: 0px;
        }

        .courseIntro .iframe-header {
            height: auto;
        }
    }

} /* ============= COURSE PAGE END =============== */

@media /* ============= MAIN MODULES START =============== */ {

    /* Course Search */
    .courseSearch .title {
        font-size: 32px;
        font-family: 'agletsans-regular';
        color: white;
        margin-bottom: 20px;
    }

    .courseSearch input {
        border: none;
    }

    .courseSearch .input-group {
        padding: 0px 20%;
    }
    
    .courseSearch .input-group-text,
    .courseSearch .input-group-text button {
        border-radius: 0px;
        background-color: white;
    }

    .courseSearch .selections label {
        color: white !important;
        font-size: 16px;
    }

    @media only screen and (max-width: 768px) {
        .courseSearch .input-group {
            padding: 0px 10%;
        }
    }

} /* ============= MAIN MODULES END =============== */

@media /* ============= FOOTER START =============== */ {
    .footerLinks a,
    .footerSocialMedia a,
    .footerAddress p {
        font-size: 16px !important;
    }
} /* ============= FOOTER END =============== */

@media /* ============= FIND COURSE START ============== */ {

    /*	Find a course Tab - https://www.w3schools.com/howto/howto_js_tabs.asp */
    /* Style the tab */
    div.tab {
        overflow: hidden;
    }

    /* Style the buttons inside the tab */
    div.tab button {
        background-color: inherit;
        float: left;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        color: black;
        width: 100%;
    }

    /* Change background color of buttons on hover */
    div.tab button:hover,
    div.tab button:focus,
    div.tab button.active:focus {
        background-color: rgb(248, 249, 250);
        color: #4d4d4d;
    }

    /* Create an active/current tablink class */
    div.tab button.active {
        background-color: rgb(248, 249, 250);
    }

    /* Style the tab content */
    .courseButton {
        display: block;
        border-left: 5px solid black;
        padding: 10px 20px;
        text-decoration: none;
        color: black;
    }

    .tabcontent {
        display: none;
        /*padding: 6px 12px;*/
        border-top: none;
    }

    .tabcontent a {
/*        display: block;
        padding: 20px;
        font-weight: 400;
        font-size: 17px;
        color: black;
        position: relative;
        background-color: white;
        margin: 1px 0px;*/
    }

    .tabcontent a.courseButton:after {
        /*	content: "\f105";
	    position: absolute;
	    right: 0px;
	    top: 0px;
	    bottom: 0px;
	    display: block;
	    width: 50px;
	    font: normal normal normal 14px/1 Font Awesome\ 5 Free;
        font-weight: 900;
	    font-size: 150%;
	    text-rendering: auto;
	    -webkit-font-smoothing: antialiased;
	    -moz-osx-font-smoothing: grayscaled;
	    text-align: center;
	    padding-top: 16px;*/
    }

    .tabcontent a.courseButton:hover {
        color: #fff;
    }

    .tabcontent {
        -webkit-animation: fadeEffect 1s;
        animation: fadeEffect 1s; /* Fading effect takes 1 second */
    }

    .tablinks {
        font-weight: bold;
        color: black;
        font-size: 12pt;
    }

    button.tablinks {
        border-top: 1px solid rgb(248, 249, 250);
        border-right: 1px solid rgb(248, 249, 250);
        border-left: 1px solid rgb(248, 249, 250);
        border-bottom: none;
    }

    @-webkit-keyframes fadeEffect {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeEffect {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .backLink a {
        color: black;
        text-decoration: none;
    }
} /* ============= FIND COURSE END ============== */

@media /* =============== SIDEBAR MODULE START =============== */ {
    .sidebarEvent,
    .sidebarNews {
        font-family: 'agletsans-regular';
    }

    .sidebarEvent .evTopLeft {
        font-size: 20px;
    }

    .sidebarEvent .evTopRight {
        font-size: 16px;
        font-family: Arial;
        text-align: right;
    }

    .sidebarEvent .evTopRight {
        text-decoration: underline;
    }

    .sidebarEvent a,
    .sidebarNews a {
        color: black;
        text-decoration: none;
    }

    .sidebarEvent .evDate {
        background-color: #ba1b83;
    }

    .sidebarNews .evDate {
        background-color: #631d76;
    }

    .sidebarEvent .evDay,
    .sidebarEvent .evMonth,
    .sidebarNews .evDay,
    .sidebarNews .evMonth {
        color: white;
    }

    .sidebarEvent .evDay,
    .sidebarNews .evDay {
        font-size: 25px;
    }

    .sidebarEvent .evMonth,
    .sidebarNews .evMonth {
        font-size: 18px;
    }

    .sidebarEvent .evTitle,
    .sidebarNews .evTitle {
        font-size: 18px;
    }

    .sidebarEvent .evTime {
        font-size: 16px;
    }

    .sidebarSearch {
        padding: 30px 25px;
    }

    .sidebarSearch .searchTitle {
        font-size: 20px;
        font-family: 'agletsans-regular';
        color: white;
    }

    .sidebarSearch .input-group-text {
        border-radius: 0;
        background-color: white;
    }

    .sidebarSearch input {
        border: none;
    }

    .sidebarSearch label {
        font-size: 16px;
        color: white !important;
    }

} /* =============== SIDEBAR MODULE END =============== */

@media /* =============== STUDENT LIFE START =============== */ {
    .studentLife .title {
        font-family: 'agletsans-regular';
        font-size: 32px;
    }

    .studentLife .subTitle {
        font-family: Arial;
        font-size: 18px;
    }

    .studentLifeContent {
        margin-bottom: 120px;
    }

    .studentLifeContent .lifeImages {
        width: 100%;
    }

    .apprenticeships .content,
    .studentLifeContent .content {
        padding: 0px 100px;
    }

    .apprenticeships .image img {
        width: 100%;
    }

    .studentLifeContent .title {
        font-size: 35px;
        font-family: 'agletsans-regular';
        margin-bottom: 20px;
    }

    .studentLifeContent .description {
        font-size: 16px;
        font-family: Arial;
    }

    .studentLifeContent .iframe-header {
        height: 70vh;
    }

    .studentLifeContent .iframe-header .iframe-image {
        min-width: 624px;
        object-fit: cover;
    }

    .studentValues {
        padding: 50px;
    }

    .studentValues .values {
        border-bottom: 1px solid white;
    }

    .studentValues .values div {
        margin: 25px 0px;
    }

    .studentValues .valueMain,
    .studentValues .valueNumber,
    .studentValues .valueTitle,
    .studentValues .valueDescription {
        color: white;
    }

    .studentValues .valueMain {
        text-align: center;
        font-size: 35px;
        font-family: 'agletsans-regular';
        margin-bottom: 20px;
    }

    .studentValues .valueNumber {
        font-size: 40px;
        font-family: 'agletsans-regular';
    }

    .studentValues .valueTitle {
        font-size: 35px;
        font-family: 'shadowsintolight';
    }

    .studentValues .valueDescription {
        font-size: 18px;
        font-family: Arial;
    }

    .studentLifeCode .title {
        font-size: 35px;
        font-family: 'agletsans-regular';
    }

    .studentLifeCode .description {
        font-size: 16px;
        font-family: Arial;
    }

    .studentLifeCode .tabcontent {
        padding: 20px 0px;ku
    }

    .studentLifeBlock a {
        text-decoration: none;
        color: white;
        background: #BA1B83;
        width: 100%;
        height: 160px;
        display: block;
        font-size: 18px;
        font-family: 'agletsans-regular';
        padding: 15px 20px;
    }

    .studentLifeBlock i {
        position: absolute;
        bottom: 15px;
        right: 30px;
        color: white;
    }

    @media only screen and (min-width: 1800px) {
        .apprenticeships .content,
        .studentLifeContent .content {
            padding: 50px 200px;
        }
    }

    @media only screen and (max-width: 1200px) {
        .apprenticeships .content,
        .studentLifeContent .content {
            padding: 0px 50px;
        }
    }

    @media only screen and (max-width: 768px) {
        .studentLifeContent .iframe-header {
            height: 20vh;
        }

        .apprenticeships .content,
        .studentLifeContent .content {
            padding: 15px 15px 0px 15px;
        }
    }
} /* =============== STUDENT LIFE END =============== */

@media /* =============== APPRENTICESHIPS START =============== */{
    .apprenticeships .title,
    .appVacancies .title {
        font-size: 32px;
        font-family: 'agletsans-regular';
    }

    .apprenticeships .subTitle,
    .appVacancies .desc {
        font-size: 18px;
        font-family: Arial;
    }

    .tableTitle {
        font-size: 16px;
        font-family: 'agletsans-regular';
    }

    .appGuide .iframe-header {
        height: 100%;
    }

    .appGuide .guideTitle {
        font-size: 28px;
        font-family: 'agletsans-regular';
    }

    .appGuide .guideContent {
        font-size: 18px;
        font-family: Arial;
        margin-bottom: 50px;
    }

    .appGuide .guideButton {
        padding: 20px 20px;
        background-color: white;
        color: black;
        display: inline;
    }

    .appGuide a.guideButton {
        text-decoration: none;
    }

    .appGuide .guideButton div {
        margin-left: 20px;
        border-bottom: 2px solid black;
        display: inline;
    }

    .appFAQ .faqTitle {
        font-size: 32px;
        font-family: 'agletsans-regular';
    }

    .appFAQ .faqDesc {
        font-size: 18px;
        font-family: Arial;
    }

    .appFAQ .faqViewAll a {
        font-size: 16px;
        font-family: Arial;
        font-weight: bold;
        text-decoration: none;
        color: black;
    }

    .appVacancies .btn {
        color: black;
        background-color: #DE7935;
        font-weight: bold;
        height: auto;
        text-decoration: none;
        border-radius: 0px;
        border: none;
        font-size: 14px;
    }

    .apprenticeships .accordion-body .title {
        font-weight: bold;
        font-size: 16px !important;
        font-family: 'agletsans-regular';
        margin-bottom: 0px !important;
    }

    .apprenticeships .accordion-body a {
        text-decoration: underline;
    }

    .apprenticeships .accordion-body a.btn {
        text-decoration: none;
    }

    .apprenticeships .accordion-body>div {
        margin-bottom: 5px;
    }

    @media only screen and (max-width: 768px) {
        .apprenticeships .title {
            margin-bottom: 25px;
        }

        .apprenticeships .accordion-body a.btn {
            display: block;
        }
    }
} /* =============== APPRENTICESHIPS END =============== */

@media /* =============== EVENTS START =============== */ {
    .eventItem .itemDate {
        background-color: #ba1b83;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        padding: 2vmin 3.5vmin;
        text-transform: uppercase;
    }

    .eventItem .itemTime {
        position: absolute;
        bottom: 20px;
    }

    .eventItem .itemDay {
        font-size: 35px;
    }

    .eventItem .itemMonth {
        font-size: 18px;
    }

    .eventItem .itemDay,
    .eventItem .itemMonth {
        color: white;
        font-family: 'agletsans-regular';
    }

    .eventItem .enLink {
        position: relative;
        text-decoration: none;
    }

    .eventItem .enLink .itemTitle,
    .newsItem .enLink .itemTitle {
        font-size: 28px;
        font-family: 'agletsans-regular';
        color: white;
    }

    .eventItem .enLink .successInfo-MD {
        background-color: #ba1b83;
    }

    .eventItem .enLink i {
        color: white;
    }
} /* =============== EVENTS END =============== */