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

Revision as of 03:06, 15 September 2015 (view source) Happlex (Talk | contribs) ← Older edit		Latest revision as of 01:46, 19 September 2015 (view source) Happlex (Talk | contribs)
(223 intermediate revisions by 2 users not shown)
Line 1:		Line 1:
−	#mw-content-text  {	+	/*****
−	background-color: rgb(248, 250, 238);	+	Background
−	background-image: url("https://static.igem.org/mediawiki/2015/9/98/Bg.jpg");	+	*****/
		+	body {
		+	background-color: #E9DCBA
	}		}
−	@import url(https://fonts.googleapis.com/css?family=Dancing+Script);	+	.content.container {
		+	margin-top: 24px;
		+	padding-bottom: 32px;
		+	}
−	body {	+	/*****
−	background-color: rgb(248, 250, 238);	+	Animation
−	background-image: url("../img/bg.jpg");	+	*****/
−	-webkit-font-smoothing: antialiased;	+	@-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 {		.navbar-siren {
	border: none;		border: none;
	border-radius: 0;		border-radius: 0;
		+	margin: 0;
	background-color: rgba(255, 255, 255, .95);		background-color: rgba(255, 255, 255, .95);
−	box-shadow: 0 4px 0 #eb9745;	+	box-shadow: 0 6px 0 rgba(255, 255, 255, .95);
	}		}
		+
		+
		+	/*****
		+	Header: navigation
		+	*****/
	.navbar-siren .navbar-nav {		.navbar-siren .navbar-nav {
Line 24:		Line 79:
	.navbar-siren .navbar-nav > li {		.navbar-siren .navbar-nav > li {
−	transition: box-shadow 2s, background-color 0.25s;
−
	float: none;		float: none;
	cursor: pointer;		cursor: pointer;
Line 31:		Line 84:
	vertical-align: middle;		vertical-align: middle;
	font-family: "Raleway Thin", sans-serif;		font-family: "Raleway Thin", sans-serif;
−	font-size: 1.2em;	+	font-size: 18px;
−	box-shadow: 0 4px 0 #eb9745;	+	box-shadow: 0 6px 0 transparent;
−	/*border-bottom: 4px solid transparent;*/	+	}
		+
		+	.navbar-siren .navbar-nav > li:hover {
		+	box-shadow: 0 6px 0 #D3853D;
		+	background-color: #D3853D;
	}		}
	.navbar-siren .navbar-nav > li.active {		.navbar-siren .navbar-nav > li.active {
−	box-shadow: 0 4px 0 #D3853D;	+	box-shadow: 0 6px 0 #D3853D;
−	/*border-bottom: 4px solid #eb9745;*/	+
	}		}
	.navbar-siren .navbar-nav > li > a {		.navbar-siren .navbar-nav > li > a {
−		+	text-align: center;
−	transition: color 0.25s;	+	color: #000;
−	color: #1e0501;	+
	}		}
	.navbar-siren .navbar-nav > li:hover > a {		.navbar-siren .navbar-nav > li:hover > a {
	color: white;		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;
	}		}
Line 59:		Line 131:
	border-radius: 0;		border-radius: 0;
	box-shadow: 1px 3px 2px rgba(120, 120, 120, .5);		box-shadow: 1px 3px 2px rgba(120, 120, 120, .5);
−	}
−
−	.navbar-siren .navbar-nav li.dropdown .dropdown-menu {
−
−	transition: visibility 0s, opacity 0.25s;
	display: block;		display: block;
	opacity: 0;		opacity: 0;
Line 69:		Line 136:
	}		}
−	.navbar-siren .navbar-nav li.dropdown:hover .dropdown-menu {	+	.navbar-siren .navbar-nav li:hover .dropdown-menu {
	opacity: 1;		opacity: 1;
	visibility: visible;		visibility: visible;
	}		}
−	.navbar-siren .navbar-nav li.dropdown .dropdown-menu li > a {	+	.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-family: "Raleway Thin", sans-serif;
−	font-size: 1.2em;	+	font-size: 18px;
−	padding: 1em;	+	padding: 16px;
	color: #fff;		color: #fff;
	}		}
Line 85:		Line 160:
	}		}
−	.navbar-siren .navbar-nav li .dropdown-menu li:hover {	+	.navbar-siren .navbar-nav li .dropdown-menu li > a:active {
−	/*box-shadow: 0 1px 6px rgba(120,120,120,.15);*/	+	background-color: #ffa44c;
	}		}
−
	.navbar-siren .navbar-nav li .dropdown-menu li > a::after {		.navbar-siren .navbar-nav li .dropdown-menu li > a::after {
Line 95:		Line 169:
	width: 0;		width: 0;
	height: 1px;		height: 1px;
−	transition: all 0.5s ease-out;
	background-color: transparent;		background-color: transparent;
	}		}
−
	.navbar-siren .navbar-nav li .dropdown-menu li > a:hover::after {		.navbar-siren .navbar-nav li .dropdown-menu li > a:hover::after {
Line 105:		Line 177:
	width: 100%;		width: 100%;
	height: 1px;		height: 1px;
−	background-color: rgba(255,255,255,.5);	+	background-color: rgba(255, 255, 255, .5);
	}		}
		+	/*****
		+	Header: logo
		+	*****/
−	.navbar-siren .navbar-nav > li:hover {	+	.navbar-siren .navbar-header {
−	/*border-bottom: 4px solid #D3853D;*/	+	display: inline-block;
−	box-shadow: 0 4px 0 #D3853D;	+	}
		+	.navbar-siren .navbar-logo {
		+	height: auto;
		+	}
−	transition: box-shadow 0.25s, background-color 0.25s;	+	.navbar-siren .navbar-logo img {
−	background-color: #D3853D;	+	width: 240px;
	}		}
−	.navbar-siren .navbar-nav > li > a:hover {	+	/*****
−	background-color: transparent;	+	Article
−	color: white;	+	*****/
−	}	+
	.content > article {		.content > article {
−	opacity: .95;	+	padding: 32px 64px;
−	padding: 2em 4em;	+
−	min-width: 640px;	+
	background-color: #fff;		background-color: #fff;
	box-shadow: 0px 4px 6px rgba(75, 75, 75, 0.5);		box-shadow: 0px 4px 6px rgba(75, 75, 75, 0.5);
	}		}
−	article h2, article h3, article h4, article h5 {	+	/*****
−	font-family: 'Computer Modern Bright Semibold', sans-serif;	+	Article: reference
−	font-weight: bolder;	+	*****/
		+
		+	.reference {
		+	padding: 12px 0px 0px;
		+	border-top: 1px solid #eee;
		+	}
		+
		+	.reference:before {
	color: #278A75;		color: #278A75;
		+	font-family: "Computer Modern Bright Semibold",sans-serif;
		+	font-size: 18px;
		+	line-height: 16px;
		+	content: "References:";
	}		}
		+	#globalWrapper .reference > ol, .reference > ol {
		+	margin: 0;
		+	padding: 0;
		+	list-style-type: none;
		+	counter-reset: counter;
		+	}
−	article h2 {	+	.reference > ol li {
−	font-size: 24px;	+	font-family: 'Computer Modern Sans', sans-serif  !important;
−	border-bottom: 1px solid #eee;	+	font-size: 12px;
−	cursor: pointer;	+	line-height: 16px;
−	padding: 8px 0;	+	color: rgb(102, 102, 102);
		+	margin: 6px 0;
	}		}
−	article h2::before {	+	.reference > ol li::before {
−	content: "❖";	+	margin-right: 4px;
−	position: relative;	+	letter-spacing: 2px;
−	padding: 2px;	+
	display: inline-block;		display: inline-block;
−	margin-right: 8px;	+	font-family: 'Computer Modern Sans', sans-serif  !important;
−	user-select: none;	+	content: '[' counter(counter) ']';
−	transition: all 0.5s linear;	+	counter-increment: counter;
	}		}
−	article h2:hover::before {	+	/*****
−	transform:rotate(405deg);	+	Article: header
		+	*****/
		+
		+	.page-header {
		+	margin: 40px 0 0;
		+	}
		+
		+	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 a, article h3 a, article h4 a, article h5 a{
		+	font-size: 14px;
		+	padding: 8px 12px;
		+	}
		+
		+	article h2 {
		+	font-size: 26px;
		+	border-bottom: 1px solid #eee;
		+	}
		+
		+	article h2:first-child {
		+	margin-top: 0;
	}		}
	article h3 {		article h3 {
−	font-size: 18px;	+	font-size: 20px;
	word-spacing: -2px;		word-spacing: -2px;
	}		}
		+
		+	article h4 {
		+	font-size: 16px;
		+	}
		+
		+	article h5 {
		+	color: #278A75;
		+	font-size: 16px;
		+	}
		+
		+	/*****
		+	Article: figure
		+	*****/
	article figure {		article figure {
−	padding: 1em 0;	+	padding: 16px 0;
	}		}
Line 176:		Line 343:
	font-family: 'Computer Modern Serif', serif;		font-family: 'Computer Modern Serif', serif;
	color: #278A75;		color: #278A75;
−	padding: 0.5em;	+	padding: 8px;
	}		}
		+
		+	/*****
		+	Article: paragraph
		+	*****/
	article p, article blockquote {		article p, article blockquote {
	font-family: 'Computer Modern Serif', serif;		font-family: 'Computer Modern Serif', serif;
−	font-size: 1em;	+	font-size: 16px;
		+	line-height: 22px;
		+	margin-bottom: 16px;
		+	word-spacing: 2px;
	}		}
		+
		+	/*****
		+	Article: link
		+	*****/
	article a {		article a {
		+	font-family: 'Computer Modern Sans', sans-serif;
	color: #278A75;		color: #278A75;
		+	text-decoration: none;
	}		}
Line 193:		Line 373:
	}		}
−	article > header.page-header {	+	article a:visited {
−	font-family: 'Dancing Script', cursive;	+	color: #278A75;
−	/*font-family: "Georgia", serif;*/	+
−	border: none;	+
	}		}
−	article > header.page-header h1 {	+	article a:visited:hover {
−	font-weight: normal;	+	color: #D3853D;
−	font-size: 48px;	+
−	margin: 0;	+
	}		}
−	article > header h1>small {	+	/*****
−	font-size: 24px;	+	Article: table
		+	*****/
		+	article table th {
		+	font-family: 'Computer Modern Bright Semibold', sans-serif;
	}		}
−	.people {	+	article table td {
−	background-color: #fff;	+	font-family: 'Computer Modern Sans', sans-serif;
		+	}
		+
		+	/*****
		+	Team: people
		+	*****/
		+
		+	.people.container {
		+	margin-bottom: 48px;
		+	padding: 0;
		+	width: 100%;
	}		}
	.people .people-figure {		.people .people-figure {
−	border: 3px solid #fff;	+	border: 2px solid #fff;
	cursor: pointer;		cursor: pointer;
	padding: 33.33% 0 0 0;		padding: 33.33% 0 0 0;
Line 220:		Line 409:
	position: relative;		position: relative;
	overflow: hidden;		overflow: hidden;
−	}
−
−	.people .people-figure>p {
−	padding: 1em;
−	font-size: 1.2em;
−	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 {		.people .people-avatar {
−	transition: all 0.6s ease-in-out;	+	padding: 16px;
−	padding: 1em;	+	font-size: 18px;
−	font-size: 1.2em;	+
	font-family: serif;		font-family: serif;
	position: absolute;		position: absolute;
Line 258:		Line 420:
	width: 100%;		width: 100%;
	height: 100%;		height: 100%;
−	background-size:cover;	+	background-size: cover;
	background-repeat: no-repeat;		background-repeat: no-repeat;
	z-index: 100;		z-index: 100;
Line 268:		Line 430:
	.people .people-figure .people-intro {		.people .people-figure .people-intro {
−	padding: 1em;	+	padding: 16px;
−	font-size: 1.2em;	+	font-size: 18px;
	font-family: 'Dancing Script', cursive;		font-family: 'Dancing Script', cursive;
	font-weight: bold;		font-weight: bold;
	background-color: transparent;		background-color: transparent;
	position: absolute;		position: absolute;
		+	width: 100%;
	height: 100%;		height: 100%;
	top: 0;		top: 0;
	z-index: 101;		z-index: 101;
−	transition-property: all;
−	transition-duration: 0.6s;
−	transition-timing-function: ease-out;
−	transition-delay: 0s;
	}		}
	.people .people-figure .people-intro:hover {		.people .people-figure .people-intro:hover {
	background-color: rgba(211, 133, 61, .5);		background-color: rgba(211, 133, 61, .5);
−	transition-property: all;
−	transition-duration: 0.6s;
−	transition-timing-function: ease-out;
−	transition-delay: 0.75s;
	}		}
Line 305:		Line 460:
	.people .people-figure .people-intro > p {		.people .people-figure .people-intro > p {
−	font-family: 'Computer Modern Bright Semibold', sans-serif;	+	font-family: 'Computer Modern Sans', sans-serif;
	color: transparent;		color: transparent;
	font-weight: normal;		font-weight: normal;
Line 311:		Line 466:
	margin: 0;		margin: 0;
	font-size: 16px;		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-property: all;
	transition-duration: 0.6s;		transition-duration: 0.6s;
	transition-timing-function: ease-out;		transition-timing-function: ease-out;
	transition-delay: 0s;		transition-delay: 0s;
−	line-height: 28px;
	}		}
	.people .people-figure .people-intro:hover > p {		.people .people-figure .people-intro:hover > p {
−	color: white;
	transition-property: all;		transition-property: all;
	transition-duration: 0.6s;		transition-duration: 0.6s;
	transition-timing-function: ease-out;		transition-timing-function: ease-out;
	transition-delay: 0.75s;		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;
		+	}
		+
		+	ul.filter-button-group {
		+	margin: 0 0 8px 0 !important;
		+	}
		+
		+	.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;
		+	}
		+
	}		}

---

Latest revision as of 01:46, 19 September 2015

/*****

   Background
           *****/

body {

   background-color: #E9DCBA

}

.content.container {

   margin-top: 24px;
   padding-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 {

   padding: 12px 0px 0px;
   border-top: 1px solid #eee;

}

.reference:before {

   color: #278A75;
   font-family: "Computer Modern Bright Semibold",sans-serif;
   font-size: 18px;
   line-height: 16px;
   content: "References:";

}

1. globalWrapper .reference > ol, .reference > ol {

   margin: 0;
   padding: 0;
   list-style-type: none;
   counter-reset: counter;

}

.reference > ol li {

   font-family: 'Computer Modern Sans', sans-serif  !important;
   font-size: 12px;
   line-height: 16px;
   color: rgb(102, 102, 102);
   margin: 6px 0;

}

.reference > ol li::before {

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

}

/*****

   Article: header
                *****/

.page-header {

   margin: 40px 0 0;

}

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("");
   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 a, article h3 a, article h4 a, article h5 a{

   font-size: 14px;
   padding: 8px 12px;

}

article h2 {

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

}

article h2:first-child {

   margin-top: 0;

}

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;
   line-height: 22px;
   margin-bottom: 16px;
   word-spacing: 2px;

}

/*****

   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;

}

ul.filter-button-group {

   margin: 0 0 8px 0 !important;

}

.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("");
       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;
   }

}