Difference between revisions of "Team:Mingdao/Notebook"

(Prototype team page)
 
Line 1: Line 1:
 
{{Mingdao}}
 
{{Mingdao}}
 
<html>
 
<html>
 +
<head>
 +
<title>iGEM Human Practice</title>
 +
<meta charset="utf-8" />
 +
<meta name="viewport" content="width=device-width, initial-scale=1" />
 +
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 +
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
 +
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
  
 +
<!-- BOOTSTRAP -->
  
−
<div class="column full_size">
+
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 +
    <!-- Bootstrap CSS -->
 +
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  
−
<h1>Notebook</h1>
+
<!-- BOOTSTRAP -->
−
<p> Document the dates you worked on your project. This should be a detailed account of the work done each day for your project.</p>
+
<style type='text/css'>
 +
      #top_title, #sideMenu{
 +
        display: none;
 +
      }
  
−
</div>
+
      #content{
−
<div class="clear"></div>
+
        width: 100%;
 +
        margin: 0;
 +
        padding: 0;
 +
        background: #f3f4f4;}
  
 +
</style>
  
  
−
<div class="column two_thirds_size">
+
<style>
−
<h3>What should this page have?</h3>
+
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
−
<ul>
+
body, html {
−
<li>Chronological notes of what your team is doing.</li>
+
    height: 100%;
−
<li> Brief descriptions of daily important events.</li>
+
    color: #777;
−
<li>Pictures of your progress. </li>
+
    line-height: 1.8;
−
<li>Mention who participated in what task.</li>
+
}
−
</ul>
+
  
−
</div>
+
/* Create a Parallax Effect */
 +
.bgimg-1, .bgimg-2, .bgimg-3 {
 +
    background-attachment: fixed;
 +
    background-position: center;
 +
    background-repeat: no-repeat;
 +
    background-size: cover;
 +
}
  
−
<div class="column third_size">
+
/* First image (Logo. Full height) */
−
<div class="highlight decoration_A_full">
+
.bgimg-1 {
−
<h3>Inspiration</h3>
+
    background-image: url('https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg');
−
<p>You can see what others teams have done to organize their notes:</p>
+
    min-height: 100%;
 +
}
  
−
<ul>  
+
/* Second image (Portfolio) */
−
<li><a href="https://2014.igem.org/Team:ATOMS-Turkiye/Notebook">2014 ATOMS-Turkiye</a></li>
+
.bgimg-2 {
−
<li><a href="https://2014.igem.org/Team:Tec-Monterrey/ITESM14_project.html#tab_notebook">2014 Tec Monterrey</a></li>
+
    background-image: url("https://static.igem.org/mediawiki/2017/3/3b/MD-head-banner-1.jpeg");
−
<li><a href="https://2014.igem.org/Team:Kyoto/Notebook/Magnetosome_Formation#title">2014 Kyoto</a></li>
+
    min-height: 400px;
−
<li><a href="https://2014.igem.org/Team:Cornell/notebook">2014 Cornell</a></li>
+
}
−
</ul>
+
 
−
</div>
+
/* Third image (Contact) */
 +
.bgimg-3 {
 +
    background-image: url("https://static.igem.org/mediawiki/2017/a/a3/MD-trianglify-back-0.png");
 +
    min-height: 200px;
 +
}
 +
 
 +
.w3-wide {letter-spacing: 10px;}
 +
.w3-hover-opacity {cursor: pointer;}
 +
 
 +
/* Turn off parallax scrolling for tablets and phones */
 +
@media only screen and (max-device-width: 1024px) {
 +
    .bgimg-1, .bgimg-2, .bgimg-3 {
 +
        background-attachment: scroll;
 +
    }
 +
}
 +
</style>
 +
 
 +
 
 +
 
 +
 
 +
<style>
 +
@charset "UTF-8";
 +
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);
 +
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700");
 +
 
 +
/*
 +
Hielo by TEMPLATED
 +
templated.co @templatedco
 +
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
 +
*/
 +
 
 +
/* Reset */
 +
 
 +
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 +
margin: 0;
 +
padding: 0;
 +
border: 0;
 +
font-size: 100%;
 +
font: inherit;
 +
vertical-align: baseline;
 +
}
 +
 
 +
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
 +
display: block;
 +
}
 +
 
 +
body {
 +
line-height: 1;
 +
}
 +
 
 +
ol, ul {
 +
list-style: none;
 +
}
 +
 
 +
blockquote, q {
 +
quotes: none;
 +
}
 +
 
 +
blockquote:before, blockquote:after, q:before, q:after {
 +
content: '';
 +
content: none;
 +
}
 +
 
 +
table {
 +
border-collapse: collapse;
 +
border-spacing: 0;
 +
}
 +
 
 +
body {
 +
-webkit-text-size-adjust: none;
 +
}
 +
 
 +
/* Box Model */
 +
 
 +
*, *:before, *:after {
 +
-moz-box-sizing: border-box;
 +
-webkit-box-sizing: border-box;
 +
box-sizing: border-box;
 +
}
 +
 
 +
/* Containers */
 +
 
 +
.container {
 +
margin-left: auto;
 +
margin-right: auto;
 +
}
 +
 
 +
.container.\31 25\25 {
 +
width: 100%;
 +
max-width: 100rem;
 +
min-width: 80rem;
 +
}
 +
 
 +
.container.\37 5\25 {
 +
width: 60rem;
 +
}
 +
 
 +
.container.\35 0\25 {
 +
width: 40rem;
 +
}
 +
 
 +
.container.\32 5\25 {
 +
width: 20rem;
 +
}
 +
 
 +
.container {
 +
width: 80rem;
 +
}
 +
 
 +
@media screen and (max-width: 1680px) {
 +
 
 +
.container.\31 25\25 {
 +
width: 100%;
 +
max-width: 100rem;
 +
min-width: 80rem;
 +
}
 +
 
 +
.container.\37 5\25 {
 +
width: 60rem;
 +
}
 +
 
 +
.container.\35 0\25 {
 +
width: 40rem;
 +
}
 +
 
 +
.container.\32 5\25 {
 +
width: 20rem;
 +
}
 +
 
 +
.container {
 +
width: 80rem;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 1280px) {
 +
 
 +
.container.\31 25\25 {
 +
width: 100%;
 +
max-width: 81.25rem;
 +
min-width: 65rem;
 +
}
 +
 
 +
.container.\37 5\25 {
 +
width: 48.75rem;
 +
}
 +
 
 +
.container.\35 0\25 {
 +
width: 32.5rem;
 +
}
 +
 
 +
.container.\32 5\25 {
 +
width: 16.25rem;
 +
}
 +
 
 +
.container {
 +
width: 65rem;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 980px) {
 +
 
 +
.container.\31 25\25 {
 +
width: 100%;
 +
max-width: 112.5%;
 +
min-width: 90%;
 +
}
 +
 
 +
.container.\37 5\25 {
 +
width: 67.5%;
 +
}
 +
 
 +
.container.\35 0\25 {
 +
width: 45%;
 +
}
 +
 
 +
.container.\32 5\25 {
 +
width: 22.5%;
 +
}
 +
 
 +
.container {
 +
width: 90%;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
.container.\31 25\25 {
 +
width: 100%;
 +
max-width: 112.5%;
 +
min-width: 90%;
 +
}
 +
 
 +
.container.\37 5\25 {
 +
width: 67.5%;
 +
}
 +
 
 +
.container.\35 0\25 {
 +
width: 45%;
 +
}
 +
 
 +
.container.\32 5\25 {
 +
width: 22.5%;
 +
}
 +
 
 +
.container {
 +
width: 90% !important;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 480px) {
 +
 
 +
.container.\31 25\25 {
 +
width: 100%;
 +
max-width: 112.5%;
 +
min-width: 90%;
 +
}
 +
 
 +
.container.\37 5\25 {
 +
width: 67.5%;
 +
}
 +
 
 +
.container.\35 0\25 {
 +
width: 45%;
 +
}
 +
 
 +
.container.\32 5\25 {
 +
width: 22.5%;
 +
}
 +
 
 +
.container {
 +
width: 90% !important;
 +
}
 +
 
 +
}
 +
 
 +
/* Grid */
 +
 
 +
.row {
 +
border-bottom: solid 1px transparent;
 +
-moz-box-sizing: border-box;
 +
-webkit-box-sizing: border-box;
 +
box-sizing: border-box;
 +
}
 +
 
 +
.row > * {
 +
float: left;
 +
-moz-box-sizing: border-box;
 +
-webkit-box-sizing: border-box;
 +
box-sizing: border-box;
 +
}
 +
 
 +
.row:after, .row:before {
 +
content: '';
 +
display: block;
 +
clear: both;
 +
height: 0;
 +
}
 +
 
 +
.row.uniform > * > :first-child {
 +
margin-top: 0;
 +
}
 +
 
 +
.row.uniform > * > :last-child {
 +
margin-bottom: 0;
 +
}
 +
 
 +
.row.\30 \25 > * {
 +
padding: 0 0 0 0rem;
 +
}
 +
 
 +
.row.\30 \25 {
 +
margin: 0 0 -1px 0rem;
 +
}
 +
 
 +
.row.uniform.\30 \25 > * {
 +
padding: 0rem 0 0 0rem;
 +
}
 +
 
 +
.row.uniform.\30 \25 {
 +
margin: 0rem 0 -1px 0rem;
 +
}
 +
 
 +
.row > * {
 +
padding: 0 0 0 2rem;
 +
}
 +
 
 +
.row {
 +
margin: 0 0 -1px -2rem;
 +
}
 +
 
 +
.row.uniform > * {
 +
padding: 2rem 0 0 2rem;
 +
}
 +
 
 +
.row.uniform {
 +
margin: -2rem 0 -1px -2rem;
 +
}
 +
 
 +
.row.\32 00\25 > * {
 +
padding: 0 0 0 4rem;
 +
}
 +
 
 +
.row.\32 00\25 {
 +
margin: 0 0 -1px -4rem;
 +
}
 +
 
 +
.row.uniform.\32 00\25 > * {
 +
padding: 4rem 0 0 4rem;
 +
}
 +
 
 +
.row.uniform.\32 00\25 {
 +
margin: -4rem 0 -1px -4rem;
 +
}
 +
 
 +
.row.\31 50\25 > * {
 +
padding: 0 0 0 3rem;
 +
}
 +
 
 +
.row.\31 50\25 {
 +
margin: 0 0 -1px -3rem;
 +
}
 +
 
 +
.row.uniform.\31 50\25 > * {
 +
padding: 3rem 0 0 3rem;
 +
}
 +
 
 +
.row.uniform.\31 50\25 {
 +
margin: -3rem 0 -1px -3rem;
 +
}
 +
 
 +
.row.\35 0\25 > * {
 +
padding: 0 0 0 1rem;
 +
}
 +
 
 +
.row.\35 0\25 {
 +
margin: 0 0 -1px -1rem;
 +
}
 +
 
 +
.row.uniform.\35 0\25 > * {
 +
padding: 1rem 0 0 1rem;
 +
}
 +
 
 +
.row.uniform.\35 0\25 {
 +
margin: -1rem 0 -1px -1rem;
 +
}
 +
 
 +
.row.\32 5\25 > * {
 +
padding: 0 0 0 0.5rem;
 +
}
 +
 
 +
.row.\32 5\25 {
 +
margin: 0 0 -1px -0.5rem;
 +
}
 +
 
 +
.row.uniform.\32 5\25 > * {
 +
padding: 0.5rem 0 0 0.5rem;
 +
}
 +
 
 +
.row.uniform.\32 5\25 {
 +
margin: -0.5rem 0 -1px -0.5rem;
 +
}
 +
 
 +
.\31 2u, .\31 2u\24 {
 +
width: 100%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 1u, .\31 1u\24 {
 +
width: 91.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 0u, .\31 0u\24 {
 +
width: 83.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\39 u, .\39 u\24 {
 +
width: 75%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\38 u, .\38 u\24 {
 +
width: 66.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\37 u, .\37 u\24 {
 +
width: 58.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\36 u, .\36 u\24 {
 +
width: 50%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\35 u, .\35 u\24 {
 +
width: 41.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\34 u, .\34 u\24 {
 +
width: 33.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\33 u, .\33 u\24 {
 +
width: 25%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\32 u, .\32 u\24 {
 +
width: 16.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 u, .\31 u\24 {
 +
width: 8.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 2u\24 + *,
 +
.\31 1u\24 + *,
 +
.\31 0u\24 + *,
 +
.\39 u\24 + *,
 +
.\38 u\24 + *,
 +
.\37 u\24 + *,
 +
.\36 u\24 + *,
 +
.\35 u\24 + *,
 +
.\34 u\24 + *,
 +
.\33 u\24 + *,
 +
.\32 u\24 + *,
 +
.\31 u\24 + * {
 +
clear: left;
 +
}
 +
 
 +
.\-11u {
 +
margin-left: 91.66667%;
 +
}
 +
 
 +
.\-10u {
 +
margin-left: 83.33333%;
 +
}
 +
 
 +
.\-9u {
 +
margin-left: 75%;
 +
}
 +
 
 +
.\-8u {
 +
margin-left: 66.66667%;
 +
}
 +
 
 +
.\-7u {
 +
margin-left: 58.33333%;
 +
}
 +
 
 +
.\-6u {
 +
margin-left: 50%;
 +
}
 +
 
 +
.\-5u {
 +
margin-left: 41.66667%;
 +
}
 +
 
 +
.\-4u {
 +
margin-left: 33.33333%;
 +
}
 +
 
 +
.\-3u {
 +
margin-left: 25%;
 +
}
 +
 
 +
.\-2u {
 +
margin-left: 16.66667%;
 +
}
 +
 
 +
.\-1u {
 +
margin-left: 8.33333%;
 +
}
 +
 
 +
@media screen and (max-width: 1680px) {
 +
 
 +
.row > * {
 +
padding: 0 0 0 2rem;
 +
}
 +
 
 +
.row {
 +
margin: 0 0 -1px -2rem;
 +
}
 +
 
 +
.row.uniform > * {
 +
padding: 2rem 0 0 2rem;
 +
}
 +
 
 +
.row.uniform {
 +
margin: -2rem 0 -1px -2rem;
 +
}
 +
 
 +
.row.\32 00\25 > * {
 +
padding: 0 0 0 4rem;
 +
}
 +
 
 +
.row.\32 00\25 {
 +
margin: 0 0 -1px -4rem;
 +
}
 +
 
 +
.row.uniform.\32 00\25 > * {
 +
padding: 4rem 0 0 4rem;
 +
}
 +
 
 +
.row.uniform.\32 00\25 {
 +
margin: -4rem 0 -1px -4rem;
 +
}
 +
 
 +
.row.\31 50\25 > * {
 +
padding: 0 0 0 3rem;
 +
}
 +
 
 +
.row.\31 50\25 {
 +
margin: 0 0 -1px -3rem;
 +
}
 +
 
 +
.row.uniform.\31 50\25 > * {
 +
padding: 3rem 0 0 3rem;
 +
}
 +
 
 +
.row.uniform.\31 50\25 {
 +
margin: -3rem 0 -1px -3rem;
 +
}
 +
 
 +
.row.\35 0\25 > * {
 +
padding: 0 0 0 1rem;
 +
}
 +
 
 +
.row.\35 0\25 {
 +
margin: 0 0 -1px -1rem;
 +
}
 +
 
 +
.row.uniform.\35 0\25 > * {
 +
padding: 1rem 0 0 1rem;
 +
}
 +
 
 +
.row.uniform.\35 0\25 {
 +
margin: -1rem 0 -1px -1rem;
 +
}
 +
 
 +
.row.\32 5\25 > * {
 +
padding: 0 0 0 0.5rem;
 +
}
 +
 
 +
.row.\32 5\25 {
 +
margin: 0 0 -1px -0.5rem;
 +
}
 +
 
 +
.row.uniform.\32 5\25 > * {
 +
padding: 0.5rem 0 0 0.5rem;
 +
}
 +
 
 +
.row.uniform.\32 5\25 {
 +
margin: -0.5rem 0 -1px -0.5rem;
 +
}
 +
 
 +
.\31 2u\28xlarge\29, .\31 2u\24\28xlarge\29 {
 +
width: 100%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 1u\28xlarge\29, .\31 1u\24\28xlarge\29 {
 +
width: 91.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 0u\28xlarge\29, .\31 0u\24\28xlarge\29 {
 +
width: 83.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\39 u\28xlarge\29, .\39 u\24\28xlarge\29 {
 +
width: 75%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\38 u\28xlarge\29, .\38 u\24\28xlarge\29 {
 +
width: 66.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\37 u\28xlarge\29, .\37 u\24\28xlarge\29 {
 +
width: 58.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\36 u\28xlarge\29, .\36 u\24\28xlarge\29 {
 +
width: 50%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\35 u\28xlarge\29, .\35 u\24\28xlarge\29 {
 +
width: 41.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\34 u\28xlarge\29, .\34 u\24\28xlarge\29 {
 +
width: 33.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\33 u\28xlarge\29, .\33 u\24\28xlarge\29 {
 +
width: 25%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\32 u\28xlarge\29, .\32 u\24\28xlarge\29 {
 +
width: 16.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 u\28xlarge\29, .\31 u\24\28xlarge\29 {
 +
width: 8.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 2u\24\28xlarge\29 + *,
 +
.\31 1u\24\28xlarge\29 + *,
 +
.\31 0u\24\28xlarge\29 + *,
 +
.\39 u\24\28xlarge\29 + *,
 +
.\38 u\24\28xlarge\29 + *,
 +
.\37 u\24\28xlarge\29 + *,
 +
.\36 u\24\28xlarge\29 + *,
 +
.\35 u\24\28xlarge\29 + *,
 +
.\34 u\24\28xlarge\29 + *,
 +
.\33 u\24\28xlarge\29 + *,
 +
.\32 u\24\28xlarge\29 + *,
 +
.\31 u\24\28xlarge\29 + * {
 +
clear: left;
 +
}
 +
 
 +
.\-11u\28xlarge\29 {
 +
margin-left: 91.66667%;
 +
}
 +
 
 +
.\-10u\28xlarge\29 {
 +
margin-left: 83.33333%;
 +
}
 +
 
 +
.\-9u\28xlarge\29 {
 +
margin-left: 75%;
 +
}
 +
 
 +
.\-8u\28xlarge\29 {
 +
margin-left: 66.66667%;
 +
}
 +
 
 +
.\-7u\28xlarge\29 {
 +
margin-left: 58.33333%;
 +
}
 +
 
 +
.\-6u\28xlarge\29 {
 +
margin-left: 50%;
 +
}
 +
 
 +
.\-5u\28xlarge\29 {
 +
margin-left: 41.66667%;
 +
}
 +
 
 +
.\-4u\28xlarge\29 {
 +
margin-left: 33.33333%;
 +
}
 +
 
 +
.\-3u\28xlarge\29 {
 +
margin-left: 25%;
 +
}
 +
 
 +
.\-2u\28xlarge\29 {
 +
margin-left: 16.66667%;
 +
}
 +
 
 +
.\-1u\28xlarge\29 {
 +
margin-left: 8.33333%;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 1280px) {
 +
 
 +
.row > * {
 +
padding: 0 0 0 1.5rem;
 +
}
 +
 
 +
.row {
 +
margin: 0 0 -1px -1.5rem;
 +
}
 +
 
 +
.row.uniform > * {
 +
padding: 1.5rem 0 0 1.5rem;
 +
}
 +
 
 +
.row.uniform {
 +
margin: -1.5rem 0 -1px -1.5rem;
 +
}
 +
 
 +
.row.\32 00\25 > * {
 +
padding: 0 0 0 3rem;
 +
}
 +
 
 +
.row.\32 00\25 {
 +
margin: 0 0 -1px -3rem;
 +
}
 +
 
 +
.row.uniform.\32 00\25 > * {
 +
padding: 3rem 0 0 3rem;
 +
}
 +
 
 +
.row.uniform.\32 00\25 {
 +
margin: -3rem 0 -1px -3rem;
 +
}
 +
 
 +
.row.\31 50\25 > * {
 +
padding: 0 0 0 2.25rem;
 +
}
 +
 
 +
.row.\31 50\25 {
 +
margin: 0 0 -1px -2.25rem;
 +
}
 +
 
 +
.row.uniform.\31 50\25 > * {
 +
padding: 2.25rem 0 0 2.25rem;
 +
}
 +
 
 +
.row.uniform.\31 50\25 {
 +
margin: -2.25rem 0 -1px -2.25rem;
 +
}
 +
 
 +
.row.\35 0\25 > * {
 +
padding: 0 0 0 0.75rem;
 +
}
 +
 
 +
.row.\35 0\25 {
 +
margin: 0 0 -1px -0.75rem;
 +
}
 +
 
 +
.row.uniform.\35 0\25 > * {
 +
padding: 0.75rem 0 0 0.75rem;
 +
}
 +
 
 +
.row.uniform.\35 0\25 {
 +
margin: -0.75rem 0 -1px -0.75rem;
 +
}
 +
 
 +
.row.\32 5\25 > * {
 +
padding: 0 0 0 0.375rem;
 +
}
 +
 
 +
.row.\32 5\25 {
 +
margin: 0 0 -1px -0.375rem;
 +
}
 +
 
 +
.row.uniform.\32 5\25 > * {
 +
padding: 0.375rem 0 0 0.375rem;
 +
}
 +
 
 +
.row.uniform.\32 5\25 {
 +
margin: -0.375rem 0 -1px -0.375rem;
 +
}
 +
 
 +
.\31 2u\28large\29, .\31 2u\24\28large\29 {
 +
width: 100%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 1u\28large\29, .\31 1u\24\28large\29 {
 +
width: 91.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 0u\28large\29, .\31 0u\24\28large\29 {
 +
width: 83.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\39 u\28large\29, .\39 u\24\28large\29 {
 +
width: 75%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\38 u\28large\29, .\38 u\24\28large\29 {
 +
width: 66.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\37 u\28large\29, .\37 u\24\28large\29 {
 +
width: 58.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\36 u\28large\29, .\36 u\24\28large\29 {
 +
width: 50%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\35 u\28large\29, .\35 u\24\28large\29 {
 +
width: 41.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\34 u\28large\29, .\34 u\24\28large\29 {
 +
width: 33.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\33 u\28large\29, .\33 u\24\28large\29 {
 +
width: 25%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\32 u\28large\29, .\32 u\24\28large\29 {
 +
width: 16.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 u\28large\29, .\31 u\24\28large\29 {
 +
width: 8.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 2u\24\28large\29 + *,
 +
.\31 1u\24\28large\29 + *,
 +
.\31 0u\24\28large\29 + *,
 +
.\39 u\24\28large\29 + *,
 +
.\38 u\24\28large\29 + *,
 +
.\37 u\24\28large\29 + *,
 +
.\36 u\24\28large\29 + *,
 +
.\35 u\24\28large\29 + *,
 +
.\34 u\24\28large\29 + *,
 +
.\33 u\24\28large\29 + *,
 +
.\32 u\24\28large\29 + *,
 +
.\31 u\24\28large\29 + * {
 +
clear: left;
 +
}
 +
 
 +
.\-11u\28large\29 {
 +
margin-left: 91.66667%;
 +
}
 +
 
 +
.\-10u\28large\29 {
 +
margin-left: 83.33333%;
 +
}
 +
 
 +
.\-9u\28large\29 {
 +
margin-left: 75%;
 +
}
 +
 
 +
.\-8u\28large\29 {
 +
margin-left: 66.66667%;
 +
}
 +
 
 +
.\-7u\28large\29 {
 +
margin-left: 58.33333%;
 +
}
 +
 
 +
.\-6u\28large\29 {
 +
margin-left: 50%;
 +
}
 +
 
 +
.\-5u\28large\29 {
 +
margin-left: 41.66667%;
 +
}
 +
 
 +
.\-4u\28large\29 {
 +
margin-left: 33.33333%;
 +
}
 +
 
 +
.\-3u\28large\29 {
 +
margin-left: 25%;
 +
}
 +
 
 +
.\-2u\28large\29 {
 +
margin-left: 16.66667%;
 +
}
 +
 
 +
.\-1u\28large\29 {
 +
margin-left: 8.33333%;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 980px) {
 +
 
 +
.row > * {
 +
padding: 0 0 0 1.5rem;
 +
}
 +
 
 +
.row {
 +
margin: 0 0 -1px -1.5rem;
 +
}
 +
 
 +
.row.uniform > * {
 +
padding: 1.5rem 0 0 1.5rem;
 +
}
 +
 
 +
.row.uniform {
 +
margin: -1.5rem 0 -1px -1.5rem;
 +
}
 +
 
 +
.row.\32 00\25 > * {
 +
padding: 0 0 0 3rem;
 +
}
 +
 
 +
.row.\32 00\25 {
 +
margin: 0 0 -1px -3rem;
 +
}
 +
 
 +
.row.uniform.\32 00\25 > * {
 +
padding: 3rem 0 0 3rem;
 +
}
 +
 
 +
.row.uniform.\32 00\25 {
 +
margin: -3rem 0 -1px -3rem;
 +
}
 +
 
 +
.row.\31 50\25 > * {
 +
padding: 0 0 0 2.25rem;
 +
}
 +
 
 +
.row.\31 50\25 {
 +
margin: 0 0 -1px -2.25rem;
 +
}
 +
 
 +
.row.uniform.\31 50\25 > * {
 +
padding: 2.25rem 0 0 2.25rem;
 +
}
 +
 
 +
.row.uniform.\31 50\25 {
 +
margin: -2.25rem 0 -1px -2.25rem;
 +
}
 +
 
 +
.row.\35 0\25 > * {
 +
padding: 0 0 0 0.75rem;
 +
}
 +
 
 +
.row.\35 0\25 {
 +
margin: 0 0 -1px -0.75rem;
 +
}
 +
 
 +
.row.uniform.\35 0\25 > * {
 +
padding: 0.75rem 0 0 0.75rem;
 +
}
 +
 
 +
.row.uniform.\35 0\25 {
 +
margin: -0.75rem 0 -1px -0.75rem;
 +
}
 +
 
 +
.row.\32 5\25 > * {
 +
padding: 0 0 0 0.375rem;
 +
}
 +
 
 +
.row.\32 5\25 {
 +
margin: 0 0 -1px -0.375rem;
 +
}
 +
 
 +
.row.uniform.\32 5\25 > * {
 +
padding: 0.375rem 0 0 0.375rem;
 +
}
 +
 
 +
.row.uniform.\32 5\25 {
 +
margin: -0.375rem 0 -1px -0.375rem;
 +
}
 +
 
 +
.\31 2u\28medium\29, .\31 2u\24\28medium\29 {
 +
width: 100%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 1u\28medium\29, .\31 1u\24\28medium\29 {
 +
width: 91.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 0u\28medium\29, .\31 0u\24\28medium\29 {
 +
width: 83.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\39 u\28medium\29, .\39 u\24\28medium\29 {
 +
width: 75%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\38 u\28medium\29, .\38 u\24\28medium\29 {
 +
width: 66.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\37 u\28medium\29, .\37 u\24\28medium\29 {
 +
width: 58.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\36 u\28medium\29, .\36 u\24\28medium\29 {
 +
width: 50%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\35 u\28medium\29, .\35 u\24\28medium\29 {
 +
width: 41.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\34 u\28medium\29, .\34 u\24\28medium\29 {
 +
width: 33.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\33 u\28medium\29, .\33 u\24\28medium\29 {
 +
width: 25%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\32 u\28medium\29, .\32 u\24\28medium\29 {
 +
width: 16.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 u\28medium\29, .\31 u\24\28medium\29 {
 +
width: 8.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 2u\24\28medium\29 + *,
 +
.\31 1u\24\28medium\29 + *,
 +
.\31 0u\24\28medium\29 + *,
 +
.\39 u\24\28medium\29 + *,
 +
.\38 u\24\28medium\29 + *,
 +
.\37 u\24\28medium\29 + *,
 +
.\36 u\24\28medium\29 + *,
 +
.\35 u\24\28medium\29 + *,
 +
.\34 u\24\28medium\29 + *,
 +
.\33 u\24\28medium\29 + *,
 +
.\32 u\24\28medium\29 + *,
 +
.\31 u\24\28medium\29 + * {
 +
clear: left;
 +
}
 +
 
 +
.\-11u\28medium\29 {
 +
margin-left: 91.66667%;
 +
}
 +
 
 +
.\-10u\28medium\29 {
 +
margin-left: 83.33333%;
 +
}
 +
 
 +
.\-9u\28medium\29 {
 +
margin-left: 75%;
 +
}
 +
 
 +
.\-8u\28medium\29 {
 +
margin-left: 66.66667%;
 +
}
 +
 
 +
.\-7u\28medium\29 {
 +
margin-left: 58.33333%;
 +
}
 +
 
 +
.\-6u\28medium\29 {
 +
margin-left: 50%;
 +
}
 +
 
 +
.\-5u\28medium\29 {
 +
margin-left: 41.66667%;
 +
}
 +
 
 +
.\-4u\28medium\29 {
 +
margin-left: 33.33333%;
 +
}
 +
 
 +
.\-3u\28medium\29 {
 +
margin-left: 25%;
 +
}
 +
 
 +
.\-2u\28medium\29 {
 +
margin-left: 16.66667%;
 +
}
 +
 
 +
.\-1u\28medium\29 {
 +
margin-left: 8.33333%;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
.row > * {
 +
padding: 0 0 0 1.25rem;
 +
}
 +
 
 +
.row {
 +
margin: 0 0 -1px -1.25rem;
 +
}
 +
 
 +
.row.uniform > * {
 +
padding: 1.25rem 0 0 1.25rem;
 +
}
 +
 
 +
.row.uniform {
 +
margin: -1.25rem 0 -1px -1.25rem;
 +
}
 +
 
 +
.row.\32 00\25 > * {
 +
padding: 0 0 0 2.5rem;
 +
}
 +
 
 +
.row.\32 00\25 {
 +
margin: 0 0 -1px -2.5rem;
 +
}
 +
 
 +
.row.uniform.\32 00\25 > * {
 +
padding: 2.5rem 0 0 2.5rem;
 +
}
 +
 
 +
.row.uniform.\32 00\25 {
 +
margin: -2.5rem 0 -1px -2.5rem;
 +
}
 +
 
 +
.row.\31 50\25 > * {
 +
padding: 0 0 0 1.875rem;
 +
}
 +
 
 +
.row.\31 50\25 {
 +
margin: 0 0 -1px -1.875rem;
 +
}
 +
 
 +
.row.uniform.\31 50\25 > * {
 +
padding: 1.875rem 0 0 1.875rem;
 +
}
 +
 
 +
.row.uniform.\31 50\25 {
 +
margin: -1.875rem 0 -1px -1.875rem;
 +
}
 +
 
 +
.row.\35 0\25 > * {
 +
padding: 0 0 0 0.625rem;
 +
}
 +
 
 +
.row.\35 0\25 {
 +
margin: 0 0 -1px -0.625rem;
 +
}
 +
 
 +
.row.uniform.\35 0\25 > * {
 +
padding: 0.625rem 0 0 0.625rem;
 +
}
 +
 
 +
.row.uniform.\35 0\25 {
 +
margin: -0.625rem 0 -1px -0.625rem;
 +
}
 +
 
 +
.row.\32 5\25 > * {
 +
padding: 0 0 0 0.3125rem;
 +
}
 +
 
 +
.row.\32 5\25 {
 +
margin: 0 0 -1px -0.3125rem;
 +
}
 +
 
 +
.row.uniform.\32 5\25 > * {
 +
padding: 0.3125rem 0 0 0.3125rem;
 +
}
 +
 
 +
.row.uniform.\32 5\25 {
 +
margin: -0.3125rem 0 -1px -0.3125rem;
 +
}
 +
 
 +
.\31 2u\28small\29, .\31 2u\24\28small\29 {
 +
width: 100%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 1u\28small\29, .\31 1u\24\28small\29 {
 +
width: 91.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 0u\28small\29, .\31 0u\24\28small\29 {
 +
width: 83.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\39 u\28small\29, .\39 u\24\28small\29 {
 +
width: 75%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\38 u\28small\29, .\38 u\24\28small\29 {
 +
width: 66.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\37 u\28small\29, .\37 u\24\28small\29 {
 +
width: 58.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\36 u\28small\29, .\36 u\24\28small\29 {
 +
width: 50%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\35 u\28small\29, .\35 u\24\28small\29 {
 +
width: 41.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\34 u\28small\29, .\34 u\24\28small\29 {
 +
width: 33.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\33 u\28small\29, .\33 u\24\28small\29 {
 +
width: 25%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\32 u\28small\29, .\32 u\24\28small\29 {
 +
width: 16.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 u\28small\29, .\31 u\24\28small\29 {
 +
width: 8.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 2u\24\28small\29 + *,
 +
.\31 1u\24\28small\29 + *,
 +
.\31 0u\24\28small\29 + *,
 +
.\39 u\24\28small\29 + *,
 +
.\38 u\24\28small\29 + *,
 +
.\37 u\24\28small\29 + *,
 +
.\36 u\24\28small\29 + *,
 +
.\35 u\24\28small\29 + *,
 +
.\34 u\24\28small\29 + *,
 +
.\33 u\24\28small\29 + *,
 +
.\32 u\24\28small\29 + *,
 +
.\31 u\24\28small\29 + * {
 +
clear: left;
 +
}
 +
 
 +
.\-11u\28small\29 {
 +
margin-left: 91.66667%;
 +
}
 +
 
 +
.\-10u\28small\29 {
 +
margin-left: 83.33333%;
 +
}
 +
 
 +
.\-9u\28small\29 {
 +
margin-left: 75%;
 +
}
 +
 
 +
.\-8u\28small\29 {
 +
margin-left: 66.66667%;
 +
}
 +
 
 +
.\-7u\28small\29 {
 +
margin-left: 58.33333%;
 +
}
 +
 
 +
.\-6u\28small\29 {
 +
margin-left: 50%;
 +
}
 +
 
 +
.\-5u\28small\29 {
 +
margin-left: 41.66667%;
 +
}
 +
 
 +
.\-4u\28small\29 {
 +
margin-left: 33.33333%;
 +
}
 +
 
 +
.\-3u\28small\29 {
 +
margin-left: 25%;
 +
}
 +
 
 +
.\-2u\28small\29 {
 +
margin-left: 16.66667%;
 +
}
 +
 
 +
.\-1u\28small\29 {
 +
margin-left: 8.33333%;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 480px) {
 +
 
 +
.row > * {
 +
padding: 0 0 0 1.25rem;
 +
}
 +
 
 +
.row {
 +
margin: 0 0 -1px -1.25rem;
 +
}
 +
 
 +
.row.uniform > * {
 +
padding: 1.25rem 0 0 1.25rem;
 +
}
 +
 
 +
.row.uniform {
 +
margin: -1.25rem 0 -1px -1.25rem;
 +
}
 +
 
 +
.row.\32 00\25 > * {
 +
padding: 0 0 0 2.5rem;
 +
}
 +
 
 +
.row.\32 00\25 {
 +
margin: 0 0 -1px -2.5rem;
 +
}
 +
 
 +
.row.uniform.\32 00\25 > * {
 +
padding: 2.5rem 0 0 2.5rem;
 +
}
 +
 
 +
.row.uniform.\32 00\25 {
 +
margin: -2.5rem 0 -1px -2.5rem;
 +
}
 +
 
 +
.row.\31 50\25 > * {
 +
padding: 0 0 0 1.875rem;
 +
}
 +
 
 +
.row.\31 50\25 {
 +
margin: 0 0 -1px -1.875rem;
 +
}
 +
 
 +
.row.uniform.\31 50\25 > * {
 +
padding: 1.875rem 0 0 1.875rem;
 +
}
 +
 
 +
.row.uniform.\31 50\25 {
 +
margin: -1.875rem 0 -1px -1.875rem;
 +
}
 +
 
 +
.row.\35 0\25 > * {
 +
padding: 0 0 0 0.625rem;
 +
}
 +
 
 +
.row.\35 0\25 {
 +
margin: 0 0 -1px -0.625rem;
 +
}
 +
 
 +
.row.uniform.\35 0\25 > * {
 +
padding: 0.625rem 0 0 0.625rem;
 +
}
 +
 
 +
.row.uniform.\35 0\25 {
 +
margin: -0.625rem 0 -1px -0.625rem;
 +
}
 +
 
 +
.row.\32 5\25 > * {
 +
padding: 0 0 0 0.3125rem;
 +
}
 +
 
 +
.row.\32 5\25 {
 +
margin: 0 0 -1px -0.3125rem;
 +
}
 +
 
 +
.row.uniform.\32 5\25 > * {
 +
padding: 0.3125rem 0 0 0.3125rem;
 +
}
 +
 
 +
.row.uniform.\32 5\25 {
 +
margin: -0.3125rem 0 -1px -0.3125rem;
 +
}
 +
 
 +
.\31 2u\28xsmall\29, .\31 2u\24\28xsmall\29 {
 +
width: 100%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 1u\28xsmall\29, .\31 1u\24\28xsmall\29 {
 +
width: 91.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 0u\28xsmall\29, .\31 0u\24\28xsmall\29 {
 +
width: 83.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\39 u\28xsmall\29, .\39 u\24\28xsmall\29 {
 +
width: 75%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\38 u\28xsmall\29, .\38 u\24\28xsmall\29 {
 +
width: 66.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\37 u\28xsmall\29, .\37 u\24\28xsmall\29 {
 +
width: 58.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\36 u\28xsmall\29, .\36 u\24\28xsmall\29 {
 +
width: 50%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\35 u\28xsmall\29, .\35 u\24\28xsmall\29 {
 +
width: 41.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\34 u\28xsmall\29, .\34 u\24\28xsmall\29 {
 +
width: 33.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\33 u\28xsmall\29, .\33 u\24\28xsmall\29 {
 +
width: 25%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\32 u\28xsmall\29, .\32 u\24\28xsmall\29 {
 +
width: 16.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 u\28xsmall\29, .\31 u\24\28xsmall\29 {
 +
width: 8.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 2u\24\28xsmall\29 + *,
 +
.\31 1u\24\28xsmall\29 + *,
 +
.\31 0u\24\28xsmall\29 + *,
 +
.\39 u\24\28xsmall\29 + *,
 +
.\38 u\24\28xsmall\29 + *,
 +
.\37 u\24\28xsmall\29 + *,
 +
.\36 u\24\28xsmall\29 + *,
 +
.\35 u\24\28xsmall\29 + *,
 +
.\34 u\24\28xsmall\29 + *,
 +
.\33 u\24\28xsmall\29 + *,
 +
.\32 u\24\28xsmall\29 + *,
 +
.\31 u\24\28xsmall\29 + * {
 +
clear: left;
 +
}
 +
 
 +
.\-11u\28xsmall\29 {
 +
margin-left: 91.66667%;
 +
}
 +
 
 +
.\-10u\28xsmall\29 {
 +
margin-left: 83.33333%;
 +
}
 +
 
 +
.\-9u\28xsmall\29 {
 +
margin-left: 75%;
 +
}
 +
 
 +
.\-8u\28xsmall\29 {
 +
margin-left: 66.66667%;
 +
}
 +
 
 +
.\-7u\28xsmall\29 {
 +
margin-left: 58.33333%;
 +
}
 +
 
 +
.\-6u\28xsmall\29 {
 +
margin-left: 50%;
 +
}
 +
 
 +
.\-5u\28xsmall\29 {
 +
margin-left: 41.66667%;
 +
}
 +
 
 +
.\-4u\28xsmall\29 {
 +
margin-left: 33.33333%;
 +
}
 +
 
 +
.\-3u\28xsmall\29 {
 +
margin-left: 25%;
 +
}
 +
 
 +
.\-2u\28xsmall\29 {
 +
margin-left: 16.66667%;
 +
}
 +
 
 +
.\-1u\28xsmall\29 {
 +
margin-left: 8.33333%;
 +
}
 +
 
 +
}
 +
 
 +
/* Basic */
 +
 
 +
@-ms-viewport {
 +
width: device-width;
 +
}
 +
 
 +
body {
 +
-ms-overflow-style: scrollbar;
 +
}
 +
 
 +
@media screen and (max-width: 480px) {
 +
 
 +
html, body {
 +
min-width: 320px;
 +
}
 +
 
 +
}
 +
 
 +
body {
 +
background: #fff;
 +
}
 +
 
 +
body.is-loading *, body.is-loading *:before, body.is-loading *:after {
 +
-moz-animation: none !important;
 +
-webkit-animation: none !important;
 +
-ms-animation: none !important;
 +
animation: none !important;
 +
-moz-transition: none !important;
 +
-webkit-transition: none !important;
 +
-ms-transition: none !important;
 +
transition: none !important;
 +
}
 +
 
 +
/* Type */
 +
 
 +
html {
 +
font-size: 13pt;
 +
}
 +
 
 +
@media screen and (max-width: 1680px) {
 +
 
 +
html {
 +
font-size: 11pt;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 1280px) {
 +
 
 +
html {
 +
font-size: 11pt;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 980px) {
 +
 
 +
html {
 +
font-size: 12pt;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
html {
 +
font-size: 12pt;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 480px) {
 +
 
 +
html {
 +
font-size: 12pt;
 +
}
 +
 
 +
}
 +
 
 +
body {
 +
background-color: #fff;
 +
color: #444;
 +
}
 +
 
 +
body, input, select, textarea {
 +
font-family: "Poppins", sans-serif;
 +
font-weight: 300;
 +
font-size: 1rem;
 +
line-height: 1.65;
 +
}
 +
 
 +
a {
 +
text-decoration: underline;
 +
}
 +
 
 +
a:hover {
 +
text-decoration: none;
 +
}
 +
 
 +
strong, b {
 +
font-weight: 600;
 +
}
 +
 
 +
em, i {
 +
font-style: italic;
 +
}
 +
 
 +
p {
 +
margin: 0 0 2rem 0;
 +
}
 +
 
 +
p.special {
 +
text-transform: uppercase;
 +
font-size: .75rem;
 +
font-weight: 300;
 +
margin: 0 0 .5rem 0;
 +
padding: 0 0 1rem 0;
 +
letter-spacing: .25rem;
 +
}
 +
 
 +
p.special:after {
 +
content: '';
 +
position: absolute;
 +
margin: auto;
 +
right: 0;
 +
bottom: 0;
 +
left: 0;
 +
width: 50%;
 +
height: 1px;
 +
background-color: rgba(0, 0, 0, 0.125);
 +
}
 +
 
 +
h1, h2, h3, h4, h5, h6 {
 +
font-weight: 300;
 +
line-height: 1.5;
 +
margin: 0 0 1rem 0;
 +
}
 +
 
 +
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 +
color: inherit;
 +
text-decoration: none;
 +
}
 +
 
 +
h2 {
 +
font-size: 1.75rem;
 +
}
 +
 
 +
h3 {
 +
font-size: 1.35rem;
 +
}
 +
 
 +
h4 {
 +
font-size: 1.1rem;
 +
}
 +
 
 +
h5 {
 +
font-size: 0.9rem;
 +
}
 +
 
 +
h6 {
 +
font-size: 0.7rem;
 +
}
 +
 
 +
sub {
 +
font-size: 0.8rem;
 +
position: relative;
 +
top: 0.5rem;
 +
}
 +
 
 +
sup {
 +
font-size: 0.8rem;
 +
position: relative;
 +
top: -0.5rem;
 +
}
 +
 
 +
blockquote {
 +
border-left: solid 4px;
 +
font-style: italic;
 +
margin: 0 0 2rem 0;
 +
padding: 0.5rem 0 0.5rem 2rem;
 +
}
 +
 
 +
code {
 +
border-radius: 2px;
 +
border: solid 1px;
 +
font-family: "Courier New", monospace;
 +
font-size: 0.9rem;
 +
margin: 0 0.25rem;
 +
padding: 0.25rem 0.65rem;
 +
}
 +
 
 +
pre {
 +
-webkit-overflow-scrolling: touch;
 +
font-family: "Courier New", monospace;
 +
font-size: 0.9rem;
 +
margin: 0 0 2rem 0;
 +
}
 +
 
 +
pre code {
 +
display: block;
 +
line-height: 1.75;
 +
padding: 1rem 1.5rem;
 +
overflow-x: auto;
 +
}
 +
 
 +
hr {
 +
border: 0;
 +
border-bottom: solid 1px;
 +
margin: 2rem 0;
 +
}
 +
 
 +
hr.major {
 +
margin: 3rem 0;
 +
}
 +
 
 +
.align-left {
 +
text-align: left;
 +
}
 +
 
 +
.align-center {
 +
text-align: center;
 +
}
 +
 
 +
.align-right {
 +
text-align: right;
 +
}
 +
 
 +
input, select, textarea {
 +
color: #555;
 +
}
 +
 
 +
a {
 +
color: #8a4680;
 +
}
 +
 
 +
strong, b {
 +
color: #555;
 +
}
 +
 
 +
h1, h2, h3, h4, h5, h6 {
 +
color: #555;
 +
}
 +
 
 +
blockquote {
 +
border-left-color: rgba(144, 144, 144, 0.25);
 +
}
 +
 
 +
code {
 +
background: rgba(144, 144, 144, 0.075);
 +
border-color: rgba(144, 144, 144, 0.25);
 +
}
 +
 
 +
hr {
 +
border-bottom-color: rgba(144, 144, 144, 0.25);
 +
}
 +
 
 +
/* Box */
 +
 
 +
.box {
 +
margin-bottom: 2rem;
 +
background: #FFF;
 +
}
 +
 
 +
.box .image.fit {
 +
margin: 0;
 +
border-radius: 0;
 +
}
 +
 
 +
.box .image.fit img {
 +
border-radius: 0;
 +
}
 +
 
 +
.box header h2 {
 +
margin-bottom: 2rem;
 +
}
 +
 
 +
.box header p {
 +
text-transform: uppercase;
 +
font-size: .75rem;
 +
font-weight: 300;
 +
margin: 0 0 .25rem 0;
 +
padding: 0 0 .75rem 0;
 +
letter-spacing: .25rem;
 +
}
 +
 
 +
.box header p:after {
 +
content: '';
 +
position: absolute;
 +
margin: auto;
 +
right: 0;
 +
bottom: 0;
 +
left: 0;
 +
width: 50%;
 +
height: 1px;
 +
background-color: rgba(0, 0, 0, 0.125);
 +
}
 +
 
 +
.box .content {
 +
padding: 3rem;
 +
}
 +
 
 +
.box > :last-child,
 +
.box > :last-child > :last-child,
 +
.box > :last-child > :last-child > :last-child {
 +
margin-bottom: 0;
 +
}
 +
 
 +
.box.alt {
 +
border: 0;
 +
border-radius: 0;
 +
padding: 0;
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
.box .content {
 +
padding: 2rem;
 +
}
 +
 
 +
}
 +
 
 +
.box {
 +
border-color: rgba(144, 144, 144, 0.25);
 +
}
 +
 
 +
/* Button */
 +
 
 +
input[type="submit"],
 +
input[type="reset"],
 +
input[type="button"],
 +
button,
 +
.button {
 +
-moz-appearance: none;
 +
-webkit-appearance: none;
 +
-ms-appearance: none;
 +
appearance: none;
 +
-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 +
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 +
-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 +
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 +
border-radius: 2px;
 +
border: 0;
 +
cursor: pointer;
 +
display: inline-block;
 +
font-weight: 300;
 +
height: 2.85rem;
 +
line-height: 2.95rem;
 +
padding: 0 1.5rem;
 +
text-align: center;
 +
text-decoration: none;
 +
text-transform: uppercase;
 +
white-space: nowrap;
 +
}
 +
 
 +
input[type="submit"].icon,
 +
input[type="reset"].icon,
 +
input[type="button"].icon,
 +
button.icon,
 +
.button.icon {
 +
padding-left: 1.35rem;
 +
}
 +
 
 +
input[type="submit"].icon:before,
 +
input[type="reset"].icon:before,
 +
input[type="button"].icon:before,
 +
button.icon:before,
 +
.button.icon:before {
 +
margin-right: 0.5rem;
 +
}
 +
 
 +
input[type="submit"].fit,
 +
input[type="reset"].fit,
 +
input[type="button"].fit,
 +
button.fit,
 +
.button.fit {
 +
display: block;
 +
margin: 0 0 1rem 0;
 +
width: 100%;
 +
}
 +
 
 +
input[type="submit"].small,
 +
input[type="reset"].small,
 +
input[type="button"].small,
 +
button.small,
 +
.button.small {
 +
font-size: 0.8rem;
 +
}
 +
 
 +
input[type="submit"].big,
 +
input[type="reset"].big,
 +
input[type="button"].big,
 +
button.big,
 +
.button.big {
 +
font-size: 1.35rem;
 +
}
 +
 
 +
input[type="submit"].disabled, input[type="submit"]:disabled,
 +
input[type="reset"].disabled,
 +
input[type="reset"]:disabled,
 +
input[type="button"].disabled,
 +
input[type="button"]:disabled,
 +
button.disabled,
 +
button:disabled,
 +
.button.disabled,
 +
.button:disabled {
 +
-moz-pointer-events: none;
 +
-webkit-pointer-events: none;
 +
-ms-pointer-events: none;
 +
pointer-events: none;
 +
opacity: 0.25;
 +
}
 +
 
 +
@media screen and (max-width: 480px) {
 +
 
 +
input[type="submit"],
 +
input[type="reset"],
 +
input[type="button"],
 +
button,
 +
.button {
 +
padding: 0;
 +
width: 100%;
 +
}
 +
 
 +
}
 +
 
 +
input[type="submit"],
 +
input[type="reset"],
 +
input[type="button"],
 +
button,
 +
.button {
 +
background-color: #f2f2f2;
 +
color: #000 !important;
 +
}
 +
 
 +
input[type="submit"]:hover,
 +
input[type="reset"]:hover,
 +
input[type="button"]:hover,
 +
button:hover,
 +
.button:hover {
 +
background-color: white;
 +
}
 +
 
 +
input[type="submit"]:active,
 +
input[type="reset"]:active,
 +
input[type="button"]:active,
 +
button:active,
 +
.button:active {
 +
background-color: #e5e5e5;
 +
}
 +
 
 +
input[type="submit"].alt,
 +
input[type="reset"].alt,
 +
input[type="button"].alt,
 +
button.alt,
 +
.button.alt {
 +
background-color: transparent;
 +
box-shadow: inset 0 0 0 2px rgba(144, 144, 144, 0.25);
 +
color: #555 !important;
 +
}
 +
 
 +
input[type="submit"].alt:hover,
 +
input[type="reset"].alt:hover,
 +
input[type="button"].alt:hover,
 +
button.alt:hover,
 +
.button.alt:hover {
 +
background-color: rgba(144, 144, 144, 0.075);
 +
}
 +
 
 +
input[type="submit"].alt:active,
 +
input[type="reset"].alt:active,
 +
input[type="button"].alt:active,
 +
button.alt:active,
 +
.button.alt:active {
 +
background-color: rgba(144, 144, 144, 0.2);
 +
}
 +
 
 +
input[type="submit"].alt.icon:before,
 +
input[type="reset"].alt.icon:before,
 +
input[type="button"].alt.icon:before,
 +
button.alt.icon:before,
 +
.button.alt.icon:before {
 +
color: #bbb;
 +
}
 +
 
 +
input[type="submit"].special,
 +
input[type="reset"].special,
 +
input[type="button"].special,
 +
button.special,
 +
.button.special {
 +
background-color: #8a4680;
 +
color: #ffffff !important;
 +
}
 +
 
 +
input[type="submit"].special:hover,
 +
input[type="reset"].special:hover,
 +
input[type="button"].special:hover,
 +
button.special:hover,
 +
.button.special:hover {
 +
background-color: #9b4f90;
 +
}
 +
 
 +
input[type="submit"].special:active,
 +
input[type="reset"].special:active,
 +
input[type="button"].special:active,
 +
button.special:active,
 +
.button.special:active {
 +
background-color: #793d70;
 +
}
 +
 
 +
/* Form */
 +
 
 +
form {
 +
margin: 0 0 2rem 0;
 +
}
 +
 
 +
label {
 +
display: block;
 +
font-size: 0.9rem;
 +
font-weight: 700;
 +
margin: 0 0 1rem 0;
 +
}
 +
 
 +
input[type="text"],
 +
input[type="password"],
 +
input[type="email"],
 +
select,
 +
textarea {
 +
-moz-appearance: none;
 +
-webkit-appearance: none;
 +
-ms-appearance: none;
 +
appearance: none;
 +
border-radius: 2px;
 +
border: none;
 +
border: solid 1px;
 +
color: inherit;
 +
display: block;
 +
outline: 0;
 +
padding: 0 1rem;
 +
text-decoration: none;
 +
width: 100%;
 +
}
 +
 
 +
input[type="text"]:invalid,
 +
input[type="password"]:invalid,
 +
input[type="email"]:invalid,
 +
select:invalid,
 +
textarea:invalid {
 +
box-shadow: none;
 +
}
 +
 
 +
.select-wrapper {
 +
text-decoration: none;
 +
display: block;
 +
position: relative;
 +
}
 +
 
 +
.select-wrapper:before {
 +
-moz-osx-font-smoothing: grayscale;
 +
-webkit-font-smoothing: antialiased;
 +
font-family: FontAwesome;
 +
font-style: normal;
 +
font-weight: normal;
 +
text-transform: none !important;
 +
}
 +
 
 +
.select-wrapper:before {
 +
content: '\f078';
 +
display: block;
 +
height: 2.75rem;
 +
line-height: 2.75rem;
 +
pointer-events: none;
 +
position: absolute;
 +
right: 0;
 +
text-align: center;
 +
top: 0;
 +
width: 2.75rem;
 +
}
 +
 
 +
.select-wrapper select::-ms-expand {
 +
display: none;
 +
}
 +
 
 +
input[type="text"],
 +
input[type="password"],
 +
input[type="email"],
 +
select {
 +
height: 2.75rem;
 +
}
 +
 
 +
textarea {
 +
padding: 0.75rem 1rem;
 +
}
 +
 
 +
input[type="checkbox"],
 +
input[type="radio"] {
 +
-moz-appearance: none;
 +
-webkit-appearance: none;
 +
-ms-appearance: none;
 +
appearance: none;
 +
display: block;
 +
float: left;
 +
margin-right: -2rem;
 +
opacity: 0;
 +
width: 1rem;
 +
z-index: -1;
 +
}
 +
 
 +
input[type="checkbox"] + label,
 +
input[type="radio"] + label {
 +
text-decoration: none;
 +
cursor: pointer;
 +
display: inline-block;
 +
font-size: 1rem;
 +
font-weight: 400;
 +
padding-left: 2.4rem;
 +
padding-right: 0.75rem;
 +
position: relative;
 +
}
 +
 
 +
input[type="checkbox"] + label:before,
 +
input[type="radio"] + label:before {
 +
-moz-osx-font-smoothing: grayscale;
 +
-webkit-font-smoothing: antialiased;
 +
font-family: FontAwesome;
 +
font-style: normal;
 +
font-weight: normal;
 +
text-transform: none !important;
 +
}
 +
 
 +
input[type="checkbox"] + label:before,
 +
input[type="radio"] + label:before {
 +
border-radius: 2px;
 +
border: solid 1px;
 +
content: '';
 +
display: inline-block;
 +
height: 1.65rem;
 +
left: 0;
 +
line-height: 1.58125rem;
 +
position: absolute;
 +
text-align: center;
 +
top: 0;
 +
width: 1.65rem;
 +
}
 +
 
 +
input[type="checkbox"]:checked + label:before,
 +
input[type="radio"]:checked + label:before {
 +
content: '\f00c';
 +
}
 +
 
 +
input[type="checkbox"] + label:before {
 +
border-radius: 2px;
 +
}
 +
 
 +
input[type="radio"] + label:before {
 +
border-radius: 100%;
 +
}
 +
 
 +
::-webkit-input-placeholder {
 +
opacity: 1.0;
 +
}
 +
 
 +
:-moz-placeholder {
 +
opacity: 1.0;
 +
}
 +
 
 +
::-moz-placeholder {
 +
opacity: 1.0;
 +
}
 +
 
 +
:-ms-input-placeholder {
 +
opacity: 1.0;
 +
}
 +
 
 +
.formerize-placeholder {
 +
opacity: 1.0;
 +
}
 +
 
 +
label {
 +
color: #555;
 +
}
 +
 
 +
input[type="text"],
 +
input[type="password"],
 +
input[type="email"],
 +
select,
 +
textarea {
 +
background: rgba(144, 144, 144, 0.075);
 +
border-color: rgba(144, 144, 144, 0.25);
 +
}
 +
 
 +
input[type="text"]:focus,
 +
input[type="password"]:focus,
 +
input[type="email"]:focus,
 +
select:focus,
 +
textarea:focus {
 +
border-color: #8a4680;
 +
box-shadow: 0 0 0 1px #8a4680;
 +
}
 +
 
 +
.select-wrapper:before {
 +
color: rgba(144, 144, 144, 0.25);
 +
}
 +
 
 +
input[type="checkbox"] + label,
 +
input[type="radio"] + label {
 +
color: #444;
 +
}
 +
 
 +
input[type="checkbox"] + label:before,
 +
input[type="radio"] + label:before {
 +
background: rgba(144, 144, 144, 0.075);
 +
border-color: rgba(144, 144, 144, 0.25);
 +
}
 +
 
 +
input[type="checkbox"]:checked + label:before,
 +
input[type="radio"]:checked + label:before {
 +
background-color: #8a4680;
 +
border-color: #8a4680;
 +
color: #ffffff;
 +
}
 +
 
 +
input[type="checkbox"]:focus + label:before,
 +
input[type="radio"]:focus + label:before {
 +
border-color: #8a4680;
 +
box-shadow: 0 0 0 1px #8a4680;
 +
}
 +
 
 +
::-webkit-input-placeholder {
 +
color: #bbb !important;
 +
}
 +
 
 +
:-moz-placeholder {
 +
color: #bbb !important;
 +
}
 +
 
 +
::-moz-placeholder {
 +
color: #bbb !important;
 +
}
 +
 
 +
:-ms-input-placeholder {
 +
color: #bbb !important;
 +
}
 +
 
 +
.formerize-placeholder {
 +
color: #bbb !important;
 +
}
 +
 
 +
/* Icon */
 +
 
 +
.icon {
 +
text-decoration: none;
 +
border-bottom: none;
 +
position: relative;
 +
}
 +
 
 +
.icon:before {
 +
-moz-osx-font-smoothing: grayscale;
 +
-webkit-font-smoothing: antialiased;
 +
font-family: FontAwesome;
 +
font-style: normal;
 +
font-weight: normal;
 +
text-transform: none !important;
 +
}
 +
 
 +
.icon > .label {
 +
display: none;
 +
}
 +
 
 +
/* Image */
 +
 
 +
.image {
 +
border-radius: 2px;
 +
border: 0;
 +
display: inline-block;
 +
position: relative;
 +
}
 +
 
 +
.image img {
 +
border-radius: 2px;
 +
display: block;
 +
}
 +
 
 +
.image.left, .image.right {
 +
max-width: 40%;
 +
}
 +
 
 +
.image.left img, .image.right img {
 +
width: 100%;
 +
}
 +
 
 +
.image.left {
 +
float: left;
 +
margin: 0 1.5rem 1rem 0;
 +
top: 0.25rem;
 +
}
 +
 
 +
.image.right {
 +
float: right;
 +
margin: 0 0 1rem 1.5rem;
 +
top: 0.25rem;
 +
}
 +
 
 +
.image.fit {
 +
display: block;
 +
margin: 0 0 2rem 0;
 +
width: 100%;
 +
}
 +
 
 +
.image.fit img {
 +
width: 100%;
 +
}
 +
 
 +
.image.main {
 +
display: block;
 +
margin: 0 0 3rem 0;
 +
width: 100%;
 +
}
 +
 
 +
.image.main img {
 +
width: 100%;
 +
}
 +
 
 +
/* List */
 +
 
 +
ol {
 +
list-style: decimal;
 +
margin: 0 0 2rem 0;
 +
padding-left: 1.25rem;
 +
}
 +
 
 +
ol li {
 +
padding-left: 0.25rem;
 +
}
 +
 
 +
ul {
 +
list-style: disc;
 +
margin: 0 0 2rem 0;
 +
padding-left: 1rem;
 +
}
 +
 
 +
ul li {
 +
padding-left: 0.5rem;
 +
}
 +
 
 +
ul.alt {
 +
list-style: none;
 +
padding-left: 0;
 +
}
 +
 
 +
ul.alt li {
 +
border-top: solid 1px;
 +
padding: 0.5rem 0;
 +
}
 +
 
 +
ul.alt li:first-child {
 +
border-top: 0;
 +
padding-top: 0;
 +
}
 +
 
 +
ul.icons {
 +
cursor: default;
 +
list-style: none;
 +
padding-left: 0;
 +
}
 +
 
 +
ul.icons li {
 +
display: inline-block;
 +
padding: 0 1rem 0 0;
 +
}
 +
 
 +
ul.icons li:last-child {
 +
padding-right: 0;
 +
}
 +
 
 +
ul.icons li .icon:before {
 +
font-size: 2rem;
 +
}
 +
 
 +
ul.actions {
 +
cursor: default;
 +
list-style: none;
 +
padding-left: 0;
 +
}
 +
 
 +
ul.actions li {
 +
display: inline-block;
 +
padding: 0 1rem 0 0;
 +
vertical-align: middle;
 +
}
 +
 
 +
ul.actions li:last-child {
 +
padding-right: 0;
 +
}
 +
 
 +
ul.actions.small li {
 +
padding: 0 0.5rem 0 0;
 +
}
 +
 
 +
ul.actions.vertical li {
 +
display: block;
 +
padding: 1rem 0 0 0;
 +
}
 +
 
 +
ul.actions.vertical li:first-child {
 +
padding-top: 0;
 +
}
 +
 
 +
ul.actions.vertical li > * {
 +
margin-bottom: 0;
 +
}
 +
 
 +
ul.actions.vertical.small li {
 +
padding: 0.5rem 0 0 0;
 +
}
 +
 
 +
ul.actions.vertical.small li:first-child {
 +
padding-top: 0;
 +
}
 +
 
 +
ul.actions.fit {
 +
display: table;
 +
margin-left: -1rem;
 +
padding: 0;
 +
table-layout: fixed;
 +
width: calc(100% + 1rem);
 +
}
 +
 
 +
ul.actions.fit li {
 +
display: table-cell;
 +
padding: 0 0 0 1rem;
 +
}
 +
 
 +
ul.actions.fit li > * {
 +
margin-bottom: 0;
 +
}
 +
 
 +
ul.actions.fit.small {
 +
margin-left: -0.5rem;
 +
width: calc(100% + 0.5rem);
 +
}
 +
 
 +
ul.actions.fit.small li {
 +
padding: 0 0 0 0.5rem;
 +
}
 +
 
 +
@media screen and (max-width: 480px) {
 +
 
 +
ul.actions {
 +
margin: 0 0 2rem 0;
 +
}
 +
 
 +
ul.actions li {
 +
padding: 1rem 0 0 0;
 +
display: block;
 +
text-align: center;
 +
width: 100%;
 +
}
 +
 
 +
ul.actions li:first-child {
 +
padding-top: 0;
 +
}
 +
 
 +
ul.actions li > * {
 +
width: 100%;
 +
margin: 0 !important;
 +
}
 +
 
 +
ul.actions li > *.icon:before {
 +
margin-left: -2rem;
 +
}
 +
 
 +
ul.actions.small li {
 +
padding: 0.5rem 0 0 0;
 +
}
 +
 
 +
ul.actions.small li:first-child {
 +
padding-top: 0;
 +
}
 +
 
 +
}
 +
 
 +
dl {
 +
margin: 0 0 2rem 0;
 +
}
 +
 
 +
dl dt {
 +
display: block;
 +
font-weight: 700;
 +
margin: 0 0 1rem 0;
 +
}
 +
 
 +
dl dd {
 +
margin-left: 2rem;
 +
}
 +
 
 +
ul.alt li {
 +
border-top-color: rgba(144, 144, 144, 0.25);
 +
}
 +
 
 +
/* Section/Article */
 +
 
 +
section.special, article.special {
 +
text-align: center;
 +
}
 +
 
 +
header p {
 +
position: relative;
 +
margin: 0 0 1.5rem 0;
 +
}
 +
 
 +
header h2 + p {
 +
font-size: 1.25rem;
 +
margin-top: -1rem;
 +
}
 +
 
 +
header h3 + p {
 +
font-size: 1.1rem;
 +
margin-top: -0.8rem;
 +
}
 +
 
 +
header h4 + p,
 +
header h5 + p,
 +
header h6 + p {
 +
font-size: 0.9rem;
 +
margin-top: -0.6rem;
 +
}
 +
 
 +
header p {
 +
color: #bbb;
 +
}
 +
 
 +
/* Table */
 +
 
 +
.table-wrapper {
 +
-webkit-overflow-scrolling: touch;
 +
overflow-x: auto;
 +
}
 +
 
 +
table {
 +
margin: 0 0 2rem 0;
 +
width: 100%;
 +
}
 +
 
 +
table tbody tr {
 +
border: solid 1px;
 +
border-left: 0;
 +
border-right: 0;
 +
}
 +
 
 +
table td {
 +
padding: 0.75rem 0.75rem;
 +
}
 +
 
 +
table th {
 +
font-size: 0.9rem;
 +
font-weight: 700;
 +
padding: 0 0.75rem 0.75rem 0.75rem;
 +
text-align: left;
 +
}
 +
 
 +
table thead {
 +
border-bottom: solid 2px;
 +
}
 +
 
 +
table tfoot {
 +
border-top: solid 2px;
 +
}
 +
 
 +
table.alt {
 +
border-collapse: separate;
 +
}
 +
 
 +
table.alt tbody tr td {
 +
border: solid 1px;
 +
border-left-width: 0;
 +
border-top-width: 0;
 +
}
 +
 
 +
table.alt tbody tr td:first-child {
 +
border-left-width: 1px;
 +
}
 +
 
 +
table.alt tbody tr:first-child td {
 +
border-top-width: 1px;
 +
}
 +
 
 +
table.alt thead {
 +
border-bottom: 0;
 +
}
 +
 
 +
table.alt tfoot {
 +
border-top: 0;
 +
}
 +
 
 +
table tbody tr {
 +
border-color: rgba(144, 144, 144, 0.25);
 +
}
 +
 
 +
table tbody tr:nth-child(2n + 1) {
 +
background-color: rgba(144, 144, 144, 0.075);
 +
}
 +
 
 +
table th {
 +
color: #555;
 +
}
 +
 
 +
table thead {
 +
border-bottom-color: rgba(144, 144, 144, 0.25);
 +
}
 +
 
 +
table tfoot {
 +
border-top-color: rgba(144, 144, 144, 0.25);
 +
}
 +
 
 +
table.alt tbody tr td {
 +
border-color: rgba(144, 144, 144, 0.25);
 +
}
 +
 
 +
/* Wrapper */
 +
 
 +
.wrapper {
 +
padding: 6rem 0 4rem 0 ;
 +
position: relative;
 +
margin: 0;
 +
}
 +
 
 +
.wrapper > .inner {
 +
margin: 0 auto;
 +
width: 80rem;
 +
}
 +
 
 +
.wrapper.style1 {
 +
background-color: #8a4680;
 +
color: #e2d1df;
 +
}
 +
 
 +
.wrapper.style1 input, .wrapper.style1 select, .wrapper.style1 textarea {
 +
color: #ffffff;
 +
}
 +
 
 +
.wrapper.style1 a {
 +
color: #ffffff;
 +
}
 +
 
 +
.wrapper.style1 strong, .wrapper.style1 b {
 +
color: #ffffff;
 +
}
 +
 
 +
.wrapper.style1 h1, .wrapper.style1 h2, .wrapper.style1 h3, .wrapper.style1 h4, .wrapper.style1 h5, .wrapper.style1 h6 {
 +
color: #ffffff;
 +
}
 +
 
 +
.wrapper.style1 blockquote {
 +
border-left-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style1 code {
 +
background: rgba(255, 255, 255, 0.075);
 +
border-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style1 hr {
 +
border-bottom-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style1 .box {
 +
border-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style1 input[type="submit"],
 +
.wrapper.style1 input[type="reset"],
 +
.wrapper.style1 input[type="button"],
 +
.wrapper.style1 button,
 +
.wrapper.style1 .button {
 +
background-color: #f2f2f2;
 +
color: #000 !important;
 +
}
 +
 
 +
.wrapper.style1 input[type="submit"]:hover,
 +
.wrapper.style1 input[type="reset"]:hover,
 +
.wrapper.style1 input[type="button"]:hover,
 +
.wrapper.style1 button:hover,
 +
.wrapper.style1 .button:hover {
 +
background-color: white;
 +
}
 +
 
 +
.wrapper.style1 input[type="submit"]:active,
 +
.wrapper.style1 input[type="reset"]:active,
 +
.wrapper.style1 input[type="button"]:active,
 +
.wrapper.style1 button:active,
 +
.wrapper.style1 .button:active {
 +
background-color: #e5e5e5;
 +
}
 +
 
 +
.wrapper.style1 input[type="submit"].alt,
 +
.wrapper.style1 input[type="reset"].alt,
 +
.wrapper.style1 input[type="button"].alt,
 +
.wrapper.style1 button.alt,
 +
.wrapper.style1 .button.alt {
 +
background-color: transparent;
 +
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
 +
color: #ffffff !important;
 +
}
 +
 
 +
.wrapper.style1 input[type="submit"].alt:hover,
 +
.wrapper.style1 input[type="reset"].alt:hover,
 +
.wrapper.style1 input[type="button"].alt:hover,
 +
.wrapper.style1 button.alt:hover,
 +
.wrapper.style1 .button.alt:hover {
 +
background-color: rgba(255, 255, 255, 0.075);
 +
}
 +
 
 +
.wrapper.style1 input[type="submit"].alt:active,
 +
.wrapper.style1 input[type="reset"].alt:active,
 +
.wrapper.style1 input[type="button"].alt:active,
 +
.wrapper.style1 button.alt:active,
 +
.wrapper.style1 .button.alt:active {
 +
background-color: rgba(255, 255, 255, 0.2);
 +
}
 +
 
 +
.wrapper.style1 input[type="submit"].alt.icon:before,
 +
.wrapper.style1 input[type="reset"].alt.icon:before,
 +
.wrapper.style1 input[type="button"].alt.icon:before,
 +
.wrapper.style1 button.alt.icon:before,
 +
.wrapper.style1 .button.alt.icon:before {
 +
color: #d0b5cc;
 +
}
 +
 
 +
.wrapper.style1 input[type="submit"].special,
 +
.wrapper.style1 input[type="reset"].special,
 +
.wrapper.style1 input[type="button"].special,
 +
.wrapper.style1 button.special,
 +
.wrapper.style1 .button.special {
 +
background-color: #ffffff;
 +
color: #8a4680 !important;
 +
}
 +
 
 +
.wrapper.style1 label {
 +
color: #ffffff;
 +
}
 +
 
 +
.wrapper.style1 input[type="text"],
 +
.wrapper.style1 input[type="password"],
 +
.wrapper.style1 input[type="email"],
 +
.wrapper.style1 select,
 +
.wrapper.style1 textarea {
 +
background: rgba(255, 255, 255, 0.075);
 +
border-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style1 input[type="text"]:focus,
 +
.wrapper.style1 input[type="password"]:focus,
 +
.wrapper.style1 input[type="email"]:focus,
 +
.wrapper.style1 select:focus,
 +
.wrapper.style1 textarea:focus {
 +
border-color: #ffffff;
 +
box-shadow: 0 0 0 1px #ffffff;
 +
}
 +
 
 +
.wrapper.style1 .select-wrapper:before {
 +
color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style1 input[type="checkbox"] + label,
 +
.wrapper.style1 input[type="radio"] + label {
 +
color: #e2d1df;
 +
}
 +
 
 +
.wrapper.style1 input[type="checkbox"] + label:before,
 +
.wrapper.style1 input[type="radio"] + label:before {
 +
background: rgba(255, 255, 255, 0.075);
 +
border-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style1 input[type="checkbox"]:checked + label:before,
 +
.wrapper.style1 input[type="radio"]:checked + label:before {
 +
background-color: #ffffff;
 +
border-color: #ffffff;
 +
color: #8a4680;
 +
}
 +
 
 +
.wrapper.style1 input[type="checkbox"]:focus + label:before,
 +
.wrapper.style1 input[type="radio"]:focus + label:before {
 +
border-color: #ffffff;
 +
box-shadow: 0 0 0 1px #ffffff;
 +
}
 +
 
 +
.wrapper.style1 ::-webkit-input-placeholder {
 +
color: #d0b5cc !important;
 +
}
 +
 
 +
.wrapper.style1 :-moz-placeholder {
 +
color: #d0b5cc !important;
 +
}
 +
 
 +
.wrapper.style1 ::-moz-placeholder {
 +
color: #d0b5cc !important;
 +
}
 +
 
 +
.wrapper.style1 :-ms-input-placeholder {
 +
color: #d0b5cc !important;
 +
}
 +
 
 +
.wrapper.style1 .formerize-placeholder {
 +
color: #d0b5cc !important;
 +
}
 +
 
 +
.wrapper.style1 ul.alt li {
 +
border-top-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style1 header p {
 +
color: #d0b5cc;
 +
}
 +
 
 +
.wrapper.style1 table tbody tr {
 +
border-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style1 table tbody tr:nth-child(2n + 1) {
 +
background-color: rgba(255, 255, 255, 0.075);
 +
}
 +
 
 +
.wrapper.style1 table th {
 +
color: #ffffff;
 +
}
 +
 
 +
.wrapper.style1 table thead {
 +
border-bottom-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style1 table tfoot {
 +
border-top-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style1 table.alt tbody tr td {
 +
border-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style2 {
 +
background-color: #f2f2f2;
 +
color: #a6a6a6;
 +
}
 +
 
 +
.wrapper.style2 input, .wrapper.style2 select, .wrapper.style2 textarea {
 +
color: #000;
 +
}
 +
 
 +
.wrapper.style2 a {
 +
color: #8a4680;
 +
}
 +
 
 +
.wrapper.style2 strong, .wrapper.style2 b {
 +
color: #000;
 +
}
 +
 
 +
.wrapper.style2 h1, .wrapper.style2 h2, .wrapper.style2 h3, .wrapper.style2 h4, .wrapper.style2 h5, .wrapper.style2 h6 {
 +
color: #000;
 +
}
 +
 
 +
.wrapper.style2 blockquote {
 +
border-left-color: rgba(0, 0, 0, 0.15);
 +
}
 +
 
 +
.wrapper.style2 code {
 +
background: rgba(0, 0, 0, 0.075);
 +
border-color: rgba(0, 0, 0, 0.15);
 +
}
 +
 
 +
.wrapper.style2 hr {
 +
border-bottom-color: rgba(0, 0, 0, 0.15);
 +
}
 +
 
 +
.wrapper.style2 .box {
 +
border-color: rgba(0, 0, 0, 0.15);
 +
}
 +
 
 +
.wrapper.style2 input[type="submit"],
 +
.wrapper.style2 input[type="reset"],
 +
.wrapper.style2 input[type="button"],
 +
.wrapper.style2 button,
 +
.wrapper.style2 .button {
 +
background-color: #000;
 +
color: #f2f2f2 !important;
 +
}
 +
 
 +
.wrapper.style2 input[type="submit"].alt,
 +
.wrapper.style2 input[type="reset"].alt,
 +
.wrapper.style2 input[type="button"].alt,
 +
.wrapper.style2 button.alt,
 +
.wrapper.style2 .button.alt {
 +
background-color: transparent;
 +
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.15);
 +
color: #000 !important;
 +
}
 +
 
 +
.wrapper.style2 input[type="submit"].alt:hover,
 +
.wrapper.style2 input[type="reset"].alt:hover,
 +
.wrapper.style2 input[type="button"].alt:hover,
 +
.wrapper.style2 button.alt:hover,
 +
.wrapper.style2 .button.alt:hover {
 +
background-color: rgba(0, 0, 0, 0.075);
 +
}
 +
 
 +
.wrapper.style2 input[type="submit"].alt:active,
 +
.wrapper.style2 input[type="reset"].alt:active,
 +
.wrapper.style2 input[type="button"].alt:active,
 +
.wrapper.style2 button.alt:active,
 +
.wrapper.style2 .button.alt:active {
 +
background-color: rgba(0, 0, 0, 0.2);
 +
}
 +
 
 +
.wrapper.style2 input[type="submit"].alt.icon:before,
 +
.wrapper.style2 input[type="reset"].alt.icon:before,
 +
.wrapper.style2 input[type="button"].alt.icon:before,
 +
.wrapper.style2 button.alt.icon:before,
 +
.wrapper.style2 .button.alt.icon:before {
 +
color: #999999;
 +
}
 +
 
 +
.wrapper.style2 input[type="submit"].special,
 +
.wrapper.style2 input[type="reset"].special,
 +
.wrapper.style2 input[type="button"].special,
 +
.wrapper.style2 button.special,
 +
.wrapper.style2 .button.special {
 +
background-color: #8a4680;
 +
color: #ffffff !important;
 +
}
 +
 
 +
.wrapper.style2 input[type="submit"].special:hover,
 +
.wrapper.style2 input[type="reset"].special:hover,
 +
.wrapper.style2 input[type="button"].special:hover,
 +
.wrapper.style2 button.special:hover,
 +
.wrapper.style2 .button.special:hover {
 +
background-color: #9b4f90;
 +
}
 +
 
 +
.wrapper.style2 input[type="submit"].special:active,
 +
.wrapper.style2 input[type="reset"].special:active,
 +
.wrapper.style2 input[type="button"].special:active,
 +
.wrapper.style2 button.special:active,
 +
.wrapper.style2 .button.special:active {
 +
background-color: #793d70;
 +
}
 +
 
 +
.wrapper.style2 label {
 +
color: #000;
 +
}
 +
 
 +
.wrapper.style2 input[type="text"],
 +
.wrapper.style2 input[type="password"],
 +
.wrapper.style2 input[type="email"],
 +
.wrapper.style2 select,
 +
.wrapper.style2 textarea {
 +
background: rgba(0, 0, 0, 0.075);
 +
border-color: rgba(0, 0, 0, 0.15);
 +
}
 +
 
 +
.wrapper.style2 input[type="text"]:focus,
 +
.wrapper.style2 input[type="password"]:focus,
 +
.wrapper.style2 input[type="email"]:focus,
 +
.wrapper.style2 select:focus,
 +
.wrapper.style2 textarea:focus {
 +
border-color: #8a4680;
 +
box-shadow: 0 0 0 1px #8a4680;
 +
}
 +
 
 +
.wrapper.style2 .select-wrapper:before {
 +
color: rgba(0, 0, 0, 0.15);
 +
}
 +
 
 +
.wrapper.style2 input[type="checkbox"] + label,
 +
.wrapper.style2 input[type="radio"] + label {
 +
color: #a6a6a6;
 +
}
 +
 
 +
.wrapper.style2 input[type="checkbox"] + label:before,
 +
.wrapper.style2 input[type="radio"] + label:before {
 +
background: rgba(0, 0, 0, 0.075);
 +
border-color: rgba(0, 0, 0, 0.15);
 +
}
 +
 
 +
.wrapper.style2 input[type="checkbox"]:checked + label:before,
 +
.wrapper.style2 input[type="radio"]:checked + label:before {
 +
background-color: #8a4680;
 +
border-color: #8a4680;
 +
color: #ffffff;
 +
}
 +
 
 +
.wrapper.style2 input[type="checkbox"]:focus + label:before,
 +
.wrapper.style2 input[type="radio"]:focus + label:before {
 +
border-color: #8a4680;
 +
box-shadow: 0 0 0 1px #8a4680;
 +
}
 +
 
 +
.wrapper.style2 ::-webkit-input-placeholder {
 +
color: #999999 !important;
 +
}
 +
 
 +
.wrapper.style2 :-moz-placeholder {
 +
color: #999999 !important;
 +
}
 +
 
 +
.wrapper.style2 ::-moz-placeholder {
 +
color: #999999 !important;
 +
}
 +
 
 +
.wrapper.style2 :-ms-input-placeholder {
 +
color: #999999 !important;
 +
}
 +
 
 +
.wrapper.style2 .formerize-placeholder {
 +
color: #999999 !important;
 +
}
 +
 
 +
.wrapper.style2 ul.alt li {
 +
border-top-color: rgba(0, 0, 0, 0.15);
 +
}
 +
 
 +
.wrapper.style2 header p {
 +
color: #999999;
 +
}
 +
 
 +
.wrapper.style2 table tbody tr {
 +
border-color: rgba(0, 0, 0, 0.15);
 +
}
 +
 
 +
.wrapper.style2 table tbody tr:nth-child(2n + 1) {
 +
background-color: rgba(0, 0, 0, 0.075);
 +
}
 +
 
 +
.wrapper.style2 table th {
 +
color: #000;
 +
}
 +
 
 +
.wrapper.style2 table thead {
 +
border-bottom-color: rgba(0, 0, 0, 0.15);
 +
}
 +
 
 +
.wrapper.style2 table tfoot {
 +
border-top-color: rgba(0, 0, 0, 0.15);
 +
}
 +
 
 +
.wrapper.style2 table.alt tbody tr td {
 +
border-color: rgba(0, 0, 0, 0.15);
 +
}
 +
 
 +
.wrapper.style3 {
 +
background-color: #000;
 +
color: #bfbfbf;
 +
background-image: url(../../images/bg.jpg);
 +
background-size: cover;
 +
background-attachment: fixed;
 +
background-position: center;
 +
position: relative;
 +
}
 +
 
 +
.wrapper.style3 input, .wrapper.style3 select, .wrapper.style3 textarea {
 +
color: #ffffff;
 +
}
 +
 
 +
.wrapper.style3 a {
 +
color: #8a4680;
 +
}
 +
 
 +
.wrapper.style3 strong, .wrapper.style3 b {
 +
color: #ffffff;
 +
}
 +
 
 +
.wrapper.style3 h1, .wrapper.style3 h2, .wrapper.style3 h3, .wrapper.style3 h4, .wrapper.style3 h5, .wrapper.style3 h6 {
 +
color: #ffffff;
 +
}
 +
 
 +
.wrapper.style3 blockquote {
 +
border-left-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style3 code {
 +
background: rgba(255, 255, 255, 0.075);
 +
border-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style3 hr {
 +
border-bottom-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style3 .box {
 +
border-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style3 input[type="submit"],
 +
.wrapper.style3 input[type="reset"],
 +
.wrapper.style3 input[type="button"],
 +
.wrapper.style3 button,
 +
.wrapper.style3 .button {
 +
background-color: #f2f2f2;
 +
color: #000 !important;
 +
}
 +
 
 +
.wrapper.style3 input[type="submit"]:hover,
 +
.wrapper.style3 input[type="reset"]:hover,
 +
.wrapper.style3 input[type="button"]:hover,
 +
.wrapper.style3 button:hover,
 +
.wrapper.style3 .button:hover {
 +
background-color: white;
 +
}
 +
 
 +
.wrapper.style3 input[type="submit"]:active,
 +
.wrapper.style3 input[type="reset"]:active,
 +
.wrapper.style3 input[type="button"]:active,
 +
.wrapper.style3 button:active,
 +
.wrapper.style3 .button:active {
 +
background-color: #e5e5e5;
 +
}
 +
 
 +
.wrapper.style3 input[type="submit"].alt,
 +
.wrapper.style3 input[type="reset"].alt,
 +
.wrapper.style3 input[type="button"].alt,
 +
.wrapper.style3 button.alt,
 +
.wrapper.style3 .button.alt {
 +
background-color: transparent;
 +
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25);
 +
color: #ffffff !important;
 +
}
 +
 
 +
.wrapper.style3 input[type="submit"].alt:hover,
 +
.wrapper.style3 input[type="reset"].alt:hover,
 +
.wrapper.style3 input[type="button"].alt:hover,
 +
.wrapper.style3 button.alt:hover,
 +
.wrapper.style3 .button.alt:hover {
 +
background-color: rgba(255, 255, 255, 0.075);
 +
}
 +
 
 +
.wrapper.style3 input[type="submit"].alt:active,
 +
.wrapper.style3 input[type="reset"].alt:active,
 +
.wrapper.style3 input[type="button"].alt:active,
 +
.wrapper.style3 button.alt:active,
 +
.wrapper.style3 .button.alt:active {
 +
background-color: rgba(255, 255, 255, 0.2);
 +
}
 +
 
 +
.wrapper.style3 input[type="submit"].alt.icon:before,
 +
.wrapper.style3 input[type="reset"].alt.icon:before,
 +
.wrapper.style3 input[type="button"].alt.icon:before,
 +
.wrapper.style3 button.alt.icon:before,
 +
.wrapper.style3 .button.alt.icon:before {
 +
color: #999999;
 +
}
 +
 
 +
.wrapper.style3 input[type="submit"].special,
 +
.wrapper.style3 input[type="reset"].special,
 +
.wrapper.style3 input[type="button"].special,
 +
.wrapper.style3 button.special,
 +
.wrapper.style3 .button.special {
 +
background-color: #8a4680;
 +
color: #ffffff !important;
 +
}
 +
 
 +
.wrapper.style3 input[type="submit"].special:hover,
 +
.wrapper.style3 input[type="reset"].special:hover,
 +
.wrapper.style3 input[type="button"].special:hover,
 +
.wrapper.style3 button.special:hover,
 +
.wrapper.style3 .button.special:hover {
 +
background-color: #9b4f90;
 +
}
 +
 
 +
.wrapper.style3 input[type="submit"].special:active,
 +
.wrapper.style3 input[type="reset"].special:active,
 +
.wrapper.style3 input[type="button"].special:active,
 +
.wrapper.style3 button.special:active,
 +
.wrapper.style3 .button.special:active {
 +
background-color: #793d70;
 +
}
 +
 
 +
.wrapper.style3 label {
 +
color: #ffffff;
 +
}
 +
 
 +
.wrapper.style3 input[type="text"],
 +
.wrapper.style3 input[type="password"],
 +
.wrapper.style3 input[type="email"],
 +
.wrapper.style3 select,
 +
.wrapper.style3 textarea {
 +
background: rgba(255, 255, 255, 0.075);
 +
border-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style3 input[type="text"]:focus,
 +
.wrapper.style3 input[type="password"]:focus,
 +
.wrapper.style3 input[type="email"]:focus,
 +
.wrapper.style3 select:focus,
 +
.wrapper.style3 textarea:focus {
 +
border-color: #8a4680;
 +
box-shadow: 0 0 0 1px #8a4680;
 +
}
 +
 
 +
.wrapper.style3 .select-wrapper:before {
 +
color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style3 input[type="checkbox"] + label,
 +
.wrapper.style3 input[type="radio"] + label {
 +
color: #bfbfbf;
 +
}
 +
 
 +
.wrapper.style3 input[type="checkbox"] + label:before,
 +
.wrapper.style3 input[type="radio"] + label:before {
 +
background: rgba(255, 255, 255, 0.075);
 +
border-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style3 input[type="checkbox"]:checked + label:before,
 +
.wrapper.style3 input[type="radio"]:checked + label:before {
 +
background-color: #8a4680;
 +
border-color: #8a4680;
 +
color: #ffffff;
 +
}
 +
 
 +
.wrapper.style3 input[type="checkbox"]:focus + label:before,
 +
.wrapper.style3 input[type="radio"]:focus + label:before {
 +
border-color: #8a4680;
 +
box-shadow: 0 0 0 1px #8a4680;
 +
}
 +
 
 +
.wrapper.style3 ::-webkit-input-placeholder {
 +
color: #999999 !important;
 +
}
 +
 
 +
.wrapper.style3 :-moz-placeholder {
 +
color: #999999 !important;
 +
}
 +
 
 +
.wrapper.style3 ::-moz-placeholder {
 +
color: #999999 !important;
 +
}
 +
 
 +
.wrapper.style3 :-ms-input-placeholder {
 +
color: #999999 !important;
 +
}
 +
 
 +
.wrapper.style3 .formerize-placeholder {
 +
color: #999999 !important;
 +
}
 +
 
 +
.wrapper.style3 ul.alt li {
 +
border-top-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style3 header p {
 +
color: #999999;
 +
}
 +
 
 +
.wrapper.style3 table tbody tr {
 +
border-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style3 table tbody tr:nth-child(2n + 1) {
 +
background-color: rgba(255, 255, 255, 0.075);
 +
}
 +
 
 +
.wrapper.style3 table th {
 +
color: #ffffff;
 +
}
 +
 
 +
.wrapper.style3 table thead {
 +
border-bottom-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style3 table tfoot {
 +
border-top-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style3 table.alt tbody tr td {
 +
border-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.wrapper.style3 .inner {
 +
position: relative;
 +
z-index: 2;
 +
}
 +
 
 +
.wrapper.style3 p {
 +
text-transform: uppercase;
 +
font-size: .75rem;
 +
font-weight: 300;
 +
margin: 0 0 .5rem 0;
 +
padding: 0 0 1rem 0;
 +
letter-spacing: .25rem;
 +
}
 +
 
 +
.wrapper.style3 p:after {
 +
content: '';
 +
position: absolute;
 +
margin: auto;
 +
right: 0;
 +
bottom: 0;
 +
left: 0;
 +
width: 50%;
 +
height: 1px;
 +
background-color: rgba(255, 255, 255, 0.5);
 +
}
 +
 
 +
.wrapper.style3:before {
 +
-moz-transition: opacity 3s ease;
 +
-webkit-transition: opacity 3s ease;
 +
-ms-transition: opacity 3s ease;
 +
transition: opacity 3s ease;
 +
-moz-transition-delay: 1.25s;
 +
-webkit-transition-delay: 1.25s;
 +
-ms-transition-delay: 1.25s;
 +
transition-delay: 1.25s;
 +
content: '';
 +
display: block;
 +
background-color: rgba(0, 0, 0, 0.95);
 +
height: 100%;
 +
left: 0;
 +
opacity: 0.75;
 +
position: absolute;
 +
top: 0;
 +
width: 100%;
 +
z-index: 1;
 +
}
 +
 
 +
@media screen and (max-width: 1280px) {
 +
 
 +
.wrapper > .inner {
 +
width: 75rem;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 980px) {
 +
 
 +
.wrapper > .inner {
 +
width: 90%;
 +
}
 +
 
 +
.wrapper.style3 {
 +
background-attachment: scroll;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
.wrapper {
 +
padding: 3rem 0 1rem 0 ;
 +
}
 +
 
 +
}
 +
 
 +
/* Flexgrid */
 +
 
 +
.grid-style {
 +
width: 100%;
 +
margin: 0 0 2.5rem 0;
 +
display: -moz-flex;
 +
display: -webkit-flex;
 +
display: -ms-flex;
 +
display: flex;
 +
-moz-flex-wrap: wrap;
 +
-webkit-flex-wrap: wrap;
 +
-ms-flex-wrap: wrap;
 +
flex-wrap: wrap;
 +
-moz-align-items: stretch;
 +
-webkit-align-items: stretch;
 +
-ms-align-items: stretch;
 +
align-items: stretch;
 +
}
 +
 
 +
.grid-style > * {
 +
-moz-flex-shrink: 1;
 +
-webkit-flex-shrink: 1;
 +
-ms-flex-shrink: 1;
 +
flex-shrink: 1;
 +
-moz-flex-grow: 0;
 +
-webkit-flex-grow: 0;
 +
-ms-flex-grow: 0;
 +
flex-grow: 0;
 +
}
 +
 
 +
.grid-style > * {
 +
width: 50%;
 +
}
 +
 
 +
.grid-style > * {
 +
padding: 2rem;
 +
width: calc(50% + 2rem);
 +
}
 +
 
 +
.grid-style > :nth-child(-n + 2) {
 +
padding-top: 0;
 +
}
 +
 
 +
.grid-style > :nth-last-child(-n + 2) {
 +
padding-bottom: 0;
 +
}
 +
 
 +
.grid-style > :nth-child(2n + 1) {
 +
padding-left: 0;
 +
}
 +
 
 +
.grid-style > :nth-child(2n) {
 +
padding-right: 0;
 +
}
 +
 
 +
.grid-style > :nth-child(2n + 1),
 +
.grid-style > :nth-child(2n) {
 +
width: calc(50% + 0rem);
 +
}
 +
 
 +
.grid-style .box {
 +
margin: 0;
 +
}
 +
 
 +
@media screen and (max-width: 980px) {
 +
 
 +
.grid-style > * {
 +
width: 100%;
 +
}
 +
 
 +
.grid-style > * {
 +
padding: 1rem;
 +
width: calc(50% + 1rem);
 +
}
 +
 
 +
.grid-style > :nth-child(-n + 2) {
 +
padding-top: 1rem;
 +
}
 +
 
 +
.grid-style > :nth-last-child(-n + 2) {
 +
padding-bottom: 1rem;
 +
}
 +
 
 +
.grid-style > :nth-child(2n + 1) {
 +
padding-left: 1rem;
 +
}
 +
 
 +
.grid-style > :nth-child(2n) {
 +
padding-right: 1rem;
 +
}
 +
 
 +
.grid-style > :nth-child(2n + 1),
 +
.grid-style > :nth-child(2n) {
 +
padding: 1rem;
 +
width: calc(100% + 2rem);
 +
}
 +
 
 +
.grid-style > * {
 +
padding: 1rem;
 +
width: calc(100% + 2rem);
 +
}
 +
 
 +
.grid-style > :nth-child(-n + 1) {
 +
padding-top: 0;
 +
}
 +
 
 +
.grid-style > :nth-last-child(-n + 1) {
 +
padding-bottom: 0;
 +
}
 +
 
 +
.grid-style > :nth-child(1n + 1) {
 +
padding-left: 0;
 +
}
 +
 
 +
.grid-style > :nth-child(1n) {
 +
padding-right: 0;
 +
}
 +
 
 +
.grid-style > :nth-child(1n + 1),
 +
.grid-style > :nth-child(1n) {
 +
width: calc(100% + 1rem);
 +
}
 +
 
 +
}
 +
 
 +
.gallery {
 +
width: 100%;
 +
margin: 2.5rem 0 2.5rem 0;
 +
display: -moz-flex;
 +
display: -webkit-flex;
 +
display: -ms-flex;
 +
display: flex;
 +
-moz-flex-wrap: wrap;
 +
-webkit-flex-wrap: wrap;
 +
-ms-flex-wrap: wrap;
 +
flex-wrap: wrap;
 +
-moz-align-items: stretch;
 +
-webkit-align-items: stretch;
 +
-ms-align-items: stretch;
 +
align-items: stretch;
 +
}
 +
 
 +
.gallery > * {
 +
-moz-flex-shrink: 1;
 +
-webkit-flex-shrink: 1;
 +
-ms-flex-shrink: 1;
 +
flex-shrink: 1;
 +
-moz-flex-grow: 0;
 +
-webkit-flex-grow: 0;
 +
-ms-flex-grow: 0;
 +
flex-grow: 0;
 +
}
 +
 
 +
.gallery > * {
 +
width: 50%;
 +
}
 +
 
 +
.gallery > * {
 +
padding: 2rem;
 +
width: calc(50% + 2rem);
 +
}
 +
 
 +
.gallery > :nth-child(-n + 2) {
 +
padding-top: 0;
 +
}
 +
 
 +
.gallery > :nth-last-child(-n + 2) {
 +
padding-bottom: 0;
 +
}
 +
 
 +
.gallery > :nth-child(2n + 1) {
 +
padding-left: 0;
 +
}
 +
 
 +
.gallery > :nth-child(2n) {
 +
padding-right: 0;
 +
}
 +
 
 +
.gallery > :nth-child(2n + 1),
 +
.gallery > :nth-child(2n) {
 +
width: calc(50% + 0rem);
 +
}
 +
 
 +
.gallery .image {
 +
background: #FFF;
 +
padding: 1rem;
 +
}
 +
 
 +
.gallery .image.fit {
 +
margin: 0;
 +
}
 +
 
 +
@media screen and (max-width: 980px) {
 +
 
 +
.gallery > * {
 +
width: 100%;
 +
}
 +
 
 +
.gallery > * {
 +
padding: 1rem;
 +
width: calc(50% + 1rem);
 +
}
 +
 
 +
.gallery > :nth-child(-n + 2) {
 +
padding-top: 1rem;
 +
}
 +
 
 +
.gallery > :nth-last-child(-n + 2) {
 +
padding-bottom: 1rem;
 +
}
 +
 
 +
.gallery > :nth-child(2n + 1) {
 +
padding-left: 1rem;
 +
}
 +
 
 +
.gallery > :nth-child(2n) {
 +
padding-right: 1rem;
 +
}
 +
 
 +
.gallery > :nth-child(2n + 1),
 +
.gallery > :nth-child(2n) {
 +
padding: 1rem;
 +
width: calc(100% + 2rem);
 +
}
 +
 
 +
.gallery > * {
 +
padding: 1rem;
 +
width: calc(100% + 2rem);
 +
}
 +
 
 +
.gallery > :nth-child(-n + 1) {
 +
padding-top: 0;
 +
}
 +
 
 +
.gallery > :nth-last-child(-n + 1) {
 +
padding-bottom: 0;
 +
}
 +
 
 +
.gallery > :nth-child(1n + 1) {
 +
padding-left: 0;
 +
}
 +
 
 +
.gallery > :nth-child(1n) {
 +
padding-right: 0;
 +
}
 +
 
 +
.gallery > :nth-child(1n + 1),
 +
.gallery > :nth-child(1n) {
 +
width: calc(100% + 1rem);
 +
}
 +
 
 +
}
 +
 
 +
/* Header */
 +
 
 +
body.subpage {
 +
padding-top: 3.25em;
 +
}
 +
 
 +
@-moz-keyframes reveal-header {
 +
0% {
 +
top: -4em;
 +
opacity: 0;
 +
}
 +
 
 +
100% {
 +
top: 0;
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@-webkit-keyframes reveal-header {
 +
0% {
 +
top: -4em;
 +
opacity: 0;
 +
}
 +
 
 +
100% {
 +
top: 0;
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@-ms-keyframes reveal-header {
 +
0% {
 +
top: -4em;
 +
opacity: 0;
 +
}
 +
 
 +
100% {
 +
top: 0;
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
@keyframes reveal-header {
 +
0% {
 +
top: -4em;
 +
opacity: 0;
 +
}
 +
 
 +
100% {
 +
top: 0;
 +
opacity: 1;
 +
}
 +
}
 +
 
 +
#header {
 +
background: rgba(0, 0, 0, 0.975);
 +
color: #a6a6a6;
 +
cursor: default;
 +
height: 3.25em;
 +
left: 0;
 +
line-height: 3.25em;
 +
position: fixed;
 +
text-align: right;
 +
top: 0;
 +
width: 100%;
 +
z-index: 10001;
 +
}
 +
 
 +
#header > .logo {
 +
display: inline-block;
 +
height: inherit;
 +
left: 1.25em;
 +
line-height: inherit;
 +
margin: 0;
 +
padding: 0;
 +
position: absolute;
 +
top: 0;
 +
}
 +
 
 +
#header > .logo a {
 +
font-size: 1.25em;
 +
color: #FFF;
 +
text-decoration: none;
 +
}
 +
 
 +
#header > .logo a:hover {
 +
color: rgba(255, 255, 255, 0.65);
 +
}
 +
 
 +
#header > .logo span {
 +
font-weight: 400;
 +
font-size: .8em;
 +
color: rgba(255, 255, 255, 0.65);
 +
}
 +
 
 +
#header > a {
 +
-moz-transition: color 0.2s ease-in-out;
 +
-webkit-transition: color 0.2s ease-in-out;
 +
-ms-transition: color 0.2s ease-in-out;
 +
transition: color 0.2s ease-in-out;
 +
display: inline-block;
 +
padding: 0 0.75em;
 +
color: inherit;
 +
text-decoration: none;
 +
color: #FFF;
 +
}
 +
 
 +
#header > a:hover {
 +
color: #f2f2f2;
 +
}
 +
 
 +
#header > a[href="#menu"] {
 +
text-decoration: none;
 +
-webkit-tap-highlight-color: transparent;
 +
}
 +
 
 +
#header > a[href="#menu"]:before {
 +
content: "";
 +
-moz-osx-font-smoothing: grayscale;
 +
-webkit-font-smoothing: antialiased;
 +
font-family: FontAwesome;
 +
font-style: normal;
 +
font-weight: normal;
 +
text-transform: none !important;
 +
}
 +
 
 +
#header > a[href="#menu"]:before {
 +
margin: 0 0.5em 0 0;
 +
}
 +
 
 +
#header > a + a[href="#menu"]:last-child {
 +
border-left: solid 1px rgba(0, 0, 0, 0.15);
 +
padding-left: 1.25em;
 +
margin-left: 0.5em;
 +
}
 +
 
 +
#header > a:last-child {
 +
padding-right: 1.25em;
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
#header > a {
 +
padding: 0 0.5em;
 +
}
 +
 
 +
#header > a + a[href="#menu"]:last-child {
 +
padding-left: 1em;
 +
margin-left: 0.25em;
 +
}
 +
 
 +
#header > a:last-child {
 +
padding-right: 1em;
 +
}
 +
 
 +
}
 +
 
 +
#header.reveal {
 +
-moz-animation: reveal-header 0.5s ease;
 +
-webkit-animation: reveal-header 0.5s ease;
 +
-ms-animation: reveal-header 0.5s ease;
 +
animation: reveal-header 0.5s ease;
 +
}
 +
 
 +
#header.alt {
 +
-moz-animation: none;
 +
-webkit-animation: none;
 +
-ms-animation: none;
 +
animation: none;
 +
background-color: transparent;
 +
box-shadow: none;
 +
overflow: hidden;
 +
position: absolute;
 +
top: 1.5em;
 +
}
 +
 
 +
#header.alt h1 {
 +
left: 2.5em;
 +
}
 +
 
 +
#header.alt nav {
 +
right: 2.5em;
 +
}
 +
 
 +
@media screen and (max-width: 980px) {
 +
 
 +
body.subpage {
 +
padding-top: 44px;
 +
}
 +
 
 +
#header {
 +
height: 44px;
 +
line-height: 44px;
 +
}
 +
 
 +
#header > h1 {
 +
left: 1em;
 +
}
 +
 
 +
#header > h1 a {
 +
font-size: 1em;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 480px) {
 +
 
 +
#header {
 +
min-width: 320px;
 +
}
 +
 
 +
}
 +
 
 +
/* Menu */
 +
 
 +
#menu {
 +
-moz-transform: translateX(20rem);
 +
-webkit-transform: translateX(20rem);
 +
-ms-transform: translateX(20rem);
 +
transform: translateX(20rem);
 +
-moz-transition: -moz-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
 +
-webkit-transition: -webkit-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
 +
-ms-transition: -ms-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
 +
transition: transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
 +
-webkit-overflow-scrolling: touch;
 +
background: rgba(0, 0, 0, 0.95);
 +
box-shadow: none;
 +
color: #000;
 +
height: 100%;
 +
max-width: 80%;
 +
overflow-y: auto;
 +
padding: 3rem 2rem;
 +
position: fixed;
 +
right: 0;
 +
top: 0;
 +
visibility: hidden;
 +
width: 20rem;
 +
z-index: 10002;
 +
}
 +
 
 +
#menu > ul {
 +
margin: 0 0 1rem 0;
 +
}
 +
 
 +
#menu > ul.links {
 +
list-style: none;
 +
padding: 0;
 +
}
 +
 
 +
#menu > ul.links > li {
 +
padding: 0;
 +
}
 +
 
 +
#menu > ul.links > li > a:not(.button) {
 +
border: 0;
 +
border-top: solid 1px rgba(255, 255, 255, 0.125);
 +
color: rgba(255, 255, 255, 0.5);
 +
display: block;
 +
line-height: 3.5rem;
 +
text-decoration: none;
 +
text-transform: uppercase;
 +
}
 +
 
 +
#menu > ul.links > li > a:not(.button):hover {
 +
color: #FFF;
 +
}
 +
 
 +
#menu > ul.links > li > .button {
 +
display: block;
 +
margin: 0.5rem 0 0 0;
 +
}
 +
 
 +
#menu > ul.links > li:first-child > a:not(.button) {
 +
border-top: 0 !important;
 +
}
 +
 
 +
#menu .close {
 +
text-decoration: none;
 +
-moz-transition: color 0.2s ease-in-out;
 +
-webkit-transition: color 0.2s ease-in-out;
 +
-ms-transition: color 0.2s ease-in-out;
 +
transition: color 0.2s ease-in-out;
 +
-webkit-tap-highlight-color: transparent;
 +
border: 0;
 +
color: #999999;
 +
cursor: pointer;
 +
display: block;
 +
height: 3.25rem;
 +
line-height: 3.25rem;
 +
padding-right: 1.25rem;
 +
position: absolute;
 +
right: 0;
 +
text-align: right;
 +
top: 0;
 +
vertical-align: middle;
 +
width: 7rem;
 +
}
 +
 
 +
#menu .close:before {
 +
-moz-osx-font-smoothing: grayscale;
 +
-webkit-font-smoothing: antialiased;
 +
font-family: FontAwesome;
 +
font-style: normal;
 +
font-weight: normal;
 +
text-transform: none !important;
 +
}
 +
 
 +
#menu .close:before {
 +
content: '\f00d';
 +
font-size: 1.25rem;
 +
}
 +
 
 +
#menu .close:hover {
 +
color: #000;
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
#menu .close {
 +
height: 4rem;
 +
line-height: 4rem;
 +
}
 +
 
 +
}
 +
 
 +
#menu.visible {
 +
-moz-transform: translateX(0);
 +
-webkit-transform: translateX(0);
 +
-ms-transform: translateX(0);
 +
transform: translateX(0);
 +
box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.2);
 +
visibility: visible;
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
#menu {
 +
padding: 2.5rem 1.75rem;
 +
}
 +
 
 +
}
 +
 
 +
/* Banner */
 +
 
 +
.banner {
 +
background-color: #8a4680;
 +
color: #e2d1df;
 +
padding: 8em 0;
 +
position: relative;
 +
}
 +
 
 +
.banner input, .banner select, .banner textarea {
 +
color: #ffffff;
 +
}
 +
 
 +
.banner a {
 +
color: #ffffff;
 +
}
 +
 
 +
.banner strong, .banner b {
 +
color: #ffffff;
 +
}
 +
 
 +
.banner h1, .banner h2, .banner h3, .banner h4, .banner h5, .banner h6 {
 +
color: #ffffff;
 +
}
 +
 
 +
.banner blockquote {
 +
border-left-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.banner code {
 +
background: rgba(255, 255, 255, 0.075);
 +
border-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.banner hr {
 +
border-bottom-color: rgba(255, 255, 255, 0.25);
 +
}
 +
 
 +
.banner.full {
 +
padding: 0;
 +
min-height: 100vh;
 +
height: 100vh !important;
 +
}
 +
 
 +
.banner.half {
 +
padding: 0;
 +
min-height: 50vh;
 +
height: 50vh !important;
 +
}
 +
 
 +
.banner:after {
 +
-moz-pointer-events: none;
 +
-webkit-pointer-events: none;
 +
-ms-pointer-events: none;
 +
pointer-events: none;
 +
-moz-transition: opacity 1.5s ease-in-out, visibility 1.5s;
 +
-webkit-transition: opacity 1.5s ease-in-out, visibility 1.5s;
 +
-ms-transition: opacity 1.5s ease-in-out, visibility 1.5s;
 +
transition: opacity 1.5s ease-in-out, visibility 1.5s;
 +
background: #000000;
 +
content: '';
 +
display: block;
 +
height: 100%;
 +
left: 0;
 +
opacity: 0;
 +
position: absolute;
 +
top: 0;
 +
visibility: hidden;
 +
width: 100%;
 +
z-index: 2;
 +
}
 +
 
 +
.banner .indicators {
 +
bottom: 1.5em;
 +
left: 0;
 +
list-style: none;
 +
margin: 0;
 +
padding: 0;
 +
position: absolute;
 +
text-align: center;
 +
width: 100%;
 +
z-index: 2;
 +
}
 +
 
 +
.banner .indicators li {
 +
cursor: pointer;
 +
display: inline-block;
 +
height: 2em;
 +
overflow: hidden;
 +
padding: 0;
 +
position: relative;
 +
text-indent: 2em;
 +
width: 2em;
 +
}
 +
 
 +
.banner .indicators li:before {
 +
background: rgba(255, 255, 255, 0.35);
 +
border-radius: 100%;
 +
content: '';
 +
display: inline-block;
 +
height: 0.8em;
 +
left: 50%;
 +
margin: -0.4em 0 0 -0.4em;
 +
position: absolute;
 +
text-indent: 0;
 +
top: 50%;
 +
width: 0.8em;
 +
}
 +
 
 +
.banner .indicators li.visible:before {
 +
background: #fff;
 +
}
 +
 
 +
.banner > article {
 +
-moz-transition: opacity 1.5s ease, visibility 1.5s;
 +
-webkit-transition: opacity 1.5s ease, visibility 1.5s;
 +
-ms-transition: opacity 1.5s ease, visibility 1.5s;
 +
transition: opacity 1.5s ease, visibility 1.5s;
 +
background-attachment: fixed;
 +
background-position: center;
 +
background-repeat: no-repeat;
 +
background-size: cover;
 +
height: 100%;
 +
left: 0;
 +
opacity: 0;
 +
position: absolute;
 +
text-align: center;
 +
top: 0;
 +
visibility: hidden;
 +
width: 100%;
 +
z-index: 0;
 +
}
 +
 
 +
.banner > article:before {
 +
content: '';
 +
display: inline-block;
 +
height: 100%;
 +
vertical-align: middle;
 +
}
 +
 
 +
.banner > article:after {
 +
content: '';
 +
display: block;
 +
width: 100%;
 +
height: 100%;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
background: #000;
 +
opacity: 0.35;
 +
}
 +
 
 +
.banner > article .inner {
 +
position: relative;
 +
display: inline-block;
 +
vertical-align: middle;
 +
z-index: 1;
 +
}
 +
 
 +
.banner > article .inner > :last-child {
 +
margin-bottom: 0;
 +
}
 +
 
 +
.banner > article h2 {
 +
font-size: 7rem;
 +
margin-bottom: 0;
 +
color: #FFF;
 +
font-weight: 300;
 +
}
 +
 
 +
.banner > article h2:after {
 +
display: none;
 +
}
 +
 
 +
.banner > article p {
 +
color: rgba(255, 255, 255, 0.65);
 +
text-transform: uppercase;
 +
font-size: 1rem;
 +
font-weight: 300;
 +
margin: 0;
 +
padding-bottom: 1.75rem;
 +
letter-spacing: .25rem;
 +
}
 +
 
 +
.banner > article p:after {
 +
content: '';
 +
position: absolute;
 +
margin: auto;
 +
right: 0;
 +
bottom: 0;
 +
left: 0;
 +
width: 50%;
 +
height: 1px;
 +
background-color: rgba(255, 255, 255, 0.65);
 +
}
 +
 
 +
.banner > article a {
 +
color: #FFF;
 +
text-decoration: none;
 +
}
 +
 
 +
.banner > article img {
 +
display: none;
 +
}
 +
 
 +
.banner > article.visible {
 +
opacity: 1;
 +
visibility: visible;
 +
}
 +
 
 +
.banner > article.top {
 +
z-index: 1;
 +
}
 +
 
 +
.banner > article.instant {
 +
-moz-transition: none !important;
 +
-webkit-transition: none !important;
 +
-ms-transition: none !important;
 +
transition: none !important;
 +
}
 +
 
 +
body.is-loading .banner:after {
 +
opacity: 1.0;
 +
visibility: visible;
 +
}
 +
 
 +
@media screen and (max-width: 1280px) {
 +
 
 +
.banner.full {
 +
padding: 0;
 +
min-height: 75vh;
 +
height: 75vh !important;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 980px) {
 +
 
 +
.banner.full {
 +
padding: 0;
 +
min-height: 50vh;
 +
height: 50vh !important;
 +
}
 +
 
 +
.banner > article {
 +
background-attachment: scroll;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
.banner > article .inner {
 +
width: 90%;
 +
}
 +
 
 +
.banner > article p {
 +
margin-bottom: 1rem;
 +
}
 +
 
 +
.banner > article h2 {
 +
font-size: 4em;
 +
}
 +
 
 +
}
 +
 
 +
body.is-mobile .banner > article {
 +
background-attachment: scroll;
 +
}
 +
 
 +
/* Main */
 +
 
 +
#main {
 +
padding: 4rem 0 2rem 0 ;
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
#main {
 +
padding: 3rem 0 1rem 0 ;
 +
}
 +
 
 +
}
 +
 
 +
/* Footer */
 +
 
 +
#footer {
 +
padding: 2rem 0 2rem 0 ;
 +
background: #000;
 +
text-align: center;
 +
}
 +
 
 +
#footer a {
 +
color: rgba(255, 255, 255, 0.5);
 +
}
 +
 
 +
#footer a:hover {
 +
color: #FFF;
 +
}
 +
 
 +
#footer .copyright {
 +
color: #bbb;
 +
font-size: 0.9rem;
 +
margin: 0 0 2rem 0;
 +
padding: 0;
 +
text-align: center;
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
#footer {
 +
padding: 3rem 0 1rem 0 ;
 +
}
 +
 
 +
}
 +
</style>
 +
</head>
 +
<body>
 +
 
 +
<!-- Header -->
 +
<!-- Navbar -->
 +
<!-- Navbar -->
 +
<div class="w3-top" style="z-index: 4">
 +
  <div class="w3-bar w3-black w3-card-2 w3-left-align w3-large">
 +
<a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
 +
<a href="https://2018.igem.org/Team:Mingdao" class="w3-bar-item w3-button w3-padding-large w3-white">Home</a>
 +
<a href="https://2018.igem.org/Team:Mingdao/Safety" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" style="text-decoration: none; color: white">Safety</a>
 +
<a href="https://2018.igem.org/Team:Mingdao/Description" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" style="text-decoration: none; color: white">Project</a>
 +
<a href="https://2018.igem.org/Team:Mingdao/Human_Practices" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" style="text-decoration: none; color: white">Human-Practice</a>
 +
<a href="https://2018.igem.org/Team:Mingdao/Notebook" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" style="text-decoration: none; color: white">Notebook</a>
 +
<a href="https://2018.igem.org/Team:Mingdao/Parts" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" style="text-decoration: none; color: white;">Parts</a>
 +
        <a href="https://2018.igem.org/Team:Mingdao/Team" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" style="text-decoration: none; color: white;">Team</a>
 +
        <a href="https://2018.igem.org/Team:Mingdao/Collaborations" class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-hover-white" style="text-decoration: none; color: white;">Attribution</a>
 +
  </div>
 
</div>
 
</div>
 +
        <!-- Navbar END -->
 +
 +
 +
<!-- Sidebar/menu -->
 +
<nav class="w3-sidebar w3-collapse w3-animate-left" style="z-index:3;width:180px; background-color: #F8F9FA" id="mySidebar"><br>
 +
 +
    <div class="w3-container">
 +
        <h5>Dashboard</h5>
 +
    </div>
 +
 +
            <div class="w3-bar-block">
 +
                <form action="https://2017.igem.org/Team:Mingdao/Basic_Part" style="margin: 10px 15px -10px 0;">
 +
                    <button type="submit" class="btn btn-primary btn-block text-white" style="text-align: left; padding-left:1rem;font-size: 1.2rem;"> <i class="fa fa-bullseye fa-fw"></i>  Basic</button>
 +
                </form>
 +
                <form action="https://2017.igem.org/Team:Mingdao/Composite_Part" style="margin: 0 15px -10px 0;">
 +
                    <button type="submit" class="btn btn-primary btn-block text-white" style="text-align: left; padding-left:1rem;font-size: 1.2rem"> <i class="fa fa-bullseye fa-fw"></i> Composite</button>
 +
                </form>
 +
                <form action="https://2017.igem.org/Team:Mingdao/Improve" style="margin: 0 15px -10px 0;">
 +
                    <button type="submit" class="btn btn-primary btn-block text-white" style="text-align: left; padding-left:1rem;font-size: 1.1rem"> <i class="fa fa-bullseye fa-fw"></i> Improvements</button>
 +
                </form>
 +
                <form action="https://2017.igem.org/Team:Mingdao/Part_Collection" style="margin: 0 15px -20px 0;">
 +
                    <button type="submit" class="btn btn-primary btn-block text-white" style="text-align: left; padding-left:1rem;font-size: 1.2rem"> <i class="fa fa-bullseye fa-fw"></i> Collection</button>
 +
                </form>
 +
                <hr>
 +
            </div>
 +
 +
  <div class="w3-bar-block">
 +
    <a href="#" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu"><i class="fa fa-remove fa-fw"></i>  Close Menu</a>
 +
  </div>
 +
 +
            <nav class="navbar navbar-light bg-light">
 +
              <a class="navbar-brand btn" href="#" style="text-decoration: none;">Timeline</a>
 +
              <a class="navbar-brand btn" href="#protocol-md" style="text-decoration: none">Protocol</a>
 +
              <a class="navbar-brand btn" href="#protocol-md" style="text-decoration: none; font-size:1rem"><i class="fa fa-flask" aria-hidden="true"></i> &nbsp;&nbsp;&nbsp; Plasmid</a>
 +
            <a class="navbar-brand btn" href="#pcr-md" style="text-decoration: none; font-size:1rem"><i class="fa fa-flask" aria-hidden="true"></i> &nbsp;&nbsp;&nbsp; PCR</a>
 +
          <a class="navbar-brand btn" href="#pcrcleanup-md" style="text-decoration: none; font-size:1rem"><i class="fa fa-flask" aria-hidden="true"></i> &nbsp;&nbsp;&nbsp; PCR Cleanup</a>
 +
          <a class="navbar-brand btn" href="#re-md" style="text-decoration: none; font-size:1rem"><i class="fa fa-flask" aria-hidden="true"></i> &nbsp;&nbsp;&nbsp; RE</a>
 +
          <a class="navbar-brand btn" href="#transformation-md" style="text-decoration: none; font-size:0.9rem"><i class="fa fa-flask" aria-hidden="true"></i> &nbsp;&nbsp;&nbsp; Transformation</a>
 +
          <a class="navbar-brand btn" href="#glucose-md" style="text-decoration: none; font-size:1rem"><i class="fa fa-flask" aria-hidden="true"></i> &nbsp;&nbsp;&nbsp; Glucose<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Assay</a>
 +
            </nav>
 +
</nav>
 +
<!-- Overlay effect when opening sidebar on small screens -->
 +
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
 +
 +
<div style="margin-left: 180px; background-color: #f2f2f2">
 +
 +
        <!-- Jumbotron -->
 +
        <img src="https://static.igem.org/mediawiki/2017/8/85/Md-notebook-banner.jpeg" width="100%">
 +
        <!-- One -->
 +
        <section id="intro" style="margin-bottom: 10rem">
 +
 +
            <!-- Recombination start -->
 +
 +
            <div class="row" style="margin-top: 3rem">
 +
                <div class="col-md-10 col-sm-12" style="display: block; margin: auto">
 +
 +
                <div class="card">
 +
                      <div class="card-header text-center bg-info" style="color: white; letter-spacing: 0.3rem;font-size:1.8rem;">
 +
                        Timeline
 +
                      </div>
 +
                      <img src="https://static.igem.org/mediawiki/2017/e/e0/MD-timeline-check01.png" width="100%">
 +
 +
                      <img src="https://static.igem.org/mediawiki/2017/7/72/MD-Timeline-HP.png" width="100%" >
 +
 +
                    </div>
 +
                    <div id="protocol-md"></div>
 +
                    <div class="card" style="margin-top: 3rem">
 +
 +
                          <div class="card-header text-center bg-primary" style="color: white; letter-spacing: 0.3rem;font-size:1.8rem;">
 +
                            Protocol
 +
                          </div>
 +
 +
                          <img src="https://static.igem.org/mediawiki/2017/7/79/Mingdaochuck1020-1.png" width="100%">
 +
                        <div style="margin: 3rem 3rem 3rem 3rem ">
 +
                            <h3><b>Bacterial Culture</b></h3>
 +
                            <h4>For plasmid extraction, we normally cultured E. coli carrying plasmids in 6 ml LB broth supplemented with chloramphenicol (34 μg/ml) or ampicillin (100 μg/ml) at 37°C overnight</h4>
 +
                        </div>
 +
                        <div style="margin: 3rem 3rem 3rem 3rem ">
 +
                            <h3><b>Plasmid Extraction Procedure</b></h3>
 +
                            <h4> In all of our experiments, we used a mini-prep kit (Presto™ Mini Plasmid Kit) developed by GENEAID BIOTECH LTD., Taiwan. And we followed the manufacture’s instruction for plasmid extraction. Below is the brief protocol provided by Geneaid Biotech Ltd., Taiwan. And you can also go to their website for more information and complete protocol.</h4>
 +
                        </div>
 +
 +
                          <img src="https://static.igem.org/mediawiki/2017/a/a7/Mingdaochuck1020-2.png" width="100%">
 +
 +
                          <div id="pcr-md"></div>
 +
                          <img src="https://static.igem.org/mediawiki/2017/1/10/Mingdaojay1020-1002.png" width="100%">
 +
                          <div style="margin: 3rem 3rem 3rem 3rem ">
 +
                              <h3><b>PCR for Gene Cloning</b></h3>
 +
                              <h4>
 +
                                  We always used a high fidelity DNA polymerase named KOD -Plus- developed by TOYOBO CO., LTD. We followed the manufacture’s instruction. Brief conditions was showed below.
 +
                                </h4>
 +
                          </div>
 +
                          <div class="row">
 +
                              <div class="col-md-6">
 +
                                  <img src="https://static.igem.org/mediawiki/2017/f/f2/Mingdaojay1020-1004.png" width="70%" style="display: block; margin: auto">
 +
                              </div>
 +
                              <div class="col-md-6">
 +
                                  <img src="https://static.igem.org/mediawiki/2017/d/d0/Mingdaojay1020-1003.png" width="90%">
 +
                              </div>
 +
                          </div>
 +
                          <div style="margin: 3rem 3rem 3rem 3rem ">
 +
                              <h3><b>DNA Insertion Check by Colony PCR</b></h3>
 +
                              <h4>
 +
                                  We used a kit of Taq polymerase (JMR Holdings) and followed manufacture’s instruction. Brief conditions was showed below.
 +
                                </h4>
 +
                          </div>
 +
 +
                          <div class="row">
 +
                              <div class="col-md-6">
 +
                                  <img src="https://static.igem.org/mediawiki/2017/7/74/Mingdaochuck1020-7.jpeg" width="80%" style="display: block; margin:auto">
 +
                              </div>
 +
                              <div class="col-md-6">
 +
                                  <img src="https://static.igem.org/mediawiki/2017/7/70/Mingdaochuck1020-8.jpeg" width="80%" style="display: block; margin:auto">
 +
                              </div>
 +
                          </div>
 +
 +
                          <div id="pcrcleanup-md"></div>
 +
                          <img src="https://static.igem.org/mediawiki/2017/2/26/Mingdaochuck1020-10.jpeg" width="100%">
 +
                          <div style="margin: 3rem 3rem 3rem 3rem ">
 +
                              <h3><b>DNA Gel Electrophoresis</b></h3>
 +
                              <h4>
 +
                                  We prepared 1% DNA agarose gels and run gel with 6X FluoroDye DNA Loading Dye (Green) and  FluoroBand 1KB (0.25-10kb) Fluoescent DNA Ladder. The images were pictured with Omega Lum™ G Imaging System.
 +
                              </h4>
 +
                          </div>
 +
                          <div class="row">
 +
                              <div class="col-md-6">
 +
                                  <img src="https://static.igem.org/mediawiki/2017/3/34/Mingdaochuck1020-6.png" width="60%" style="display: block; margin:auto">
 +
                              </div>
 +
                              <div class="col-md-6">
 +
                                  <img src="https://static.igem.org/mediawiki/2017/e/ef/Mingdaochuck1020-9.jpeg" width="60%" style="display: block; margin:auto">
 +
                              </div>
 +
                          </div>
 +
                          <div style="margin: 3rem 3rem 3rem 3rem ">
 +
                              <h3><b> PCR Cleanup &amp; Gel Elution</b></h3>
 +
                              <h4>
 +
                                  We used GenepHlow™ Gel/PCR Kit developed by GENEAID BIOTECH LTD., Taiwan and followed the manufacture’s instruction.
 +
                              </h4>
 +
                          </div>
 +
                          <img src="https://static.igem.org/mediawiki/2017/9/92/Mingdaochuck1020-11.jpeg" width="100%">
 +
 +
 +
                          <div id="re-md"></div>
 +
                          <img src="https://static.igem.org/mediawiki/2017/0/0c/Mingdaochuck1020-12.jpeg" width="100%">
 +
                          <div style="margin: 3rem 3rem 3rem 3rem ">
 +
                              <h3><b>Restriction Enzymes</b></h3>
 +
                              <h4>
 +
                                  EcoRI, XbaI, SpeI, PstI, MfeI, NotI and NsiI were used in this study and purchased from New England Biolabs (NEB). We have three conditions as described below used for plasmid check and gene cloning, respectively.
 +
                              </h4>
 +
                          </div>
 +
                          <div style="margin: 3rem 3rem 3rem 3rem ">
 +
                              <h3><b>Plasmid Check</b></h3>
 +
 +
                              <img src="https://static.igem.org/mediawiki/2017/a/ae/Mingdaochuck1020-13.jpeg" width="70%">
 +
 +
                          </div>
 +
                          <div style="margin: 3rem 3rem 3rem 3rem ">
 +
                              <h3><b>Gene Cloning (for vectors)</b></h3>
 +
                              <img src="https://static.igem.org/mediawiki/2017/a/a6/Mingdaochuck1020-14.jpeg" width="70%">
 +
                          </div>
 +
 +
                          <div style="margin: 3rem 3rem 3rem 3rem ">
 +
                              <h3><b>Gene Cloning (for inserts)</b></h3>
 +
                              <img src="https://static.igem.org/mediawiki/2017/7/7d/Mingdaochuck1020-15.png" width="70%">
 +
                          </div>
 +
                          <img src="https://static.igem.org/mediawiki/2017/2/2d/Mingdaochuck1020-16.jpeg" width="100%">
 +
                          <div style="margin: 3rem 3rem 3rem 3rem ">
 +
                              <h3><b>Competent Cells</b></h3>
 +
                              <h4>
 +
                                  We used and purchased Elite Competent Cells (DH5α) from GENEAID BIOTECH LTD. We followed the provided protocol for transformation procedure and briefly described as below.
 +
                              </h4>
 +
                          </div>
 +
 +
 +
                          <div id="transformation-md"></div>
 +
                          <div style="margin: 3rem 3rem 3rem 3rem ">
 +
                              <h3><b>Transformation</b></h3>
 +
                              <h4>
 +
                                  <ol>
 +
                                      <li style="padding-left: 3rem; padding-bottom: 1rem">Thaw one tube of competent cells on ice from -80°C refrigerator</li>
 +
                                      <li style="padding-left: 3rem; padding-bottom: 1rem">Add 5 μl of DNA into 50 ul of competent cells. Operate in a laminar flow and manipulate DNA and competent cells on ice.</li>
 +
                                      <li style="padding-left: 3rem; padding-bottom: 1rem">Vortex for 1 sec and stay on ice for 5 min</li>
 +
                                      <li style="padding-left: 3rem; padding-bottom: 1rem">Heat shock the cells at 42°C for 1 min</li>
 +
                                      <li style="padding-left: 3rem; padding-bottom: 1rem">Incubate on ice for 5 min</li>
 +
                                      <li style="padding-left: 3rem; padding-bottom: 1rem">Recover with 500 μl of LB media and shaking in a incubator at 37°C for 1 hr. Operate in the laminar flow.</li>
 +
                                      <li style="padding-left: 3rem; padding-bottom: 1rem">Spread the cells onto a LB agar plate supplemented with 34 μg/ml of chloramphenicol or 100 μg/ml of ampicillin. Operate in the laminar flow. </li>
 +
                                  </ol>
 +
                              </h4>
 +
                          </div>
 +
 +
 +
                          <div id="glucose-md"></div>
 +
                          <img src="https://static.igem.org/mediawiki/2017/a/a5/Mingdaochuck1020-17.jpeg" width="100%">
 +
                          <div style="margin: 3rem 3rem 3rem 3rem ">
 +
                              <h3><b>Glucose Assay</b></h3>
 +
                              <h4>
 +
                                    The bacteria were culture in LB broth supplemented with 34μg/ml of chloramphenicol at 37°C overnight. The next day, the bacterial culture was adjusted to OD600 = 3 and exchanged with M9 minimal media with 20mM of glucose for 4 hours or at different time points.
 +
                              </h4>
 +
                          </div>
 +
                          <img src="https://static.igem.org/mediawiki/2017/d/d3/Mingdaochuck1020-18.jpeg" width="35%" style="display: block; margin: auto">
 +
                          <div style="margin: 3rem 3rem 3rem 3rem ">
 +
                              <h4>
 +
                                    Glucose concentration was analyzed with Glucose (HK) Assay Kit (Sigma-Aldrich) according to the manufacturer’s instruction. Briefly, glucose was phosphorylated (G6P) by hexokinase. Then G6P was further catalyzed by G6PDH and the reduced NAHD was formed from the oxidation of NAD, resulting in increasing in absorbance at 340 nm.
 +
                              </h4>
 +
                          </div>
 +
                          <img src="https://static.igem.org/mediawiki/2017/f/ff/Mingdaochuck1020-19.jpeg" width="50%" style="display: block; margin: auto">
 +
                          <div style="margin: 3rem 3rem 3rem 3rem ">
 +
                              <h3><b> Glucose Response Assay</b></h3>
 +
                              <h4>
 +
                                  The bacteria carrying the indicated vector were cultured in LB media supplemented with 34 μg/ml of chloramphenicol (Cm) at 37°C overnight. The next day, OD600 was measured and adjusted to 2.5 in M9 minimal media with various concentrations of glucose. The bacteria then were incubated for 4 hours at 37°C. 100 μl of the bacterial culture was put into one well of a black-walled, clear-bottom 96-well microplates (Thermo Fisher Scientific Inc.). The fluorescence intensity was measured using BioTek Synergy H1 Hybrid Multi-Mode Reader System at Ex/Em = 584nm/607nm for RFP or Ex/Em = 488nm/518nm  for GFP. The values of OD600 were also measured for bacterial growth. For suicide assay, the culture media were further taken out and diluted 106 times following by spreading onto LB Cm agar plate at 37°C overnight. The third day, the numbers of colonies were counted and bacterial viability was calculated.
 +
                              </h4>
 +
                              <img src="https://static.igem.org/mediawiki/2017/d/de/Mingdaochuck1020-20.jpeg" width="100%">
 +
                          </div>
 +
 +
 +
 +
                        </div>
 +
            </div>
 +
        </div>
 +
            <!-- Recombination end -->
 +
 +
 +
            <!-- CSMU END -->
 +
        </section>
 +
 +
  
 +
</div>
 +
    <!-- BOOTSTRAP -->
 +
                <!-- Optional JavaScript -->
 +
                <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 +
              <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
 +
              <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
 +
              <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
 +
  <!-- BOOTSTRAP -->
 +
</body>
 
</html>
 
</html>
 +
{{Team:Mingdao}}

Revision as of 14:15, 8 August 2018

HOME
TEAM
Team Members
Collaborations
PROJECT
Description
Design
Experiments
Notebook
InterLab
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts Overview
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Human Practices
Education & Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM ⇗
iGEM Human Practice
Home Safety Project Human-Practice Notebook Parts Team Attribution
Timeline
Protocol

Bacterial Culture

For plasmid extraction, we normally cultured E. coli carrying plasmids in 6 ml LB broth supplemented with chloramphenicol (34 μg/ml) or ampicillin (100 μg/ml) at 37°C overnight

Plasmid Extraction Procedure

In all of our experiments, we used a mini-prep kit (Presto™ Mini Plasmid Kit) developed by GENEAID BIOTECH LTD., Taiwan. And we followed the manufacture’s instruction for plasmid extraction. Below is the brief protocol provided by Geneaid Biotech Ltd., Taiwan. And you can also go to their website for more information and complete protocol.

PCR for Gene Cloning

We always used a high fidelity DNA polymerase named KOD -Plus- developed by TOYOBO CO., LTD. We followed the manufacture’s instruction. Brief conditions was showed below.

DNA Insertion Check by Colony PCR

We used a kit of Taq polymerase (JMR Holdings) and followed manufacture’s instruction. Brief conditions was showed below.

DNA Gel Electrophoresis

We prepared 1% DNA agarose gels and run gel with 6X FluoroDye DNA Loading Dye (Green) and FluoroBand 1KB (0.25-10kb) Fluoescent DNA Ladder. The images were pictured with Omega Lum™ G Imaging System.

PCR Cleanup & Gel Elution

We used GenepHlow™ Gel/PCR Kit developed by GENEAID BIOTECH LTD., Taiwan and followed the manufacture’s instruction.

Restriction Enzymes

EcoRI, XbaI, SpeI, PstI, MfeI, NotI and NsiI were used in this study and purchased from New England Biolabs (NEB). We have three conditions as described below used for plasmid check and gene cloning, respectively.

Plasmid Check

Gene Cloning (for vectors)

Gene Cloning (for inserts)

Competent Cells

We used and purchased Elite Competent Cells (DH5α) from GENEAID BIOTECH LTD. We followed the provided protocol for transformation procedure and briefly described as below.

Transformation

  1. Thaw one tube of competent cells on ice from -80°C refrigerator
  2. Add 5 μl of DNA into 50 ul of competent cells. Operate in a laminar flow and manipulate DNA and competent cells on ice.
  3. Vortex for 1 sec and stay on ice for 5 min
  4. Heat shock the cells at 42°C for 1 min
  5. Incubate on ice for 5 min
  6. Recover with 500 μl of LB media and shaking in a incubator at 37°C for 1 hr. Operate in the laminar flow.
  7. Spread the cells onto a LB agar plate supplemented with 34 μg/ml of chloramphenicol or 100 μg/ml of ampicillin. Operate in the laminar flow.

Glucose Assay

The bacteria were culture in LB broth supplemented with 34μg/ml of chloramphenicol at 37°C overnight. The next day, the bacterial culture was adjusted to OD600 = 3 and exchanged with M9 minimal media with 20mM of glucose for 4 hours or at different time points.

Glucose concentration was analyzed with Glucose (HK) Assay Kit (Sigma-Aldrich) according to the manufacturer’s instruction. Briefly, glucose was phosphorylated (G6P) by hexokinase. Then G6P was further catalyzed by G6PDH and the reduced NAHD was formed from the oxidation of NAD, resulting in increasing in absorbance at 340 nm.

Glucose Response Assay

The bacteria carrying the indicated vector were cultured in LB media supplemented with 34 μg/ml of chloramphenicol (Cm) at 37°C overnight. The next day, OD600 was measured and adjusted to 2.5 in M9 minimal media with various concentrations of glucose. The bacteria then were incubated for 4 hours at 37°C. 100 μl of the bacterial culture was put into one well of a black-walled, clear-bottom 96-well microplates (Thermo Fisher Scientific Inc.). The fluorescence intensity was measured using BioTek Synergy H1 Hybrid Multi-Mode Reader System at Ex/Em = 584nm/607nm for RFP or Ex/Em = 488nm/518nm for GFP. The values of OD600 were also measured for bacterial growth. For suicide assay, the culture media were further taken out and diluted 106 times following by spreading onto LB Cm agar plate at 37°C overnight. The third day, the numbers of colonies were counted and bacterial viability was calculated.

Template:Team:Mingdao