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

Revision as of 10:20, 16 September 2015

/*****

   Background
           *****/

mw-content-text, body {

   background-image: url("");
   -webkit-font-smoothing: antialiased;

}

.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 4px 0 #eb9745;

}

/*****

   Header: navigation
                   *****/

.navbar-siren .navbar-nav {

   display: table-row;

}

.navbar-siren .navbar-nav > li {

   transition: box-shadow 2s, background-color 0.25s;
   float: none;
   cursor: pointer;
   display: table-cell;
   vertical-align: middle;
   font-family: "Raleway Thin", sans-serif;
   font-size: 18px;
   box-shadow: 0 4px 0 #eb9745;

}

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

   box-shadow: 0 4px 0 #D3853D;
   transition: box-shadow 0.25s, background-color 0.25s;
   background-color: #D3853D;

}

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

   box-shadow: 0 4px 0 #D3853D;

}

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

   text-align: center;
   transition: color 0.25s;
   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: 0 auto 6px auto;
   display: block;
   width: 36px;
   height: 36px;

}

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

   transition: all 0.25s;

}

.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);
   transition: visibility 0s, opacity 0.25s;
   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;
   transition: all 0.5s ease-out;
   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 {

   opacity: .95;
   padding: 32px 64px;
   min-width: 640px;
   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 {

   animation: rotating 5s cubic-bezier(0, 1.8, 1, 1.8) infinite;
   content: "";
   display: block;
   border-radius: 24px;
   position: relative;
   width: 0;
   padding-left: 48px;
   margin: auto;
   height: 48px;
   background-image: url("");
   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: 14px;

}

/*****

   Article: link
              *****/

article a {

   color: #278A75;

}

article a:hover {

   color: #D3853D;
   text-decoration: none;

}

/*****

   Team: people
             *****/

.people {

   margin-bottom: 48px;

}

.people .people-figure {

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

}

.people .people-figure > p {

   padding: 16px;
   font-size: 18px;
   font-family: 'Computer Modern Bright Semibold', sans-serif;
   font-weight: bold;
   background-color: transparent;
   position: absolute;
   height: 100%;
   color: transparent;
   top: 0;
   z-index: 101;
   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0s;

}

.people .people-figure > p:hover {

   background-color: rgba(211, 133, 61, .5);
   color: #fff;
   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;
   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;
   height: 100%;
   top: 0;
   z-index: 101;
   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0s;

}

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

   background-color: rgba(211, 133, 61, .5);
   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0.75s;

}

.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 Bright Semibold', sans-serif;
   color: transparent;
   font-weight: normal;
   padding: 0;
   margin: 0;
   font-size: 16px;
   transition-property: all;
   transition-duration: 0.6s;
   transition-timing-function: ease-out;
   transition-delay: 0s;
   line-height: 20px;

}

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

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

}

/*****

   Article: video
               *****/

article video {

   width: 480px;
   height: 270px;
   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% 20% 20% 20%;
   color: white;

}

.wrapper .wrapper-text h1 {

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

}

.wrapper .wrapper-text p {

   padding: 24px 48px;
   font-size: 24px;
   line-height: 32px;
   font-family: "Raleway Thin", sans-serif;
   font-weight: 700;
   color: rgba(255, 255, 255, .9);
   background-color: rgba(41, 30, 21, .15);
   box-shadow: 0 0 24px rgba(0, 0, 0, .5);
   border: 1px solid rgba(180, 180, 180, .5);
   transition: all 0.6s ease-in-out;
   border-radius: 1px;
   cursor: default;

}

.wrapper .wrapper-text p:hover {

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

}

/*****

   Responsive: iPad
              *****/

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

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

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

   .content.container {
       margin: 0;
   }

   .navbar-siren {
       box-shadow: none;
       border-bottom: 4px solid black;
       background-color: #f9f9f9;
   }

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

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

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

   .navbar-siren .navbar-nav > li {
       font-size: 15px;
   }

   .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 .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;
   }

   article > header.page-header::before {
       animation: rotating 3s linear infinite;
   }

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

   .navbar-siren .navbar-nav li .dropdown-menu {
       transition: none;
   }

}

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

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

   .caret {
       font-size: 6px;
   }

}

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

   .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;
   }

}

@@ Line 1: / Line 1: @@
 /*****
-    Background
-            *****/
-#mw-content-text, body {
-    background-image: url("https://static.igem.org/mediawiki/2015/9/98/Bg.jpg");
-    -webkit-font-smoothing: antialiased;
-}
-.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 4px 0 #eb9745;
-}
-/*****
-    Header: navigation
-                    *****/
-.navbar-siren .navbar-nav {
-    display: table-row;
-}
-.navbar-siren .navbar-nav > li {
-    transition: box-shadow 2s, background-color 0.25s;
-    float: none;
-    cursor: pointer;
-    display: table-cell;
-    vertical-align: middle;
-    font-family: "Raleway Thin", sans-serif;
-    font-size: 18px;
-    box-shadow: 0 4px 0 #eb9745;
-}
-.navbar-siren .navbar-nav > li:hover {
-    box-shadow: 0 4px 0 #D3853D;
-    transition: box-shadow 0.25s, background-color 0.25s;
-    background-color: #D3853D;
-}
-.navbar-siren .navbar-nav > li.active {
-    box-shadow: 0 4px 0 #D3853D;
-}
-.navbar-siren .navbar-nav > li > a {
-    text-align: center;
-    transition: color 0.25s;
-    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: 0 auto 6px auto;
-    display: block;
-    width: 36px;
-    height: 36px;
-}
-.navbar-siren .navbar-nav > li svg * {
-    transition: all 0.25s;
-}
-.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);
-    transition: visibility 0s, opacity 0.25s;
-    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;
-    transition: all 0.5s ease-out;
-    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 {
-    opacity: .95;
-    padding: 32px 64px;
-    min-width: 640px;
-    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 {
-    animation: rotating 5s cubic-bezier(0, 1.8, 1, 1.8) 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: 14px;
-}
-/*****
-    Article: link
-               *****/
-article a {
-    color: #278A75;
-}
-article a:hover {
-    color: #D3853D;
-    text-decoration: none;
-}
-/*****
-    Team: people
-              *****/
-.people {
-    margin-bottom: 48px;
-}
-.people .people-figure {
-    border: 2px solid #fff;
-    cursor: pointer;
-    padding: 33.33% 0 0 0;
-    margin: 0;
-    position: relative;
-    overflow: hidden;
-}
-.people .people-figure > p {
-    padding: 16px;
-    font-size: 18px;
-    font-family: 'Computer Modern Bright Semibold', sans-serif;
-    font-weight: bold;
-    background-color: transparent;
-    position: absolute;
-    height: 100%;
-    color: transparent;
-    top: 0;
-    z-index: 101;
-    transition-property: all;
-    transition-duration: 0.6s;
-    transition-timing-function: ease-out;
-    transition-delay: 0s;
-}
-.people .people-figure > p:hover {
-    background-color: rgba(211, 133, 61, .5);
-    color: #fff;
-    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;
-    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;
-    height: 100%;
-    top: 0;
-    z-index: 101;
-    transition-property: all;
-    transition-duration: 0.6s;
-    transition-timing-function: ease-out;
-    transition-delay: 0s;
-}
-.people .people-figure .people-intro:hover {
-    background-color: rgba(211, 133, 61, .5);
-    transition-property: all;
-    transition-duration: 0.6s;
-    transition-timing-function: ease-out;
-    transition-delay: 0.75s;
-}
-.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 Bright Semibold', sans-serif;
-    color: transparent;
-    font-weight: normal;
-    padding: 0;
-    margin: 0;
-    font-size: 16px;
-    transition-property: all;
-    transition-duration: 0.6s;
-    transition-timing-function: ease-out;
-    transition-delay: 0s;
-    line-height: 20px;
-}
-.people .people-figure .people-intro:hover > p {
-    color: white;
-    transition-property: all;
-    transition-duration: 0.6s;
-    transition-timing-function: ease-out;
-    transition-delay: 0.75s;
-}
-/*****
-    Article: video
-                *****/
-article video {
-    width: 480px;
-    height: 270px;
-    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% 20% 20% 20%;
-    color: white;
-}
-.wrapper .wrapper-text h1 {
-    text-align: center;
-    font-size: 72px;
-    color: rgba(255, 255, 255, .75);
-    font-family: 'Computer Modern Bright Semibold', sans-serif;
-}
-.wrapper .wrapper-text p {
-    padding: 24px 48px;
-    font-size: 24px;
-    line-height: 32px;
-    font-family: "Raleway Thin", sans-serif;
-    font-weight: 700;
-    color: rgba(255, 255, 255, .9);
-    background-color: rgba(41, 30, 21, .15);
-    box-shadow: 0 0 24px rgba(0, 0, 0, .5);
-    border: 1px solid rgba(180, 180, 180, .5);
-    transition: all 0.6s ease-in-out;
-    border-radius: 1px;
-    cursor: default;
-}
-.wrapper .wrapper-text p:hover {
-    background-color: rgba(255, 255, 255, .15);
-    color: #fff;
-    border: 1px solid transparent;
-    box-shadow: 0 0 24px rgba(0, 0, 0, .5);
-}
-/*****
-    Responsive: iPad
-               *****/
-@media screen and (max-width: 1024px) {
-    .container {
-        width: 100%;
-        margin: 0;
-        padding: 0;
-    }
-    .content.container {
-        margin: 0;
-    }
-    .navbar-siren {
-        box-shadow: none;
-        border-bottom: 4px solid black;
-        background-color: #f9f9f9;
-    }
-    .navbar-siren .container {
-        padding: 0;
-        margin: 0 0 0 -15px;
-    }
-    .navbar-siren .navbar-header {
-        text-align: center;
-    }
-    .navbar-siren .navbar-nav > li {
-        box-shadow: none;
-    }
-    ./*****
      Background
              *****/
@@ Line 1,128: / Line 550: @@
      #mw-content-text, body {
-         background: #fff;
+         background: #f9f9f9;
      }
@@ Line 1,218: / Line 640: @@
          font-size: 18px;
          color: #278A75;
+    }
+    article > header.page-header::before {
+        animation: rotating 3s linear infinite;
      }