Difference between revisions of "Template:BNU-CHINA/CSS/main"

Line 701: Line 701:
  
 
.box-content {
 
.box-content {
 +
    font-family: 'Computer Modern Sans', sans-serif;
 +
}
 +
 +
 +
.filter-button-group li.checked a {
 +
    color: #D3853D;
 +
}
 +
 +
/*****
 +
    Responsive: iPad
 +
              *****/
 +
 +
@media screen and (max-width: 1024px) {
 +
 +
    .sub-header .sub-nav li a.btn-filter {
 +
        font-size: 18px;
 +
        padding: 4px 2px;
 +
    }
 +
 +
    #mw-content-text, body {
 +
        background: #f9f9f9;
 +
    }
 +
 +
    .container {
 +
        width: 100%;
 +
        margin: 0;
 +
        padding: 0;
 +
    }
 +
 +
    .content.container {
 +
        margin: 0;
 +
    }
 +
 +
    .navbar-siren {
 +
        box-shadow: 0 4px 0 black;
 +
        background-color: #f9f9f9;
 +
        z-index: 999;
 +
    }
 +
 +
    .navbar-siren .container {
 +
        padding: 0;
 +
        margin: 0 0 0 0;
 +
    }
 +
 +
    .navbar-siren .navbar-header {
 +
        text-align: center;
 +
    }
 +
 +
    .navbar-siren .navbar-nav > li {
 +
 +
        font-size: 15px;
 +
        box-shadow: none;
 +
    }
 +
 +
    .navbar-siren .navbar-nav > li.active {
 +
        box-shadow: none;
 +
    }
 +
 +
    .navbar-siren .navbar-nav > li svg {
 +
        margin: 8px auto 4px auto;
 +
        width: 32px;
 +
        height: 32px;
 +
    }
 +
 +
    article.col-md-12 {
 +
        margin: 0;
 +
        box-shadow: none;
 +
        width: 100%;
 +
    }
 +
 +
    .wrapper-text h1 {
 +
        font-family: "Raleway Thin", sans-serif;
 +
    }
 +
 +
    .wrapper .wrapper-text {
 +
        padding: 10% 15%;
 +
    }
 +
 +
    .wrapper .wrapper-text h1 {
 +
        font-size: 36px;
 +
    }
 +
 +
    .wrapper .wrapper-text p {
 +
        font-size: 18px;
 +
        line-height: 24px;
 +
        padding: 12px 24px;
 +
    }
 +
 +
    .content > article {
 +
        opacity: 1;
 +
        background-color: #fff;
 +
    }
 +
 +
    article p {
 +
        font-size: 18px;
 +
    }
 +
 +
    article h2 {
 +
        font-size: 32px;
 +
    }
 +
 +
    article h3 {
 +
        font-size: 24px;
 +
    }
 +
 +
    article h4 {
 +
        font-size: 18px;
 +
    }
 +
 +
    article h5 {
 +
        font-size: 18px;
 +
        color: #278A75;
 +
    }
 +
 +
}
 +
 +
@media screen and (min-width: 640px) and (max-width: 1024px) {
 +
    .navbar-siren .container {
 +
        text-align: center;
 +
    }
 +
 +
    .navbar-siren .navbar-right {
 +
        display: inline-block;
 +
        float: none !important;
 +
        margin: auto;
 +
    }
 +
 +
    .content article {
 +
        min-width: 640px;
 +
        padding: 32px 64px;
 +
    }
 +
 +
    .navbar-siren .navbar-nav > li {
 +
        vertical-align: top;
 +
    }
 +
 +
    .caret {
 +
        font-size: 6px;
 +
    }
 +
}
 +
 +
@media screen and (max-width: 640px) {
 +
 +
    .content article {
 +
        padding: 0 16px;
 +
    }
 +
 +
    article p, article blockquote {
 +
        font-size: 14px;
 +
    }
 +
 +
    .navbar-siren .navbar-nav > li {
 +
        height: 50px;
 +
        font-size: 14px;
 +
    }
 +
 +
    .navbar-siren .navbar-nav > li svg {
 +
        display: none;
 +
    }
 +
 +
    .navbar-siren .navbar-nav > li a:first-child {
 +
        padding-left: 15px;
 +
    }
 +
 +
    .navbar-siren .navbar-nav > li a {
 +
        margin-top: 10px;
 +
        padding: 10px 2px;
 +
    }
 +
 +
    .navbar-siren {
 +
        height: auto;
 +
        border-bottom: 1px solid black;
 +
    }
 +
 +
    .caret {
 +
        display: none;
 +
    }
 +
}
 +
 +
/*****
 +
    Responsive: PC
 +
              *****/
 +
 +
@media screen and (min-width: 1024px) {
 +
 +
 +
    .navbar-siren .container {
 +
        background-image: url("https://static.igem.org/mediawiki/2015/9/9c/BNU-CHINA-logo.png");
 +
        background-size: auto 80%;
 +
        background-position: left center;
 +
        background-repeat: no-repeat;
 +
        width: 100% !important;
 +
    }
 +
 +
    .btn-filter:hover {
 +
        color: #D3853D;
 +
    }
 +
 +
    .btn-filter:hover::after {
 +
        content: "";
 +
        width: 100%;
 +
        height: 1px;
 +
    }
 +
 +
    .btn-filter::after {
 +
        transition: all 0.5s ease-out;
 +
    }
 +
 +
    .navbar-siren .navbar-nav > li {
 +
        transition: box-shadow 2s, background-color 0.25s;
 +
    }
 +
 +
    .navbar-siren .navbar-nav > li:hover {
 +
        transition: box-shadow 0.25s, background-color 0.25s;
 +
    }
 +
 +
    .navbar-siren .navbar-nav > li > a {
 +
        transition: color 0.25s;
 +
    }
 +
 +
    .navbar-siren .navbar-nav > li svg * {
 +
        transition: all 0.25s;
 +
    }
 +
 +
    .navbar-siren .navbar-nav li .dropdown-menu {
 +
        transition: visibility 0s, opacity 0.25s;
 +
    }
 +
 +
    .navbar-siren .navbar-nav li .dropdown-menu li > a::after {
 +
        transition: all 0.5s ease-out;
 +
    }
 +
 +
    .people .people-figure > p {
 +
        transition-property: all;
 +
        transition-duration: 0.6s;
 +
        transition-timing-function: ease-out;
 +
        transition-delay: 0s;
 +
    }
 +
 +
    .people .people-figure > p:hover {
 +
        transition-property: all;
 +
        transition-duration: 0.6s;
 +
        transition-timing-function: ease-out;
 +
        transition-delay: 0.75s;
 +
    }
 +
 +
    .people .people-avatar {
 +
        transition: all 0.6s ease-in-out;
 +
    }
 +
 +
    .people .people-figure .people-intro {
 +
        transition-property: all;
 +
        transition-duration: 0.6s;
 +
        transition-timing-function: ease-out;
 +
        transition-delay: 0s;
 +
    }
 +
 +
    .people .people-figure .people-intro:hover {
 +
        transition-property: all;
 +
        transition-duration: 0.6s;
 +
        transition-timing-function: ease-out;
 +
        transition-delay: 0.75s;
 +
    }
 +
 +
    .people .people-figure .people-intro > p {
 +
        transition-property: all;
 +
        transition-duration: 0.6s;
 +
        transition-timing-function: ease-out;
 +
        transition-delay: 0s;
 +
    }
 +
 +
    .people .people-figure .people-intro:hover > p {
 +
        transition-property: all;
 +
        transition-duration: 0.6s;
 +
        transition-timing-function: ease-out;
 +
        transition-delay: 0.75s;
 +
    }
 +
 +
    .wrapper .wrapper-text p {
 +
        transition: all 0.6s ease-in-out;
 +
    }
 +
 +
}
 +
/*****
 +
    Background
 +
            *****/
 +
body {
 +
    background-color: #E9DCBA
 +
}
 +
 +
.content.container {
 +
    margin-top: 24px;
 +
    margin-bottom: 32px;
 +
}
 +
 +
/*****
 +
    Animation
 +
            *****/
 +
@-webkit-keyframes rotating /* Safari and Chrome */
 +
{
 +
    from {
 +
        -ms-transform: rotate(0deg);
 +
        -moz-transform: rotate(0deg);
 +
        -webkit-transform: rotate(0deg);
 +
        -o-transform: rotate(0deg);
 +
        transform: rotate(0deg);
 +
    }
 +
    to {
 +
        -ms-transform: rotate(360deg);
 +
        -moz-transform: rotate(360deg);
 +
        -webkit-transform: rotate(360deg);
 +
        -o-transform: rotate(360deg);
 +
        transform: rotate(360deg);
 +
    }
 +
}
 +
 +
@keyframes rotating {
 +
    from {
 +
        -ms-transform: rotate(0deg);
 +
        -moz-transform: rotate(0deg);
 +
        -webkit-transform: rotate(0deg);
 +
        -o-transform: rotate(0deg);
 +
        transform: rotate(0deg);
 +
    }
 +
    to {
 +
        -ms-transform: rotate(360deg);
 +
        -moz-transform: rotate(360deg);
 +
        -webkit-transform: rotate(360deg);
 +
        -o-transform: rotate(360deg);
 +
        transform: rotate(360deg);
 +
    }
 +
}
 +
 +
.rotating {
 +
    -webkit-animation: rotating 2s linear infinite;
 +
    -moz-animation: rotating 2s linear infinite;
 +
    -ms-animation: rotating 2s linear infinite;
 +
    -o-animation: rotating 2s linear infinite;
 +
    animation: rotating 2s linear infinite;
 +
}
 +
 +
/*****
 +
    Header
 +
        *****/
 +
 +
.navbar-siren {
 +
    border: none;
 +
    border-radius: 0;
 +
    margin: 0;
 +
    background-color: rgba(255, 255, 255, .95);
 +
    box-shadow: 0 6px 0 rgba(255, 255, 255, .95);
 +
}
 +
 +
 +
/*****
 +
    Header: navigation
 +
                    *****/
 +
 +
.navbar-siren .navbar-nav {
 +
    display: table-row;
 +
}
 +
 +
.navbar-siren .navbar-nav > li {
 +
    float: none;
 +
    cursor: pointer;
 +
    display: table-cell;
 +
    vertical-align: middle;
 +
    font-family: "Raleway Thin", sans-serif;
 +
    font-size: 18px;
 +
    box-shadow: 0 6px 0 transparent;
 +
}
 +
 +
.navbar-siren .navbar-nav > li:hover {
 +
    box-shadow: 0 6px 0 #D3853D;
 +
    background-color: #D3853D;
 +
}
 +
 +
.navbar-siren .navbar-nav > li.active {
 +
    box-shadow: 0 6px 0 #D3853D;
 +
}
 +
 +
.navbar-siren .navbar-nav > li > a {
 +
    text-align: center;
 +
    color: #000;
 +
}
 +
 +
.navbar-siren .navbar-nav > li:hover > a {
 +
    color: white;
 +
}
 +
 +
.navbar-siren .navbar-nav > li > a:hover {
 +
    background-color: transparent;
 +
    color: white;
 +
}
 +
 +
.navbar-siren .navbar-nav > li svg {
 +
    margin: 8px auto 6px auto;
 +
    display: block;
 +
    width: 36px;
 +
    height: 36px;
 +
}
 +
 +
.navbar-siren .navbar-nav > li:hover svg * {
 +
    stroke: #fff;
 +
    fill: #D3853D;
 +
}
 +
 +
.navbar-siren .navbar-nav li .dropdown-menu {
 +
    min-width: 150%;
 +
    text-align: left;
 +
    padding: 0;
 +
    border: 0;
 +
    background-color: #D3853D;
 +
    border-radius: 0;
 +
    box-shadow: 1px 3px 2px rgba(120, 120, 120, .5);
 +
    display: block;
 +
    opacity: 0;
 +
    visibility: hidden;
 +
}
 +
 +
.navbar-siren .navbar-nav li:hover .dropdown-menu {
 +
    opacity: 1;
 +
    visibility: visible;
 +
}
 +
 +
.navbar-siren .navbar-nav li.open a.dropdown-toggle {
 +
    background: transparent;
 +
}
 +
 +
.navbar-siren .navbar-nav li a.dropdown-toggle {
 +
    background: transparent;
 +
}
 +
 +
.navbar-siren .navbar-nav li .dropdown-menu li > a {
 +
    font-family: "Raleway Thin", sans-serif;
 +
    font-size: 18px;
 +
    padding: 16px;
 +
    color: #fff;
 +
}
 +
 +
.navbar-siren .navbar-nav li .dropdown-menu li > a:hover {
 +
    background-color: #eb9745;
 +
}
 +
 +
.navbar-siren .navbar-nav li .dropdown-menu li > a:active {
 +
    background-color: #ffa44c;
 +
}
 +
 +
.navbar-siren .navbar-nav li .dropdown-menu li > a::after {
 +
    content: "";
 +
    display: block;
 +
    width: 0;
 +
    height: 1px;
 +
    background-color: transparent;
 +
}
 +
 +
.navbar-siren .navbar-nav li .dropdown-menu li > a:hover::after {
 +
    content: "";
 +
    display: block;
 +
    width: 100%;
 +
    height: 1px;
 +
    background-color: rgba(255, 255, 255, .5);
 +
}
 +
 +
/*****
 +
    Header: logo
 +
              *****/
 +
 +
.navbar-siren .navbar-header {
 +
    display: inline-block;
 +
}
 +
 +
.navbar-siren .navbar-logo {
 +
    height: auto;
 +
}
 +
 +
.navbar-siren .navbar-logo img {
 +
    width: 240px;
 +
}
 +
 +
/*****
 +
    Article
 +
        *****/
 +
 +
.content > article {
 +
    padding: 32px 64px;
 +
    background-color: #fff;
 +
    box-shadow: 0px 4px 6px rgba(75, 75, 75, 0.5);
 +
}
 +
 +
/*****
 +
    Article: reference
 +
                    *****/
 +
 +
.reference {
 +
    margin: 48px 0 24px 0;
 +
}
 +
 +
.reference:before {
 +
    color: #278A75;
 +
    font-family: 'Computer Modern Bright Semibold', sans-serif;
 +
    font-size: 24px;
 +
    content: "Reference";
 +
}
 +
 +
#globalWrapper .reference > ol, .reference > ol {
 +
    margin: 0;
 +
    padding: 0;
 +
    list-style-type: none;
 +
    counter-reset: counter;
 +
}
 +
 +
.reference > ol li {
 +
    font-family: 'Computer Modern Serif', serif;
 +
    margin: 6px 0;
 +
}
 +
 +
.reference > ol li::before {
 +
    margin-right: 4px;
 +
    letter-spacing: 2px;
 +
    display: inline-block;
 +
    font-family: 'Computer Modern Serif', serif;
 +
    content: '[' counter(counter) ']';
 +
    counter-increment: counter;
 +
}
 +
 +
/*****
 +
    Article: header
 +
                *****/
 +
 +
article > header.page-header {
 +
    text-align: center;
 +
    font-family: 'Computer Modern Bright Semibold', sans-serif;
 +
    letter-spacing: -1px;
 +
    font-style: italic;
 +
    border: none;
 +
}
 +
 +
article > header.page-header::before {
 +
    -webkit-animation: rotating 5s 0.1s cubic-bezier(0, 1.8, 1, .18) infinite;
 +
    -o-animation: rotating 5s 0.1s cubic-bezier(0, 1.8, 1, .18) infinite;
 +
    animation: rotating 5s 0.1s cubic-bezier(0, 1.8, 1, .18) infinite;
 +
 +
    content: "";
 +
    display: block;
 +
    border-radius: 24px;
 +
    position: relative;
 +
    width: 0;
 +
    padding-left: 48px;
 +
    margin: auto;
 +
    height: 48px;
 +
    background-image: url("https://static.igem.org/mediawiki/2015/c/cb/BNU-CHINA-gem.png");
 +
    background-size: 100%;
 +
    background-repeat: no-repeat;
 +
}
 +
 +
article > header.page-header h1 {
 +
    font-weight: 500;
 +
    font-size: 48px;
 +
}
 +
 +
article > header h1 > small {
 +
    display: block;
 +
    margin: 12px 0;
 +
    font-size: 24px;
 +
    letter-spacing: 1px;
 +
}
 +
 +
article h2, article h3, article h4, article h5 {
 +
    font-family: 'Computer Modern Bright Semibold', sans-serif;
 +
    font-weight: 500;
 +
    color: #a5682f;
 +
}
 +
 +
article h2 {
 +
    font-size: 28px;
 +
    border-bottom: 1px solid #eee;
 +
}
 +
 +
article h3 {
 +
    font-size: 20px;
 +
    word-spacing: -2px;
 +
}
 +
 +
article h4 {
 +
    font-size: 16px;
 +
}
 +
 +
article h5 {
 +
    color: #278A75;
 +
    font-size: 16px;
 +
}
 +
 +
/*****
 +
    Article: figure
 +
                *****/
 +
 +
article figure {
 +
    padding: 16px 0;
 +
}
 +
 +
article figure img {
 +
    max-width: 100%;
 +
}
 +
 +
article figure figcaption {
 +
    text-align: center;
 +
    font-family: 'Computer Modern Serif', serif;
 +
    color: #278A75;
 +
    padding: 8px;
 +
}
 +
 +
/*****
 +
    Article: paragraph
 +
                    *****/
 +
 +
article p, article blockquote {
 +
    font-family: 'Computer Modern Serif', serif;
 +
    font-size: 16px;
 +
}
 +
 +
/*****
 +
    Article: link
 +
              *****/
 +
 +
article a {
 +
    font-family: 'Computer Modern Sans', sans-serif;
 +
    color: #278A75;
 +
    text-decoration: none;
 +
}
 +
 +
article a:hover {
 +
    color: #D3853D;
 +
    text-decoration: none;
 +
}
 +
 +
article a:visited {
 +
    color: #278A75;
 +
}
 +
 +
article a:visited:hover {
 +
    color: #D3853D;
 +
}
 +
 +
/*****
 +
    Article: table
 +
              *****/
 +
article table th {
 +
    font-family: 'Computer Modern Bright Semibold', sans-serif;
 +
}
 +
 +
article table td {
 +
    font-family: 'Computer Modern Sans', sans-serif;
 +
}
 +
 +
/*****
 +
    Team: people
 +
              *****/
 +
 +
.people.container {
 +
    margin-bottom: 48px;
 +
    padding: 0;
 +
    width: 100%;
 +
}
 +
 +
.people .people-figure {
 +
    border: 2px solid #fff;
 +
    cursor: pointer;
 +
    padding: 33.33% 0 0 0;
 +
    margin: 0;
 +
    position: relative;
 +
    overflow: hidden;
 +
}
 +
 +
.people .people-avatar {
 +
    padding: 16px;
 +
    font-size: 18px;
 +
    font-family: serif;
 +
    position: absolute;
 +
    color: transparent;
 +
    top: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
    background-size: cover;
 +
    background-repeat: no-repeat;
 +
    z-index: 100;
 +
}
 +
 +
.people .people-figure p:hover + .people-avatar {
 +
    background-position: center;
 +
}
 +
 +
.people .people-figure .people-intro {
 +
    padding: 16px;
 +
    font-size: 18px;
 +
    font-family: 'Dancing Script', cursive;
 +
    font-weight: bold;
 +
    background-color: transparent;
 +
    position: absolute;
 +
    width: 100%;
 +
    height: 100%;
 +
    top: 0;
 +
    z-index: 101;
 +
}
 +
 +
.people .people-figure .people-intro:hover {
 +
    background-color: rgba(211, 133, 61, .5);
 +
}
 +
 +
.people .people-figure .people-intro:hover + .people-avatar {
 +
    background-position: center;
 +
}
 +
 +
.people .people-figure .people-intro > h1 {
 +
    font-family: 'Dancing Script', cursive;
 +
    font-weight: lighter;
 +
    color: white;
 +
    padding: 0 0 8px 0;
 +
    margin: 0;
 +
    font-size: 32px;
 +
}
 +
 +
.people .people-figure .people-intro > p {
 +
    font-family: 'Computer Modern Sans', sans-serif;
 +
    color: transparent;
 +
    font-weight: normal;
 +
    padding: 0;
 +
    margin: 0;
 +
    font-size: 16px;
 +
    line-height: 20px;
 +
}
 +
 +
.people .people-figure .people-intro:hover > p {
 +
    color: white;
 +
}
 +
 +
.filter-button-group li {
 +
    display: inline-block;
 +
    margin: 0 2px;
 +
    padding: 0 8px 0 0;
 +
    border-right: 1px solid #278A75;
 +
}
 +
 +
.sub-nav li {
 +
    display: inline-block;
 +
    margin: 0;
 +
    padding: 4px 8px;
 +
    border-right: 1px solid #e9e9e9;
 +
}
 +
 +
.sub-nav li:last-child, .filter-button-group li:last-child {
 +
    border-right: none;
 +
}
 +
 +
.sub-header {
 +
    box-shadow: 0 1px 6px rgba(120, 120, 120, .5);
 +
}
 +
 +
.btn-filter {
 +
    font-family: 'Computer Modern Sans', sans-serif;
 +
    color: #278A75;
 +
    border-radius: 0;
 +
    font-size: 18px;
 +
    padding: 0;
 +
}
 +
 +
.btn-filter:active {
 +
    box-shadow: none;
 +
    background-color: rgba(211, 133, 61, .1);
 +
}
 +
 +
.btn-filter::after {
 +
    content: "";
 +
    display: block;
 +
    width: 0;
 +
    height: 1px;
 +
    background-color: #D3853D;
 +
}
 +
 +
/*****
 +
    Article: video
 +
                *****/
 +
 +
article video {
 +
    max-width: 100% !important;
 +
    height: auto !important;
 +
    background-color: #000;
 +
    background-size: 100% 100%;
 +
    display: block;
 +
    margin: 25px auto;
 +
}
 +
 +
/*****
 +
    Home: wrapper
 +
              *****/
 +
 +
.wrapper {
 +
    position: relative;
 +
}
 +
 +
.wrapper img {
 +
    width: 100%;
 +
}
 +
 +
.wrapper .wrapper-text {
 +
    position: absolute;
 +
    width: 100%;
 +
    left: 0;
 +
    top: 0;
 +
    padding: 10% 15% 20% 15%;
 +
    color: white;
 +
}
 +
 +
.wrapper .wrapper-text h1 {
 +
    text-align: center;
 +
    color: rgba(255, 255, 255, 0.75);
 +
    font-family: 'Computer Modern Bright Semibold', sans-serif;
 +
    font-size: 72px;
 +
    letter-spacing: 2px;
 +
}
 +
 +
.wrapper .wrapper-text a {
 +
    text-decoration: none;
 +
    cursor: pointer;
 +
}
 +
 +
.wrapper .wrapper-text a:hover, .wrapper .wrapper-text a:active, .wrapper .wrapper-text a:focus {
 +
    outline: 0 !important;
 +
}
 +
 +
.wrapper .wrapper-text p {
 +
    border: 1px solid rgba(180, 180, 180, .5);
 +
    padding: 24px 48px;
 +
    font-size: 24px;
 +
    line-height: 32px;
 +
    font-family: 'Computer Modern Sans', sans-serif;
 +
    font-weight: normal;
 +
    color: rgba(255, 255, 255, 0.9);
 +
    background-color: rgba(41, 30, 21, 0.15);
 +
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.5);
 +
    border-radius: 1px;
 +
}
 +
 +
.wrapper:first-child .wrapper-text p:hover {
 +
    text-decoration: none;
 +
}
 +
 +
.wrapper .wrapper-text p:hover {
 +
    text-decoration: underline;
 +
    background-color: rgba(255, 255, 255, .15);
 +
    color: #fff;
 +
    border: 1px solid transparent;
 +
    box-shadow: 0 0 24px rgba(0, 0, 0, .5);
 +
}
 +
 +
.people .people-figure > p {
 +
    transition-property: all;
 +
    transition-duration: 0.6s;
 +
    transition-timing-function: ease-out;
 +
    transition-delay: 0s;
 +
}
 +
 +
.people .people-figure > p:hover {
 +
    transition-property: all;
 +
    transition-duration: 0.6s;
 +
    transition-timing-function: ease-out;
 +
    transition-delay: 0.75s;
 +
}
 +
 +
.people .people-avatar {
 +
    transition: all 0.6s ease-in-out;
 +
}
 +
 +
.people .people-figure .people-intro {
 +
    transition-property: all;
 +
    transition-duration: 0.6s;
 +
    transition-timing-function: ease-out;
 +
    transition-delay: 0s;
 +
}
 +
 +
.people .people-figure .people-intro:hover {
 +
    transition-property: all;
 +
    transition-duration: 0.6s;
 +
    transition-timing-function: ease-out;
 +
    transition-delay: 0.75s;
 +
}
 +
 +
.people .people-figure .people-intro > p {
 +
    transition-property: all;
 +
    transition-duration: 0.6s;
 +
    transition-timing-function: ease-out;
 +
    transition-delay: 0s;
 +
}
 +
 +
.people .people-figure .people-intro:hover > p {
 +
    transition-property: all;
 +
    transition-duration: 0.6s;
 +
    transition-timing-function: ease-out;
 +
    transition-delay: 0.75s;
 +
}
 +
 +
.panel-group .panel {
 +
    border-radius: 0;
 +
    margin: 0 0 16px 0;
 +
    font-family: 'Computer Modern Serif', serif;
 +
    word-spacing: -1px;
 +
    line-height: 24px;
 +
}
 +
 +
.panel-group .panel strong {
 +
    font-family: "Computer Modern Bright Semibold", sans-serif;
 +
    font-weight: normal;
 +
}
 +
 +
.panel-info {
 +
    border-radius: 0;
 +
    border-color: #EDD5B1;
 +
}
 +
 +
.panel-info > .panel-heading {
 +
    border-radius: 0;
 +
    background-color: rgb(237, 213, 177);
 +
    border-color: rgb(237, 213, 177);
 +
    color: rgb(164, 109, 49);
 +
}
 +
 +
.panel-info.gold {
 +
    border-color: rgb(255, 219, 118);
 +
}
 +
 +
.panel-info.gold > .panel-heading {
 +
    background-color: rgb(255, 219, 118);
 +
    border-color: rgb(255, 219, 118);
 +
    color: #816515;
 +
}
 +
 +
.panel-info.silver {
 +
    border-color: rgb(222, 222, 222);
 +
}
 +
 +
.panel-info.silver > .panel-heading {
 +
    color: #808080;
 +
    background-color: rgb(222, 222, 222);
 +
    border-color: rgb(222, 222, 222);
 +
}
 +
 +
.panel-info.bronze {
 +
    border-color: #DA8D41;
 +
}
 +
 +
.panel-info.bronze > .panel-heading {
 +
    background-color: #DA8D41;
 +
    border-color: #DA8D41;
 +
    color: #6E451D;
 +
}
 +
 +
.dl-horizontal dt {
 +
    font-family: "Computer Modern Bright Semibold", sans-serif;
 +
}
 +
 +
.dl-horizontal dd {
 +
    font-family: 'Computer Modern Serif', serif;
 +
}
 +
 +
.sub-header {
 +
    transition: all 0.25s ease-in-out;
 +
}
 +
 +
.sub-header {
 +
    position: fixed;
 +
    background-color: #fff;
 +
    width: 100%;
 +
    top: -120px;
 +
    z-index: 999;
 +
}
 +
 +
.sub-header .sub-nav {
 +
    margin: 0;
 +
}
 +
 +
.sub-nav a:visited {
 +
    color: #278A75;
 +
}
 +
 +
.box-content p{
 
     font-family: 'Computer Modern Sans', sans-serif;
 
     font-family: 'Computer Modern Sans', sans-serif;
 
}
 
}

Revision as of 08:29, 18 September 2015

/***** 

   Background
           *****/

body { 

   background-color: #E9DCBA

}

.content.container { 

   margin-top: 24px;
   margin-bottom: 32px;

}

/***** 

   Animation
           *****/

@-webkit-keyframes rotating /* Safari and Chrome */ { 

   from {
       -ms-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
       -webkit-transform: rotate(0deg);
       -o-transform: rotate(0deg);
       transform: rotate(0deg);
   }
   to {
       -ms-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
       -webkit-transform: rotate(360deg);
       -o-transform: rotate(360deg);
       transform: rotate(360deg);
   }

}

@keyframes rotating { 

   from {
       -ms-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
       -webkit-transform: rotate(0deg);
       -o-transform: rotate(0deg);
       transform: rotate(0deg);
   }
   to {
       -ms-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
       -webkit-transform: rotate(360deg);
       -o-transform: rotate(360deg);
       transform: rotate(360deg);
   }

}

.rotating { 

   -webkit-animation: rotating 2s linear infinite;
   -moz-animation: rotating 2s linear infinite;
   -ms-animation: rotating 2s linear infinite;
   -o-animation: rotating 2s linear infinite;
   animation: rotating 2s linear infinite;

}

/***** 

   Header
       *****/

.navbar-siren { 

   border: none;
   border-radius: 0;
   margin: 0;
   background-color: rgba(255, 255, 255, .95);
   box-shadow: 0 6px 0 rgba(255, 255, 255, .95);

}


/***** 

   Header: navigation
                   *****/

.navbar-siren .navbar-nav { 

   display: table-row;

}

.navbar-siren .navbar-nav > li { 

   float: none;
   cursor: pointer;
   display: table-cell;
   vertical-align: middle;
   font-family: "Raleway Thin", sans-serif;
   font-size: 18px;
   box-shadow: 0 6px 0 transparent;

}

.navbar-siren .navbar-nav > li:hover { 

   box-shadow: 0 6px 0 #D3853D;
   background-color: #D3853D;

}

.navbar-siren .navbar-nav > li.active { 

   box-shadow: 0 6px 0 #D3853D;

}

.navbar-siren .navbar-nav > li > a { 

   text-align: center;
   color: #000;

}

.navbar-siren .navbar-nav > li:hover > a { 

   color: white;

}

.navbar-siren .navbar-nav > li > a:hover { 

   background-color: transparent;
   color: white;

}

.navbar-siren .navbar-nav > li svg { 

   margin: 8px auto 6px auto;
   display: block;
   width: 36px;
   height: 36px;

}

.navbar-siren .navbar-nav > li:hover svg * { 

   stroke: #fff;
   fill: #D3853D;

}

.navbar-siren .navbar-nav li .dropdown-menu { 

   min-width: 150%;
   text-align: left;
   padding: 0;
   border: 0;
   background-color: #D3853D;
   border-radius: 0;
   box-shadow: 1px 3px 2px rgba(120, 120, 120, .5);
   display: block;
   opacity: 0;
   visibility: hidden;

}

.navbar-siren .navbar-nav li:hover .dropdown-menu { 

   opacity: 1;
   visibility: visible;

}

.navbar-siren .navbar-nav li.open a.dropdown-toggle { 

   background: transparent;

}

.navbar-siren .navbar-nav li a.dropdown-toggle { 

   background: transparent;

}

.navbar-siren .navbar-nav li .dropdown-menu li > a { 

   font-family: "Raleway Thin", sans-serif;
   font-size: 18px;
   padding: 16px;
   color: #fff;

}

.navbar-siren .navbar-nav li .dropdown-menu li > a:hover { 

   background-color: #eb9745;

}

.navbar-siren .navbar-nav li .dropdown-menu li > a:active { 

   background-color: #ffa44c;

}

.navbar-siren .navbar-nav li .dropdown-menu li > a::after { 

   content: "";
   display: block;
   width: 0;
   height: 1px;
   background-color: transparent;

}

.navbar-siren .navbar-nav li .dropdown-menu li > a:hover::after { 

   content: "";
   display: block;
   width: 100%;
   height: 1px;
   background-color: rgba(255, 255, 255, .5);

}

/***** 

   Header: logo
             *****/

.navbar-siren .navbar-header { 

   display: inline-block;

}

.navbar-siren .navbar-logo { 

   height: auto;

}

.navbar-siren .navbar-logo img { 

   width: 240px;

}

/***** 

   Article
        *****/

.content > article { 

   padding: 32px 64px;
   background-color: #fff;
   box-shadow: 0px 4px 6px rgba(75, 75, 75, 0.5);

}

/***** 

   Article: reference
                   *****/

.reference { 

   margin: 48px 0 24px 0;

}

.reference:before { 

   color: #278A75;
   font-family: 'Computer Modern Bright Semibold', sans-serif;
   font-size: 24px;
   content: "Reference";

}

  1. globalWrapper .reference > ol, .reference > ol {
   margin: 0;
   padding: 0;
   list-style-type: none;
   counter-reset: counter;

}

.reference > ol li { 

   font-family: 'Computer Modern Serif', serif;
   margin: 6px 0;

}

.reference > ol li::before { 

   margin-right: 4px;
   letter-spacing: 2px;
   display: inline-block;
   font-family: 'Computer Modern Serif', serif;
   content: '[' counter(counter) ']';
   counter-increment: counter;

}

/***** 

   Article: header
                *****/

article > header.page-header { 

   text-align: center;
   font-family: 'Computer Modern Bright Semibold', sans-serif;
   letter-spacing: -1px;
   font-style: italic;
   border: none;

}

article > header.page-header::before { 

   -webkit-animation: rotating 5s 0.1s cubic-bezier(0, 1.8, 1, .18) infinite;
   -o-animation: rotating 5s 0.1s cubic-bezier(0, 1.8, 1, .18) infinite;
   animation: rotating 5s 0.1s cubic-bezier(0, 1.8, 1, .18) infinite;

   content: "";
   display: block;
   border-radius: 24px;
   position: relative;
   width: 0;
   padding-left: 48px;
   margin: auto;
   height: 48px;
   background-image: url("BNU-CHINA-gem.png");
   background-size: 100%;
   background-repeat: no-repeat;

}

article > header.page-header h1 { 

   font-weight: 500;
   font-size: 48px;

}

article > header h1 > small { 

   display: block;
   margin: 12px 0;
   font-size: 24px;
   letter-spacing: 1px;

}

article h2, article h3, article h4, article h5 { 

   font-family: 'Computer Modern Bright Semibold', sans-serif;
   font-weight: 500;
   color: #a5682f;

}

article h2 { 

   font-size: 28px;
   border-bottom: 1px solid #eee;

}

article h3 { 

   font-size: 20px;
   word-spacing: -2px;

}

article h4 { 

   font-size: 16px;

}

article h5 { 

   color: #278A75;
   font-size: 16px;

}

/***** 

   Article: figure
                *****/

article figure { 

   padding: 16px 0;

}

article figure img { 

   max-width: 100%;

}

article figure figcaption { 

   text-align: center;
   font-family: 'Computer Modern Serif', serif;
   color: #278A75;
   padding: 8px;

}

/***** 

   Article: paragraph
                   *****/

article p, article blockquote { 

   font-family: 'Computer Modern Serif', serif;
   font-size: 16px;

}

/***** 

   Article: link
              *****/

article a { 

   font-family: 'Computer Modern Sans', sans-serif;
   color: #278A75;
   text-decoration: none;

}

article a:hover { 

   color: #D3853D;
   text-decoration: none;

}

article a:visited { 

   color: #278A75;

}

article a:visited:hover { 

   color: #D3853D;

}

/***** 

   Article: table
              *****/

article table th { 

   font-family: 'Computer Modern Bright Semibold', sans-serif;

}

article table td { 

   font-family: 'Computer Modern Sans', sans-serif;

}

/***** 

   Team: people
             *****/

.people.container { 

   margin-bottom: 48px;
   padding: 0;
   width: 100%;

}

.people .people-figure { 

   border: 2px solid #fff;
   cursor: pointer;
   padding: 33.33% 0 0 0;
   margin: 0;
   position: relative;
   overflow: hidden;

}

.people .people-avatar { 

   padding: 16px;
   font-size: 18px;
   font-family: serif;
   position: absolute;
   color: transparent;
   top: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
   z-index: 100;

}

.people .people-figure p:hover + .people-avatar { 

   background-position: center;

}

.people .people-figure .people-intro { 

   padding: 16px;
   font-size: 18px;
   font-family: 'Dancing Script', cursive;
   font-weight: bold;
   background-color: transparent;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   z-index: 101;

}

.people .people-figure .people-intro:hover { 

   background-color: rgba(211, 133, 61, .5);

}

.people .people-figure .people-intro:hover + .people-avatar { 

   background-position: center;

}

.people .people-figure .people-intro > h1 { 

   font-family: 'Dancing Script', cursive;
   font-weight: lighter;
   color: white;
   padding: 0 0 8px 0;
   margin: 0;
   font-size: 32px;

}

.people .people-figure .people-intro > p { 

   font-family: 'Computer Modern Sans', sans-serif;
   color: transparent;
   font-weight: normal;
   padding: 0;
   margin: 0;
   font-size: 16px;
   line-height: 20px;

}

.people .people-figure .people-intro:hover > p { 

   color: white;

}

.filter-button-group li { 

   display: inline-block;
   margin: 0 2px;
   padding: 0 8px 0 0;
   border-right: 1px solid #278A75;

}

.sub-nav li { 

   display: inline-block;
   margin: 0;
   padding: 4px 8px;
   border-right: 1px solid #e9e9e9;

}

.sub-nav li:last-child, .filter-button-group li:last-child { 

   border-right: none;

}

.sub-header { 

   box-shadow: 0 1px 6px rgba(120, 120, 120, .5);

}

.btn-filter { 

   font-family: 'Computer Modern Sans', sans-serif;
   color: #278A75;
   border-radius: 0;
   font-size: 18px;
   padding: 0;

}

.btn-filter:active { 

   box-shadow: none;
   background-color: rgba(211, 133, 61, .1);

}

.btn-filter::after { 

   content: "";
   display: block;
   width: 0;
   height: 1px;
   background-color: #D3853D;

}

/***** 

   Article: video
               *****/

article video { 

   max-width: 100% !important;
   height: auto !important;
   background-color: #000;
   background-size: 100% 100%;
   display: block;
   margin: 25px auto;

}

/***** 

   Home: wrapper
              *****/

.wrapper { 

   position: relative;

}

.wrapper img { 

   width: 100%;

}

.wrapper .wrapper-text { 

   position: absolute;
   width: 100%;
   left: 0;
   top: 0;
   padding: 10% 15% 20% 15%;
   color: white;

}

.wrapper .wrapper-text h1 { 

   text-align: center;
   color: rgba(255, 255, 255, 0.75);
   font-family: 'Computer Modern Bright Semibold', sans-serif;
   font-size: 72px;
   letter-spacing: 2px;

}

.wrapper .wrapper-text a { 

   text-decoration: none;
   cursor: pointer;

}

.wrapper .wrapper-text a:hover, .wrapper .wrapper-text a:active, .wrapper .wrapper-text a:focus { 

   outline: 0 !important;

}

.wrapper .wrapper-text p { 

   border: 1px solid rgba(180, 180, 180, .5);
   padding: 24px 48px;
   font-size: 24px;
   line-height: 32px;
   font-family: 'Computer Modern Sans', sans-serif;
   font-weight: normal;
   color: rgba(255, 255, 255, 0.9);
   background-color: rgba(41, 30, 21, 0.15);
   box-shadow: 0 0 24px rgba(0, 0, 0, 0.5);
   border-radius: 1px;

}

.wrapper:first-child .wrapper-text p:hover { 

   text-decoration: none;

}

.wrapper .wrapper-text p:hover { 

   text-decoration: underline;
   background-color: rgba(255, 255, 255, .15);
   color: #fff;
   border: 1px solid transparent;
   box-shadow: 0 0 24px rgba(0, 0, 0, .5);

}

.people .people-figure > p { 

   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0s;

}

.people .people-figure > p:hover { 

   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0.75s;

}

.people .people-avatar { 

   transition: all 0.6s ease-in-out;

}

.people .people-figure .people-intro { 

   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0s;

}

.people .people-figure .people-intro:hover { 

   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0.75s;

}

.people .people-figure .people-intro > p { 

   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0s;

}

.people .people-figure .people-intro:hover > p { 

   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0.75s;

}

.panel-group .panel { 

   border-radius: 0;
   margin: 0 0 16px 0;
   font-family: 'Computer Modern Serif', serif;
   word-spacing: -1px;
   line-height: 24px;

}

.panel-group .panel strong { 

   font-family: "Computer Modern Bright Semibold", sans-serif;
   font-weight: normal;

}

.panel-info { 

   border-radius: 0;
   border-color: #EDD5B1;

}

.panel-info > .panel-heading { 

   border-radius: 0;
   background-color: rgb(237, 213, 177);
   border-color: rgb(237, 213, 177);
   color: rgb(164, 109, 49);

}

.panel-info.gold { 

   border-color: rgb(255, 219, 118);

}

.panel-info.gold > .panel-heading { 

   background-color: rgb(255, 219, 118);
   border-color: rgb(255, 219, 118);
   color: #816515;

}

.panel-info.silver { 

   border-color: rgb(222, 222, 222);

}

.panel-info.silver > .panel-heading { 

   color: #808080;
   background-color: rgb(222, 222, 222);
   border-color: rgb(222, 222, 222);

}

.panel-info.bronze { 

   border-color: #DA8D41;

}

.panel-info.bronze > .panel-heading { 

   background-color: #DA8D41;
   border-color: #DA8D41;
   color: #6E451D;

}

.dl-horizontal dt { 

   font-family: "Computer Modern Bright Semibold", sans-serif;

}

.dl-horizontal dd { 

   font-family: 'Computer Modern Serif', serif;

}

.sub-header { 

   transition: all 0.25s ease-in-out;

}

.sub-header { 

   position: fixed;
   background-color: #fff;
   width: 100%;
   top: -120px;
   z-index: 999;

}

.sub-header .sub-nav { 

   margin: 0;

}

.sub-nav a:visited { 

   color: #278A75;

}

.box-content { 

   font-family: 'Computer Modern Sans', sans-serif;

}


.filter-button-group li.checked a { 

   color: #D3853D;

}

/***** 

   Responsive: iPad
              *****/

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

   .sub-header .sub-nav li a.btn-filter {
       font-size: 18px;
       padding: 4px 2px;
   }

   #mw-content-text, body {
       background: #f9f9f9;
   }

   .container {
       width: 100%;
       margin: 0;
       padding: 0;
   }

   .content.container {
       margin: 0;
   }

   .navbar-siren {
       box-shadow: 0 4px 0 black;
       background-color: #f9f9f9;
       z-index: 999;
   }

   .navbar-siren .container {
       padding: 0;
       margin: 0 0 0 0;
   }

   .navbar-siren .navbar-header {
       text-align: center;
   }

   .navbar-siren .navbar-nav > li {

       font-size: 15px;
       box-shadow: none;
   }

   .navbar-siren .navbar-nav > li.active {
       box-shadow: none;
   }

   .navbar-siren .navbar-nav > li svg {
       margin: 8px auto 4px auto;
       width: 32px;
       height: 32px;
   }

   article.col-md-12 {
       margin: 0;
       box-shadow: none;
       width: 100%;
   }

   .wrapper-text h1 {
       font-family: "Raleway Thin", sans-serif;
   }

   .wrapper .wrapper-text {
       padding: 10% 15%;
   }

   .wrapper .wrapper-text h1 {
       font-size: 36px;
   }

   .wrapper .wrapper-text p {
       font-size: 18px;
       line-height: 24px;
       padding: 12px 24px;
   }

   .content > article {
       opacity: 1;
       background-color: #fff;
   }

   article p {
       font-size: 18px;
   }

   article h2 {
       font-size: 32px;
   }

   article h3 {
       font-size: 24px;
   }

   article h4 {
       font-size: 18px;
   }

   article h5 {
       font-size: 18px;
       color: #278A75;
   }

}

@media screen and (min-width: 640px) and (max-width: 1024px) { 

   .navbar-siren .container {
       text-align: center;
   }

   .navbar-siren .navbar-right {
       display: inline-block;
       float: none !important;
       margin: auto;
   }

   .content article {
       min-width: 640px;
       padding: 32px 64px;
   }

   .navbar-siren .navbar-nav > li {
       vertical-align: top;
   }

   .caret {
       font-size: 6px;
   }

}

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

   .content article {
       padding: 0 16px;
   }

   article p, article blockquote {
       font-size: 14px;
   }

   .navbar-siren .navbar-nav > li {
       height: 50px;
       font-size: 14px;
   }

   .navbar-siren .navbar-nav > li svg {
       display: none;
   }

   .navbar-siren .navbar-nav > li a:first-child {
       padding-left: 15px;
   }

   .navbar-siren .navbar-nav > li a {
       margin-top: 10px;
       padding: 10px 2px;
   }

   .navbar-siren {
       height: auto;
       border-bottom: 1px solid black;
   }

   .caret {
       display: none;
   }

}

/***** 

   Responsive: PC
              *****/

@media screen and (min-width: 1024px) { 


   .navbar-siren .container {
       background-image: url("BNU-CHINA-logo.png");
       background-size: auto 80%;
       background-position: left center;
       background-repeat: no-repeat;
       width: 100% !important;
   }

   .btn-filter:hover {
       color: #D3853D;
   }

   .btn-filter:hover::after {
       content: "";
       width: 100%;
       height: 1px;
   }

   .btn-filter::after {
       transition: all 0.5s ease-out;
   }

   .navbar-siren .navbar-nav > li {
       transition: box-shadow 2s, background-color 0.25s;
   }

   .navbar-siren .navbar-nav > li:hover {
       transition: box-shadow 0.25s, background-color 0.25s;
   }

   .navbar-siren .navbar-nav > li > a {
       transition: color 0.25s;
   }

   .navbar-siren .navbar-nav > li svg * {
       transition: all 0.25s;
   }

   .navbar-siren .navbar-nav li .dropdown-menu {
       transition: visibility 0s, opacity 0.25s;
   }

   .navbar-siren .navbar-nav li .dropdown-menu li > a::after {
       transition: all 0.5s ease-out;
   }

   .people .people-figure > p {
       transition-property: all;
       transition-duration: 0.6s;
       transition-timing-function: ease-out;
       transition-delay: 0s;
   }

   .people .people-figure > p:hover {
       transition-property: all;
       transition-duration: 0.6s;
       transition-timing-function: ease-out;
       transition-delay: 0.75s;
   }

   .people .people-avatar {
       transition: all 0.6s ease-in-out;
   }

   .people .people-figure .people-intro {
       transition-property: all;
       transition-duration: 0.6s;
       transition-timing-function: ease-out;
       transition-delay: 0s;
   }

   .people .people-figure .people-intro:hover {
       transition-property: all;
       transition-duration: 0.6s;
       transition-timing-function: ease-out;
       transition-delay: 0.75s;
   }

   .people .people-figure .people-intro > p {
       transition-property: all;
       transition-duration: 0.6s;
       transition-timing-function: ease-out;
       transition-delay: 0s;
   }

   .people .people-figure .people-intro:hover > p {
       transition-property: all;
       transition-duration: 0.6s;
       transition-timing-function: ease-out;
       transition-delay: 0.75s;
   }

   .wrapper .wrapper-text p {
       transition: all 0.6s ease-in-out;
   }

} /***** 

   Background
           *****/

body { 

   background-color: #E9DCBA

}

.content.container { 

   margin-top: 24px;
   margin-bottom: 32px;

}

/***** 

   Animation
           *****/

@-webkit-keyframes rotating /* Safari and Chrome */ { 

   from {
       -ms-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
       -webkit-transform: rotate(0deg);
       -o-transform: rotate(0deg);
       transform: rotate(0deg);
   }
   to {
       -ms-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
       -webkit-transform: rotate(360deg);
       -o-transform: rotate(360deg);
       transform: rotate(360deg);
   }

}

@keyframes rotating { 

   from {
       -ms-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
       -webkit-transform: rotate(0deg);
       -o-transform: rotate(0deg);
       transform: rotate(0deg);
   }
   to {
       -ms-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
       -webkit-transform: rotate(360deg);
       -o-transform: rotate(360deg);
       transform: rotate(360deg);
   }

}

.rotating { 

   -webkit-animation: rotating 2s linear infinite;
   -moz-animation: rotating 2s linear infinite;
   -ms-animation: rotating 2s linear infinite;
   -o-animation: rotating 2s linear infinite;
   animation: rotating 2s linear infinite;

}

/***** 

   Header
       *****/

.navbar-siren { 

   border: none;
   border-radius: 0;
   margin: 0;
   background-color: rgba(255, 255, 255, .95);
   box-shadow: 0 6px 0 rgba(255, 255, 255, .95);

}


/***** 

   Header: navigation
                   *****/

.navbar-siren .navbar-nav { 

   display: table-row;

}

.navbar-siren .navbar-nav > li { 

   float: none;
   cursor: pointer;
   display: table-cell;
   vertical-align: middle;
   font-family: "Raleway Thin", sans-serif;
   font-size: 18px;
   box-shadow: 0 6px 0 transparent;

}

.navbar-siren .navbar-nav > li:hover { 

   box-shadow: 0 6px 0 #D3853D;
   background-color: #D3853D;

}

.navbar-siren .navbar-nav > li.active { 

   box-shadow: 0 6px 0 #D3853D;

}

.navbar-siren .navbar-nav > li > a { 

   text-align: center;
   color: #000;

}

.navbar-siren .navbar-nav > li:hover > a { 

   color: white;

}

.navbar-siren .navbar-nav > li > a:hover { 

   background-color: transparent;
   color: white;

}

.navbar-siren .navbar-nav > li svg { 

   margin: 8px auto 6px auto;
   display: block;
   width: 36px;
   height: 36px;

}

.navbar-siren .navbar-nav > li:hover svg * { 

   stroke: #fff;
   fill: #D3853D;

}

.navbar-siren .navbar-nav li .dropdown-menu { 

   min-width: 150%;
   text-align: left;
   padding: 0;
   border: 0;
   background-color: #D3853D;
   border-radius: 0;
   box-shadow: 1px 3px 2px rgba(120, 120, 120, .5);
   display: block;
   opacity: 0;
   visibility: hidden;

}

.navbar-siren .navbar-nav li:hover .dropdown-menu { 

   opacity: 1;
   visibility: visible;

}

.navbar-siren .navbar-nav li.open a.dropdown-toggle { 

   background: transparent;

}

.navbar-siren .navbar-nav li a.dropdown-toggle { 

   background: transparent;

}

.navbar-siren .navbar-nav li .dropdown-menu li > a { 

   font-family: "Raleway Thin", sans-serif;
   font-size: 18px;
   padding: 16px;
   color: #fff;

}

.navbar-siren .navbar-nav li .dropdown-menu li > a:hover { 

   background-color: #eb9745;

}

.navbar-siren .navbar-nav li .dropdown-menu li > a:active { 

   background-color: #ffa44c;

}

.navbar-siren .navbar-nav li .dropdown-menu li > a::after { 

   content: "";
   display: block;
   width: 0;
   height: 1px;
   background-color: transparent;

}

.navbar-siren .navbar-nav li .dropdown-menu li > a:hover::after { 

   content: "";
   display: block;
   width: 100%;
   height: 1px;
   background-color: rgba(255, 255, 255, .5);

}

/***** 

   Header: logo
             *****/

.navbar-siren .navbar-header { 

   display: inline-block;

}

.navbar-siren .navbar-logo { 

   height: auto;

}

.navbar-siren .navbar-logo img { 

   width: 240px;

}

/***** 

   Article
        *****/

.content > article { 

   padding: 32px 64px;
   background-color: #fff;
   box-shadow: 0px 4px 6px rgba(75, 75, 75, 0.5);

}

/***** 

   Article: reference
                   *****/

.reference { 

   margin: 48px 0 24px 0;

}

.reference:before { 

   color: #278A75;
   font-family: 'Computer Modern Bright Semibold', sans-serif;
   font-size: 24px;
   content: "Reference";

}

  1. globalWrapper .reference > ol, .reference > ol {
   margin: 0;
   padding: 0;
   list-style-type: none;
   counter-reset: counter;

}

.reference > ol li { 

   font-family: 'Computer Modern Serif', serif;
   margin: 6px 0;

}

.reference > ol li::before { 

   margin-right: 4px;
   letter-spacing: 2px;
   display: inline-block;
   font-family: 'Computer Modern Serif', serif;
   content: '[' counter(counter) ']';
   counter-increment: counter;

}

/***** 

   Article: header
                *****/

article > header.page-header { 

   text-align: center;
   font-family: 'Computer Modern Bright Semibold', sans-serif;
   letter-spacing: -1px;
   font-style: italic;
   border: none;

}

article > header.page-header::before { 

   -webkit-animation: rotating 5s 0.1s cubic-bezier(0, 1.8, 1, .18) infinite;
   -o-animation: rotating 5s 0.1s cubic-bezier(0, 1.8, 1, .18) infinite;
   animation: rotating 5s 0.1s cubic-bezier(0, 1.8, 1, .18) infinite;

   content: "";
   display: block;
   border-radius: 24px;
   position: relative;
   width: 0;
   padding-left: 48px;
   margin: auto;
   height: 48px;
   background-image: url("BNU-CHINA-gem.png");
   background-size: 100%;
   background-repeat: no-repeat;

}

article > header.page-header h1 { 

   font-weight: 500;
   font-size: 48px;

}

article > header h1 > small { 

   display: block;
   margin: 12px 0;
   font-size: 24px;
   letter-spacing: 1px;

}

article h2, article h3, article h4, article h5 { 

   font-family: 'Computer Modern Bright Semibold', sans-serif;
   font-weight: 500;
   color: #a5682f;

}

article h2 { 

   font-size: 28px;
   border-bottom: 1px solid #eee;

}

article h3 { 

   font-size: 20px;
   word-spacing: -2px;

}

article h4 { 

   font-size: 16px;

}

article h5 { 

   color: #278A75;
   font-size: 16px;

}

/***** 

   Article: figure
                *****/

article figure { 

   padding: 16px 0;

}

article figure img { 

   max-width: 100%;

}

article figure figcaption { 

   text-align: center;
   font-family: 'Computer Modern Serif', serif;
   color: #278A75;
   padding: 8px;

}

/***** 

   Article: paragraph
                   *****/

article p, article blockquote { 

   font-family: 'Computer Modern Serif', serif;
   font-size: 16px;

}

/***** 

   Article: link
              *****/

article a { 

   font-family: 'Computer Modern Sans', sans-serif;
   color: #278A75;
   text-decoration: none;

}

article a:hover { 

   color: #D3853D;
   text-decoration: none;

}

article a:visited { 

   color: #278A75;

}

article a:visited:hover { 

   color: #D3853D;

}

/***** 

   Article: table
              *****/

article table th { 

   font-family: 'Computer Modern Bright Semibold', sans-serif;

}

article table td { 

   font-family: 'Computer Modern Sans', sans-serif;

}

/***** 

   Team: people
             *****/

.people.container { 

   margin-bottom: 48px;
   padding: 0;
   width: 100%;

}

.people .people-figure { 

   border: 2px solid #fff;
   cursor: pointer;
   padding: 33.33% 0 0 0;
   margin: 0;
   position: relative;
   overflow: hidden;

}

.people .people-avatar { 

   padding: 16px;
   font-size: 18px;
   font-family: serif;
   position: absolute;
   color: transparent;
   top: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
   z-index: 100;

}

.people .people-figure p:hover + .people-avatar { 

   background-position: center;

}

.people .people-figure .people-intro { 

   padding: 16px;
   font-size: 18px;
   font-family: 'Dancing Script', cursive;
   font-weight: bold;
   background-color: transparent;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   z-index: 101;

}

.people .people-figure .people-intro:hover { 

   background-color: rgba(211, 133, 61, .5);

}

.people .people-figure .people-intro:hover + .people-avatar { 

   background-position: center;

}

.people .people-figure .people-intro > h1 { 

   font-family: 'Dancing Script', cursive;
   font-weight: lighter;
   color: white;
   padding: 0 0 8px 0;
   margin: 0;
   font-size: 32px;

}

.people .people-figure .people-intro > p { 

   font-family: 'Computer Modern Sans', sans-serif;
   color: transparent;
   font-weight: normal;
   padding: 0;
   margin: 0;
   font-size: 16px;
   line-height: 20px;

}

.people .people-figure .people-intro:hover > p { 

   color: white;

}

.filter-button-group li { 

   display: inline-block;
   margin: 0 2px;
   padding: 0 8px 0 0;
   border-right: 1px solid #278A75;

}

.sub-nav li { 

   display: inline-block;
   margin: 0;
   padding: 4px 8px;
   border-right: 1px solid #e9e9e9;

}

.sub-nav li:last-child, .filter-button-group li:last-child { 

   border-right: none;

}

.sub-header { 

   box-shadow: 0 1px 6px rgba(120, 120, 120, .5);

}

.btn-filter { 

   font-family: 'Computer Modern Sans', sans-serif;
   color: #278A75;
   border-radius: 0;
   font-size: 18px;
   padding: 0;

}

.btn-filter:active { 

   box-shadow: none;
   background-color: rgba(211, 133, 61, .1);

}

.btn-filter::after { 

   content: "";
   display: block;
   width: 0;
   height: 1px;
   background-color: #D3853D;

}

/***** 

   Article: video
               *****/

article video { 

   max-width: 100% !important;
   height: auto !important;
   background-color: #000;
   background-size: 100% 100%;
   display: block;
   margin: 25px auto;

}

/***** 

   Home: wrapper
              *****/

.wrapper { 

   position: relative;

}

.wrapper img { 

   width: 100%;

}

.wrapper .wrapper-text { 

   position: absolute;
   width: 100%;
   left: 0;
   top: 0;
   padding: 10% 15% 20% 15%;
   color: white;

}

.wrapper .wrapper-text h1 { 

   text-align: center;
   color: rgba(255, 255, 255, 0.75);
   font-family: 'Computer Modern Bright Semibold', sans-serif;
   font-size: 72px;
   letter-spacing: 2px;

}

.wrapper .wrapper-text a { 

   text-decoration: none;
   cursor: pointer;

}

.wrapper .wrapper-text a:hover, .wrapper .wrapper-text a:active, .wrapper .wrapper-text a:focus { 

   outline: 0 !important;

}

.wrapper .wrapper-text p { 

   border: 1px solid rgba(180, 180, 180, .5);
   padding: 24px 48px;
   font-size: 24px;
   line-height: 32px;
   font-family: 'Computer Modern Sans', sans-serif;
   font-weight: normal;
   color: rgba(255, 255, 255, 0.9);
   background-color: rgba(41, 30, 21, 0.15);
   box-shadow: 0 0 24px rgba(0, 0, 0, 0.5);
   border-radius: 1px;

}

.wrapper:first-child .wrapper-text p:hover { 

   text-decoration: none;

}

.wrapper .wrapper-text p:hover { 

   text-decoration: underline;
   background-color: rgba(255, 255, 255, .15);
   color: #fff;
   border: 1px solid transparent;
   box-shadow: 0 0 24px rgba(0, 0, 0, .5);

}

.people .people-figure > p { 

   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0s;

}

.people .people-figure > p:hover { 

   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0.75s;

}

.people .people-avatar { 

   transition: all 0.6s ease-in-out;

}

.people .people-figure .people-intro { 

   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0s;

}

.people .people-figure .people-intro:hover { 

   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0.75s;

}

.people .people-figure .people-intro > p { 

   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0s;

}

.people .people-figure .people-intro:hover > p { 

   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0.75s;

}

.panel-group .panel { 

   border-radius: 0;
   margin: 0 0 16px 0;
   font-family: 'Computer Modern Serif', serif;
   word-spacing: -1px;
   line-height: 24px;

}

.panel-group .panel strong { 

   font-family: "Computer Modern Bright Semibold", sans-serif;
   font-weight: normal;

}

.panel-info { 

   border-radius: 0;
   border-color: #EDD5B1;

}

.panel-info > .panel-heading { 

   border-radius: 0;
   background-color: rgb(237, 213, 177);
   border-color: rgb(237, 213, 177);
   color: rgb(164, 109, 49);

}

.panel-info.gold { 

   border-color: rgb(255, 219, 118);

}

.panel-info.gold > .panel-heading { 

   background-color: rgb(255, 219, 118);
   border-color: rgb(255, 219, 118);
   color: #816515;

}

.panel-info.silver { 

   border-color: rgb(222, 222, 222);

}

.panel-info.silver > .panel-heading { 

   color: #808080;
   background-color: rgb(222, 222, 222);
   border-color: rgb(222, 222, 222);

}

.panel-info.bronze { 

   border-color: #DA8D41;

}

.panel-info.bronze > .panel-heading { 

   background-color: #DA8D41;
   border-color: #DA8D41;
   color: #6E451D;

}

.dl-horizontal dt { 

   font-family: "Computer Modern Bright Semibold", sans-serif;

}

.dl-horizontal dd { 

   font-family: 'Computer Modern Serif', serif;

}

.sub-header { 

   transition: all 0.25s ease-in-out;

}

.sub-header { 

   position: fixed;
   background-color: #fff;
   width: 100%;
   top: -120px;
   z-index: 999;

}

.sub-header .sub-nav { 

   margin: 0;

}

.sub-nav a:visited { 

   color: #278A75;

}

.box-content p{ 

   font-family: 'Computer Modern Sans', sans-serif;

}


.filter-button-group li.checked a { 

   color: #D3853D;

}

/***** 

   Responsive: iPad
              *****/

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

   .sub-header .sub-nav li a.btn-filter {
       font-size: 18px;
       padding: 4px 2px;
   }

   #mw-content-text, body {
       background: #f9f9f9;
   }

   .container {
       width: 100%;
       margin: 0;
       padding: 0;
   }

   .content.container {
       margin: 0;
   }

   .navbar-siren {
       box-shadow: 0 4px 0 black;
       background-color: #f9f9f9;
       z-index: 999;
   }

   .navbar-siren .container {
       padding: 0;
       margin: 0 0 0 0;
   }

   .navbar-siren .navbar-header {
       text-align: center;
   }

   .navbar-siren .navbar-nav > li {

       font-size: 15px;
       box-shadow: none;
   }

   .navbar-siren .navbar-nav > li.active {
       box-shadow: none;
   }

   .navbar-siren .navbar-nav > li svg {
       margin: 8px auto 4px auto;
       width: 32px;
       height: 32px;
   }

   article.col-md-12 {
       margin: 0;
       box-shadow: none;
       width: 100%;
   }

   .wrapper-text h1 {
       font-family: "Raleway Thin", sans-serif;
   }

   .wrapper .wrapper-text {
       padding: 10% 15%;
   }

   .wrapper .wrapper-text h1 {
       font-size: 36px;
   }

   .wrapper .wrapper-text p {
       font-size: 18px;
       line-height: 24px;
       padding: 12px 24px;
   }

   .content > article {
       opacity: 1;
       background-color: #fff;
   }

   article p {
       font-size: 18px;
   }

   article h2 {
       font-size: 32px;
   }

   article h3 {
       font-size: 24px;
   }

   article h4 {
       font-size: 18px;
   }

   article h5 {
       font-size: 18px;
       color: #278A75;
   }

}

@media screen and (min-width: 640px) and (max-width: 1024px) { 

   .navbar-siren .container {
       text-align: center;
   }

   .navbar-siren .navbar-right {
       display: inline-block;
       float: none !important;
       margin: auto;
   }

   .content article {
       min-width: 640px;
       padding: 32px 64px;
   }

   .navbar-siren .navbar-nav > li {
       vertical-align: top;
   }

   .caret {
       font-size: 6px;
   }

}

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

   .content article {
       padding: 0 16px;
   }

   article p, article blockquote {
       font-size: 14px;
   }

   .navbar-siren .navbar-nav > li {
       height: 50px;
       font-size: 14px;
   }

   .navbar-siren .navbar-nav > li svg {
       display: none;
   }

   .navbar-siren .navbar-nav > li a:first-child {
       padding-left: 15px;
   }

   .navbar-siren .navbar-nav > li a {
       margin-top: 10px;
       padding: 10px 2px;
   }

   .navbar-siren {
       height: auto;
       border-bottom: 1px solid black;
   }

   .caret {
       display: none;
   }

}

/***** 

   Responsive: PC
              *****/

@media screen and (min-width: 1024px) { 


   .navbar-siren .container {
       background-image: url("BNU-CHINA-logo.png");
       background-size: auto 80%;
       background-position: left center;
       background-repeat: no-repeat;
       width: 100% !important;
   }

   .btn-filter:hover {
       color: #D3853D;
   }

   .btn-filter:hover::after {
       content: "";
       width: 100%;
       height: 1px;
   }

   .btn-filter::after {
       transition: all 0.5s ease-out;
   }

   .navbar-siren .navbar-nav > li {
       transition: box-shadow 2s, background-color 0.25s;
   }

   .navbar-siren .navbar-nav > li:hover {
       transition: box-shadow 0.25s, background-color 0.25s;
   }

   .navbar-siren .navbar-nav > li > a {
       transition: color 0.25s;
   }

   .navbar-siren .navbar-nav > li svg * {
       transition: all 0.25s;
   }

   .navbar-siren .navbar-nav li .dropdown-menu {
       transition: visibility 0s, opacity 0.25s;
   }

   .navbar-siren .navbar-nav li .dropdown-menu li > a::after {
       transition: all 0.5s ease-out;
   }

   .people .people-figure > p {
       transition-property: all;
       transition-duration: 0.6s;
       transition-timing-function: ease-out;
       transition-delay: 0s;
   }

   .people .people-figure > p:hover {
       transition-property: all;
       transition-duration: 0.6s;
       transition-timing-function: ease-out;
       transition-delay: 0.75s;
   }

   .people .people-avatar {
       transition: all 0.6s ease-in-out;
   }

   .people .people-figure .people-intro {
       transition-property: all;
       transition-duration: 0.6s;
       transition-timing-function: ease-out;
       transition-delay: 0s;
   }

   .people .people-figure .people-intro:hover {
       transition-property: all;
       transition-duration: 0.6s;
       transition-timing-function: ease-out;
       transition-delay: 0.75s;
   }

   .people .people-figure .people-intro > p {
       transition-property: all;
       transition-duration: 0.6s;
       transition-timing-function: ease-out;
       transition-delay: 0s;
   }

   .people .people-figure .people-intro:hover > p {
       transition-property: all;
       transition-duration: 0.6s;
       transition-timing-function: ease-out;
       transition-delay: 0.75s;
   }

   .wrapper .wrapper-text p {
       transition: all 0.6s ease-in-out;
   }

}