﻿/* important announcement strip */

.important-announcement{background: #DE1B5C; color: #fff; padding: 12px; text-align:center; margin-bottom: 1px;}
.important-announcement a{color: #fff; text-decoration:underline;}

.header__logo:hover,
.header__logo:focus,
.header__logo:active{ opacity: .5;}


.nav--inline a:hover,
.nav--inline a:focus,
.nav--inline a:active {text-decoration:underline; color: #007ca7; opacity: 1;}


        
.nav--selector a:hover,
.nav--selector a:focus,
.nav--selector a:active{border-bottom: 1px solid #007ca7; color: #007ca7; opacity: 1; text-decoration:none;}
.nav--selector a.active {opacity: 1;}
.nav--selector a.active:hover,
.nav--selector a.active:focus,
.nav--selector a.active:active{text-decoration:none; border-color: #007ca7;}


.nav__sub a:hover,
.nav__sub a:focus,
.nav__sub a:active {color: #fff; text-decoration:underline;}

.js-search-toggle:hover .icon-magnifier:hover,
.js-search-toggle:focus .icon-magnifier,
.js-search-toggle:active .icon-magnifier{stroke: #007ca7; opacity:1;}



/* Specific banner styles */

.slide.wonder:before{width:55%; background: linear-gradient(to right, rgba(26,41,107,1), rgba(26,41,107,0));}
.slide.wonder .slide__text{padding-right: 64%;}

.slide.blueText h1, 
.slide.blueText h2{color: #18194f; text-shadow:none;}
.slide.blueText p{color: #18194f; text-shadow:none;}




.slide .button  {background-image: url("/siteelements/images/base/internal/cta-icons/white/bg-arrow-right-simple-white.png"); background-repeat:no-repeat; background-size: 18px; background-position: right 10px top 50%; padding-right: 50px;}
.button--secondary:hover,
.button--secondary:focus,
.button--secondary:active,
.card__button:hover,
.card__button:focus,
.card__button:active{background-color: #434341;}


body .clearing.primary-cta{background: #DE1B5C; background-image: none!important;}
body .clearing.primary-cta:hover{background: #434341;}



.clearing.primary-cta .primary-cta__text p{margin-bottom: 1em;}
.clearing.primary-cta h1,
.clearing.primary-cta h2,
.clearing.primary-cta h3,
.clearing.primary-cta h4,
.clearing.primary-cta h5{font-size: 2.8rem; line-height: .9em; margin: 0 0 30px 0;}
.clearing.primary-cta p{font-size: 1.2em; font-weight:normal; line-height: 1.1em; width: 300px;}
.clearing.primary-cta:before{width: 32%;}
.clearing.primary-cta .primary-cta__text {background: transparent url("/home/homepagefeaturebox/icon-telephone-handset-ringing.gif") no-repeat 15px 6px; background-size: 140px; padding: 140px 35px 35px 35px; }
.clearing.primary-cta .primary-cta__text .learn-more {background: #fff; color: #DE1B5C; padding: 8px;}
.clearing.primary-cta .primary-cta__text .icon {stroke: #DE1B5C;}
.clearing.primary-cta:hover .primary-cta__text .learn-more{text-decoration:none;}

.clearing.slide.plainBackground h1,
.clearing.slide.plainBackground h2{line-height: 5.5rem; font-size: 5.5rem; margin-bottom: 20px;}
.clearing.slide.plainBackground p{line-height: 3.5rem; font-size: 3.4rem; width: 100%; margin-bottom: 30px;}
.clearing.slide .button {border: 2px solid #fff;}



.clearing.welcome.slide.plainBackground h1,
.clearing.welcome.slide.plainBackground h2{text-shadow: none; line-height: 3rem; font-size: 2rem;}
.clearing.welcome.slide.plainBackground p{line-height: 3.5rem;font-size: 3.4rem; margin-top: 0; margin-bottom: 40px; max-width: 100%;}

body .clearing.welcome.slide.plainBackground .column{padding-left: 0;}
body .clearing.welcome.slide.plainBackground .row{max-width: 36%; margin: 0; }
body .clearing.welcome.slide.plainBackground .slide__text{padding-left: 10%; padding-right: 10%;margin-left: 0; left: 0;background: linear-gradient(to right, #18194f , #009bbd);}




.UniOfYear.slide h1,
.UniOfYear.slide h2{text-shadow: none; line-height: 3rem; font-size: 2rem;}
.UniOfYear.slide p{line-height: 4rem;font-size: 4rem; margin-top: 0; margin-bottom: 30px; color: #149ebd;}


body .slide.gradientBackground {background-color: transparent}



.cfinder__row input[type="search"], .cfinder__row select {background-color: #efefef; padding: 16px 12px; border: 1px solid #18194f; color: #18194f;}
.cfinder__row input[type="search"]:focus, .cfinder__row select:focus{border-color:#007ca7; color: #18194f; background:none;}
.column .card__text p{color: #18194f;}




.banner {background: linear-gradient(to top right, #18194f, #009bbd);}

.welcome.slide.gradientBackground{background-color:transparent;}
.welcome.slide.gradientBackground h1,
.clearing.welcome.slide.gradientBackground h2{text-shadow: none; line-height: 1.5rem; font-size: 1.3rem; margin-bottom: 20px;}
.clearing.welcome.slide.gradientBackground p{line-height: 3.5rem;font-size: 3.4rem; margin-top: 0; margin-bottom: 40px; max-width: 100%;}
.clearing.welcome.slide.gradientBackground .button {border: none; background-image: url("/siteelements/images/base/internal/cta-icons/white/bg-arrow-right-simple-white.png"); background-repeat:no-repeat; background-size: 18px; background-position: right 10px top 50%; padding-right: 50px;}
.clearing.welcome.slide.gradientBackground .column{padding-left: 0;}
.clearing.welcome.slide.gradientBackground .row{max-width: 40%; margin: 0; }
.clearing.welcome.slide.gradientBackground .slide__text{padding-left: 10%; padding-right: 10%;margin-left: 0; left: 0;}







.clearing.slide.studentsAndGradient h1,
.clearing.slide.studentsAndGradient h2{color: #fff; text-shadow:none; font-size: 3.2rem; line-height: 3.5rem; margin-bottom: 22px; text-shadow: 2px 2px #000;}
.clearing.slide.studentsAndGradient p{color: #fff; font-size: 2.2rem; line-height: 2.5rem; text-shadow: 2px 2px #000;}




.slide.noOverlay:before{width: 0;}
.slide.PG-Roadshow .button {background: #fff; color: #434341;}

/*Add additional styles after here */
.offcanvas-wrap {max-width: 1980px; margin: 0 auto;} 

.edge--grey {background: #eee;}

/* UI Card Specific Styles ulzgw 23/05/2017 */

.card__footer {padding-top:2px;}

.card__footer{background: #005597;}
.card__footer span{margin: 0; border:none; color: #fff;}
.card__footer .icon {stroke: #fff;}

.column.StudentServices .card__footer{background: #2f8373;}
.column.StudentServices .card__text {background: #fff url("/siteelementshomepage/images/bg/bg-studentservices.png") no-repeat left 0  bottom 0px;}
.column.StudentServices .card__footer > span {border:none;}



.card--single:focus .card__text {margin-top: -50px; padding-bottom: 95px;}
.card--single:focus .card__text__title{text-decoration:underline;}
.card__footer:focus .learn-more,
.card--single:focus .card__footer .learn-more,
.card--video .card__footer:focus {text-decoration:underline;}


.card__date{color: #007ca7;}



.card--video .card__footer{text-decoration:none; text-align:right; color: #fff; position:absolute; bottom: 0; left: 0; right: 0; padding: 18px;}
.card--video .card__footer:hover{text-decoration:underline;}


.column.automated .card{margin-bottom: 0;}
.column.automated .card-tag--events,
.column.automated .card-tag--news,
.column.automated .card-tag--research{background: #005597;}


/***** tweaked to allow for "accommodation" 16/04/18 ulzgw *****/
/*primary-cta__text {min-height: 297px; border-width: 4px;}*/
body .primary-cta__text {min-height: 377px; min-width: 377px; border-width: 4px; padding: 55px 35px 35px 35px;}


.column.automated .card__footer {
  position: absolute;
  bottom: 5px; 
  left: 1.25rem; 
  right: 1.25rem;
  float: right;
  width: auto;
  background: #fff;
  padding: 4px 20px 18px 20px;
  z-index: 100;}

.column.automated .card__footer span{margin: 0; border-top: 1px solid #1A296B; color: #1A296B;}
.column.automated .card__footer a{display:block;} 
.column.automated .card__footer:hover span{text-decoration:underline;}
.column.automated .card__footer .icon {stroke: #1A296B;}

footer h2 {font-size: 22px;}

footer address p{color: #fff;}
footer a{color: #fff; text-decoration:none;}
footer a:hover,
footer a:focus,
footer a:active{color: #fff; text-decoration:underline;}

footer a.CTA{display:block; background: #fff url("/siteelementshomepage/images/icons/icon-right-arrow.png") no-repeat; background-position: top 50% right 10px; color: #18194f; padding: 12px 30px 12px 10px; border: 2px solid transparent;}
footer a.CTA:hover,
footer a.CTA:focus,
footer a.CTA:active{background-image:  url("/siteelementshomepage/images/icons/icon-right-arrow-white.png"); background-color: transparent; border-color: #fff; color: #fff; text-decoration:none;}

footer .footer-bottom img{width: 110px; height: auto;}


@media only screen and (max-width: 1698px) {

body .clearing.primary-cta .primary-cta__text{background-size: 120px; padding-top: 120px;} 
body .clearing.primary-cta h1,
body .clearing.primary-cta h2,
body .clearing.primary-cta h3,
body .clearing.primary-cta h4,
body .clearing.primary-cta h5 {font-size: 2rem; }
body .clearing.primary-cta .sys_CTA-preText{width: 90%; display:block; word-wrap: break-word;}

}



@media screen and (max-width: 1438px){

    

  
   
    
    
    
    
    
    
}


@media screen and (max-width: 1350px){
    
body .clearing.welcome.slide.gradientBackground .row{max-width: 34%;}
body .clearing.welcome.slide.gradientBackground h1,
body .clearing.welcome.slide.gradientBackground h2{text-shadow:none; line-height: 1.2rem; font-size: 1.2rem; margin-bottom: ;}
body .clearing.welcome.slide.gradientBackground p{text-shadow:none; font-size: 2rem!important; line-height: 2.5rem; margin-bottom: 20px;}


    
    
    

}


@media screen and (max-width: 1190px){
.column.automated {margin-bottom: 35px;}
.primary-cta{width: 38%;}    
    
    /***** added to allow for "accommodation" 16/04/18 ulzgw *****/
body .primary-cta__text {min-height: 70%;width: 100%; min-width: 100%; padding: 35px 25px 35px 25px;}
body .primary-cta__text h2 {font-size:2.1em; line-height: 1.2em;}
    
body .clearing.plainBackground.slide h1,
body .clearing.plainBackground.slide h2{line-height: 5rem;font-size: 5rem; width: 100%; max-width: 100%;}
body .clearing.plainBackground.slide p{font-size: 3rem; width: 100%; max-width: 100%;}

body .clearing.studentsAndGradient.slide h1,
body .clearing.studentsAndGradient.slide h2{line-height: 5rem;font-size: 3rem; width: 100%; max-width: 100%;}
body .clearing.studentsAndGradient.slide p{font-size: rem; width: 100%; max-width: 100%;}

body .clearing.welcome.slide.gradientBackground h1,
body .clearing.welcome.slide.gradientBackground h2{text-shadow: 1px 2px 1px #000;}
body .clearing.welcome.slide.gradientBackground p{text-shadow: 1px 2px 1px #000;}
   
    
.UniOfYear.slide h1,
.UniOfYear.slide h2{text-shadow: none; line-height: 3rem; font-size: 1.6rem;}
.UniOfYear.slide p{line-height: 3rem;font-size: 3rem; margin-bottom: 20px; color: #149ebd;}

.slide .button  {padding: 10px 40px 10px 10px; background-position: right 8px top 50%; padding-right: 36px;}
    
}




@media screen and (max-width: 1098px){
body .primary-cta__text {padding: 20px;}
body .primary-cta__text h2 {font-size:1.8em; line-height: 1.2em;}

body .clearing.plainBackground.slide h1,
body .clearing.plainBackground.slide h1{line-height: 4rem;font-size: 4rem;}
body .clearing.plainBackground.slide p{font-size: 3rem; line-height: 3rem;}

body .clearing.welcome.slide.gradientBackground{background-image:none!important;}    
body .clearing.welcome.slide.gradientBackground .row{max-width: 100%; margin: 0; }
body .clearing.welcome.slide.gradientBackground .slide__text *{color: #fff; text-shadow:none;}  

    
body .clearing.studentsAndGradient.slide h1,
body .clearing.studentsAndGradient.slide h2{line-height: 2.8rem;font-size: 2.6rem;}
body .clearing.studentsAndGradient.slide p{font-size: 3rem; line-height: 2.2rem;}
 
    
.slide.wonder:before{width:70%;}
.slide.wonder .slide__text{padding-right: 50%;}
    
    
}


@media screen and (max-width: 998px){
body .primary-cta{padding: 30px;}
body .primary-cta__text {padding: 14px; min-height: 55%;}
body .primary-cta__text h2 {font-size:1.5em; line-height: 1.2em;}

body .clearing.plainBackground.slide h1,
body .clearing.plainBackground.slide h1{line-height: 3.3rem;font-size: 3.3rem;}
body .clearing.plainBackground.slide p{font-size: 2rem; line-height: 2.4rem;}
  
    
 


    
    
}

@media screen and (max-width: 740px){
body .primary-cta  {width: 100%; position:relative; top: 0; padding: 25px;}
body .primary-cta__text {min-width: 50%; height: 80%; padding: 25px; margin: auto auto;}

body .clearing.plainBackground.slide h1,
body .clearing.plainBackground.slide h1{line-height: 2rem;font-size: 2.5rem;}
body .clearing.plainBackground.slide p{font-size: 2rem; line-height: 2rem;}
 
    .slide.wonder:before{width:60%;}


 
}
    
    
    





@media only screen and (max-width: 40.0525em) {
.slide.ClearingBanner:before{display:none;}

body .clearing.welcome.slide.gradientBackground{background: transparent url("/home/homepagebannerassets/images/uonhomepagebanner-polaroids.jpg") 100% 50% no-repeat!important; background-size: cover!important;}
body .clearing.welcome.slide.gradientBackground .slide__text h1,
body .clearing.welcome.slide.gradientBackground .slide__text h2{line-height: 1rem; font-size: 1rem; color: #007ca7;}
body .clearing.welcome.slide.gradientBackground .slide__text p{line-height: 1.25rem;font-size: 1.25rem!important; color: #18194f;}
    
body .clearing.welcome.slide.gradientBackground .slide__text *{}  
body .clearing.welcome.slide.gradientBackground .slide__text{padding: 15px;}    
    
body .clearing.plainBackground.slide h1,
body .clearing.plainBackground.slide h2{line-height: 2.2rem;font-size: 2rem;margin-bottom: 10px;}
body .clearing.plainBackground.slide p{color: #000; font-size: 1.5rem; line-height: 1.5rem; margin-bottom: 10px;}
    
body .clearing.studentsAndGradient.slide h1,
body .clearing.studentsAndGradient.slide h2{color: #1A296B; line-height: 2.2rem;font-size: 2rem;margin-bottom: 10px; text-shadow: none;}
body .clearing.studentsAndGradient.slide p{color: #000; font-size: 1.5rem; line-height: 1.5rem; margin-bottom: 10px; margin-top: 0; text-shadow: none;}
    
    
    
.slide.ClearingBanner h1,
.slide.ClearingBanner h2,
.slide.ClearingBanner h3,
.slide.ClearingBanner h4,
.slide.ClearingBanner h5 {font-size:1.1rem;}
.slide.ClearingBanner p {margin: .3em 0 .8em 0;font-size:1.8rem; line-height: 1.6rem; color: #009bbd; width: auto;}
    
     
    
      .UniOfYear.slide h1,
.UniOfYear.slide h2{text-shadow: none; line-height: 1.4rem; font-size: 1.2rem;}
.UniOfYear.slide p{line-height: 2.3rem;font-size: 2rem; margin-top: 6px; margin-bottom: 20px; color: #007ca7;}
  
    
.slide.wonder .slide__text{padding-right: 10%;}

    
/* body .clearing.studentsAndGradientslide{height: 400px;}
body .clearing.studentsAndGradientslide.slide h1,
body .clearing.studentsAndGradientslide.slide h2{line-height: 2.2rem;font-size: 2rem;margin-bottom: 10px;}
body .clearing.studentsAndGradientslide.slide p{font-size: 1.5rem;}
body .clearing.studentsAndGradientslide.slide .slide__text{background:transparent; top: 120px;}
body .clearing.studentsAndGradientslide.slide .slide__text h1,
body .clearing.studentsAndGradientslide.slide .slide__text p{color: #fff;}
body .clearing.studentsAndGradientslide.slide .slide__text p {margin-bottom: .5em;}    
    
body .clearing.plainBackground .controls {
    position: absolute;
    bottom: 0;
    z-index: 999;
}*/
      
    
/*body .clearing.plainBackground.slide{height: 400px;}
body .clearing.plainBackground.slide h1,
body .clearing.plainBackground.slide h2{line-height: 2.2rem;font-size: 2rem;margin-bottom: 10px;}
body .clearing.plainBackground.slide p{font-size: 1.5rem;}
body .clearing.plainBackground.slide .slide__text{background:transparent; top: 120px;}
body .clearing.plainBackground.slide .slide__text h1,
body .clearing.plainBackground.slide .slide__text p{color: #fff;}
body .clearing.plainBackground.slide .slide__text p {margin-bottom: .5em;}  */  
    
}








@media only screen and (max-width: 26.0525em) {
    
  .clearing .button{display:block;}   
  .clearing .slide__text{width: 100%;} 
    
   
}

