  ﻿.hidden {
  display: none !important;
}

.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after {
  clear: both;
}


html {
  -webkit-box-sizing:border-box;  /*Safari/Chrome*/
  -moz-box-sizing:border-box;  /*Firefox*/
  box-sizing:border-box;
  color: #000000;
  font-style: normal;
  font-weight: 300;
  font-size: 100%;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:before, *:after {
  box-sizing: inherit;
}



#fullWidthMainContentSection h2,
h2 {
  font-size:1.2em!important;
  font-weight:bold!important;
  margin-top:0;
  margin-bottom:0.25em;
  clear:none!important;
}

h3 {
  font-size:1.1em!important;
  margin-top:0;
  margin-bottom:0.50em;
}


.page {
  max-width:1000px;
  margin:0 auto;
}

#courses {

    box-sizing: border-box;

}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
   .hideIE {
     display:none;
   }

   .course-controls .large-6 {width:100%!important;}
}

.tags {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 1.5rem 0 0 3px;
}
.tags div {
  font-weight: 600;
  margin-right: .5rem;
}
.tags .tag {
  display: flex;
  cursor: pointer;
  margin-bottom: .5rem;
  margin-right: .5rem;
  color: #fff;
  background: transparent;
  padding: .2rem .6rem .2rem .6rem;
  font-weight: 600;
  font-size: .9rem;
  transition: all .2s ease;
  border-radius: 0.25rem;
  overflow: hidden;
  border:2px solid #fff;
}
.tags .tag:after {
  content: 'x';
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  max-width: 0;
  transition: all .2s ease;
}
.tags .tag.active:after {
  opacity: 1;
  visibility: visible;
  max-width: 2rem;
  margin-left: .4rem;
}
.tags .tag:hover, .tags .tag.active {
  background: #fff;
  color:#AB42AD;
}

.course-list {
  padding-left:0;
}
.course {
  list-style-type: none;
  margin:0;
  padding:1.5em 0;
  border-bottom:1px solid #ccc;
}

.course__title {padding:0!important;}

.course__title,
.course__ucasTariff,
.course__btec-grades,
.bold
{
  font-weight:bold;
}

.course__ucasTariff {
  margin-right:0.2em;
}

.course__btec-grades {
  margin-right:0.2em;
}

.course__thumb {
  display:none;
  object-fit: cover;
}

@media screen and (min-width: 761px) {
  .course__thumb {
    /*display:none;*/
    display:block;
    float:left;
    width:178px;
    height:100px;
    object-fit: cover;
  }
  .course__title,
.course__sub-title,
.course__entry-req {
  padding:0!important;
  margin-left:188px;
  display: block;
  clear:unset!important;
}
}

.pagination {
  padding: 1.5em 0;
}

.pagination > li {
  list-style-type: none;
  display:inline-block;
  border:1px solid #f5f5f5;
  color:#AB42AD;
  text-align: center;
  margin-right:5px;
}

.pagination > li.active {
  border:1px solid #f5f5f5;
  background-color:#AB42AD;
  color:#fff;

}

.pagination > li:hover {
  border:1px solid #AB42AD;
}
.pagination > li:focus-within {
  border:1px solid #AB42AD;
}

.pagination > li.active > a {
  color:#fff;
}

.pagination > li > a {
  display:inline-block;
  padding:5px;
  min-width:25px;
  text-decoration:none;
  color:#AB42AD;
}

.course-controls {
  background-color:#AB42AD;
  padding:1em 0;
  border-radius: 5px;
}

.standout-panel {
  background-color:#AB42AD;
  padding:1em;
  margin-top:1em;
  color:#fff;
}

.standout-panel--stuck {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 2em;
    opacity: 0.9;
}

.standout-panel h3 {
  margin-bottom:0;
}

.course__title > a {
color: #AB42AD;

}

.course__title > a:hover {
color: #AB42AD;
text-decoration: underline;

}

.course__title > a:focus {
color: #AB42AD;
text-decoration: underline;

}
.clearing-search {
  width:100%;
  font-family: 'Open Sans Condensed', sans-serif;
  margin-bottom:2em;
}
@media screen and (min-width: 761px) {
  .clearing-search {
    margin-bottom:0.5em;
  }
}

.clearing-search-label {
  display:inline-block;
  width:100%;
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight:bold;
  color:#fff;
  margin-bottom:0.5em;
}

.clearing-btn {
  width:24%;
  background-color:#9d0932;
  color:#fff;
  border:2px solid #9d0932;
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight:bold;
  text-transform: uppercase;
  cursor:pointer;
}

.clearing-btn:focus {outline:0;}

.clearing-btn,
.clearing-search,
.filter-tariff {
  box-sizing:border-box;
  display:inline-block;
  padding:10px;
}

.filter-tariff{
  width: -webkit-fill-available;
  max-width: 100px;
}

/**
 * Inline footnotes references
 * 1. Increment the counter at each new reference
 * 2. Reset link styles to make it appear like regular text
 */
[aria-describedby="footnote-label"] {
  text-decoration: none; /* 2 */
  color: inherit; /* 2 */
  cursor: default; /* 2 */
  outline: none; /* 2 */
}

/**
 * Actual numbered references
 * 1. Display the current state of the counter (e.g. `[1]`)
 * 2. Align text as superscript
 * 3. Make the number smaller (since it's superscript)
 * 4. Slightly offset the number from the text
 * 5. Reset link styles on the number to show it's usable
 */
[aria-describedby="footnote-label"]::after {
  content: '\2020'; /* 1 */
  vertical-align: super; /* 2 */
  font-size: 0.7em; /* 3 */
  margin-left: 2px; /* 4 */
  color: #9d0932;
  text-decoration: none; /* 5 */
  cursor: pointer; /* 5 */
}

[aria-describedby="footnote-label"]:hover::after {
  text-decoration: none; /* 5 */

}

.footnotes {
  border-top:1px solid #ccc;
  padding-top:0.5em;
  padding-left:0;
}

.footnotes > li {
  list-style-type: none;
}

.footnotes > li:first-of-type::before {
  content: '\2020'; /* 1 */
  color: #9d0932;
  margin-right:0.5em;
}

.visually-hidden {display:none;}

#genericMainContentSection ul, #fullWidthMainContentSection ul {
    margin: auto;
}

.text-white {
color:#fff;
}

.text-small {
font-size:0.7em;
margin-left: 10px;
}

a.text-small:hover{
text-decoration:underline;
color:white!important;
}

a.text-small:focus{
text-decoration:underline;
color:white!important;
}

@media screen and (min-width: 761px) {
  .course-controls .large-6 {
    width:50%;
  }
  .mobile-contact-btns {
  display:none;
}
}

.mobile-contact-btns {
  float:right;
}


    
.sticky-cta-container {
    position:relative;
    background: transparent;
    margin-top:1em;
}

.sticky-cta {
    background:rgba(77, 77, 77, 0.95);
    padding: 15px;
    width: 100%;
    z-index: 1000;
    position: fixed;
    left:0;
    right:0;
    bottom: -121px;
    opacity: 0;
    box-sizing: border-box;
    transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
    
.sticky-cta p,
.sticky-cta a {
    color: #fff;
}

.sticky-cta a {
    font-weight:bold;
}

@media screen and (min-width: 761px) {
  .mobile-only {
    display:none;
  }

  .mobile-icon-btn {
    display:block;
  }
    .mobile-icon-btn img{
    width:50px;
    height:50px;
  }
}

@media screen and (max-width: 762px) {
  .desktop-only {
    display:none;
  }

  .no-items {
    min-height: 20em;
  }

  .sticky-cta .mobile-only,
  .no-items .mobile-only {
    display: flex;
    flex-direction: row;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
}
}



.mobile-icon-btn {
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    margin: 0 1em;
    font-size: 0.8em;
}


.mobile-icon-btn img {
  margin-bottom:10px;
    width: 50px;
    display: block;
    text-align: center;
}

@media (max-width: 767px){
  #mainContentColumn {
    width: 100% !important;
    padding:10px;
  }
}

.course__synonyms {
  display:none;
}

@keyframes highlight {
    0% {
        background: #ffff99; 
    }
    100% {
        background: none;
    }
}

.highlight {
    animation: highlight 2s;
}

.no-items {
 min-height:10em;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 text-align:center;
}