Difference between revisions of "Team:ASIJ TOKYO/Experiments"

Line 1: Line 1:
{{ASIJ_TOKYO}}
+
{{Team:ASIJ_TOKYO/css}}
 +
<!--
 +
Solid State by HTML5 UP
 +
html5up.net | @ajlkn
 +
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 +
-->
 
<html>
 
<html>
 +
<head>
  
<div class="column full_size">
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  
<h1>Experiments</h1>
+
<style>
<p>Describe the research, experiments, and protocols you used in your iGEM project. These should be detailed enough for another team to repeat your experiments.</p>
+
<style>
 +
body {margin:0;}
  
<p>
+
.navbar {
Please remember to put all characterization and measurement data for your parts on the corresponding Registry part pages.  
+
  overflow: hidden;
</p>
+
  background-color: #333;
 +
  font-family: Arial;
  
</div>
+
  position: fixed;
 +
  top: 12px ;
 +
  width: 100%;
 +
  z-index:50;
 +
 
 +
}
  
<div class="column half_size">
+
.navbar a {
<h5>What should this page contain?</h5>
+
  float: left;
<ul>
+
  color: white;
<li> Protocols </li>
+
  text-align: center;
<li> Experiments </li>
+
  padding: 28px 18px;
<li> Documentation of the development of your project </li>
+
  text-decoration: none;
</ul>
+
  font-size: 28px;
 +
 
 +
 
 +
}
 +
 
 +
.dropdown {
 +
    float: left;
 +
    overflow: hidden;
 +
   
 +
   
 +
   
 +
}
 +
 
 +
.dropdown .dropbtn {
 +
    font-size: 28px;   
 +
    border: none;
 +
    outline: none;
 +
    color: white;
 +
    padding: 28px 18px;
 +
    background-color: inherit;
 +
   
 +
 
 +
}
 +
 
 +
.navbar a:hover, .dropdown:hover .dropbtn {
 +
    background-color: #5d70dd;
 +
   
 +
   
 +
   
 +
}
 +
 
 +
.dropdown-content {
 +
    display: none;
 +
    position: absolute;
 +
    background-color: #f9f9f9;
 +
    min-width: 160px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,.4);
 +
    z-index: 100;
 +
    top: 80px;
 +
 
 +
 
 +
 
 +
}
 +
 
 +
.dropdown-content a {
 +
    float: none;
 +
    color: black;
 +
    padding: 12px 18px;
 +
    text-decoration: none;
 +
    display: block;
 +
    text-align: left;
 +
   
 +
   
 +
}
 +
 
 +
 
 +
.dropdown-content a:hover {
 +
    background-color: #ddd;
 +
 
 +
   
 +
}
 +
 
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 +
  position: fixed;
 +
 
 +
}
 +
</style>
 +
</head>
 +
<body>
 +
 
 +
<div class="navbar">
 +
  <a href="https://2017.igem.org/Team:ASIJ_TOKYO">Home</a>
 +
  <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Team">Team</a>
 +
  <div class="dropdown">
 +
      <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Project">Project</a>
 +
     
 +
    <div class="dropdown-content">
 +
      <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Description">Description</a>
 +
      <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Design">Design</a>
 +
      <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Experiments">Experiments</a>
 +
      <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Notebook">Notebook</a>
 +
      <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Results">Results</a>
 +
      <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Attributions">Attributions</a>
  
 
</div>
 
</div>
 +
</div>
 +
 +
 +
  <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Parts">Parts</a>
 +
  <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Safety">Safety</a>
 +
  <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Engagement">Human Practices</a>
 +
 +
 +
 +
 +
  
<div class="column half_size">
 
<h5>Inspiration</h5>
 
<ul>
 
<li><a href="https://2014.igem.org/Team:Colombia/Protocols">2014 Colombia </a></li>
 
<li><a href="https://2014.igem.org/Team:Imperial/Protocols">2014 Imperial </a></li>
 
<li><a href="https://2014.igem.org/Team:Caltech/Project/Experiments">2014 Caltech </a></li>
 
</ul>
 
 
</div>
 
</div>
  
  
<div class="clear"></div>
+
</body>
 +
<head>
 +
<title>IGEM ASIJ TOKYO</title>
 +
<meta charset="utf-8" />
 +
<meta name="viewport" content="width=device-width, initial-scale=1" />
 +
<!--[if lte IE 8]>
  
 +
<script>
  
<div class="column half_size">
+
<title>Solid State by HTML5 UP</title>
 +
<meta charset="utf-8" />
 +
<meta name="viewport" content="width=device-width, initial-scale=1" />
 +
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
 +
</head>
 +
<body>
  
 +
  
<p>Experiments
+
<!-- Two -->
Describe the research, experiments, and protocols you used in your iGEM project. These should be detailed enough for another team to repeat your experiments.
+
<section id="two" class="wrapper alt spotlight style2">
Please remember to put all characterization and measurement data for your parts on the corresponding Registry part pages.
+
<div class="content">
What should this page contain?
+
</div>
Protocols
+
</div>
Experiments
+
</section>
Documentation of the development of your project
+
  
Competent Cell Check:  
+
<!-- Three -->
The purpose of the competent cell check was to find the optimal concentration of the competent cells. We tested five different concentrations and found that 10pg/ul of the competent cells had the most efficient growth.  
+
<section id="three" class="wrapper spotlight style3">
 +
<div class="inner">
 +
<a href="#" class="image"><img src="https://static.igem.org/mediawiki/2017/1/18/Title_image_asij.png" alt="" /></a>
 +
<div class="content">
 +
<h2 class="major">What is CRC?</h2>
 +
<p>Colorectal cancer (CRC), or colon/bowel cancer, is a common form of cancer that most frequently develops starting with polyps. In 2014, an estimated 1.3 million people lived with colon and rectum cancer in the United States. In fact, about 1 in 20 men and women are expected to have colon cancer at some point in their life.
 +
CRC is caused by the APC gene, or activating mutation in β-catenin, which results in the accumulation of β-catenin and subsequent complex formation with TCF/LEF transcription factors. Excessive β-catenin can interact with TCF to activate the transcription of proliferative genes, such as c-MYC and cyclin D1, in the colon.</p>
 +
</div>
 +
</div>
 +
</section>
  
Materials:
+
<section id="four" class="wrapper alt style1">
Competent cell kit/ Transformation Efficiency Kit
+
<div class="inner">
2.0m; microcentrifuge
+
<h2 class="major">Pictures</h2>
Pipette: 1ul, 50ul, 200ul
+
<section class="features">
Incubator
+
Water bath
+
</section>
SOC media
+
Float rack
+
Agar plates
+
  
Method:
+
<!-- Two -->
Spin down the DNA tubes from the Competent Cell Test Kit/Transformation Efficiency Kit to collect all of the DNA into the bottom of each tube, prior to use. A quick 20-30 second spin at 8,000-10,000 rpm will be sufficient.
+
<section id="two" class="wrapper alt spotlight style2">
Note: There should be 50 µL of DNA in each tube sent in the Kit.
+
</div>
Thaw competent cells on ice. Label one 2.0ml microcentrifuge tube for each concentration and then pre-chill by placing the tubes on ice.
+
</div>
Pipette 1 µL of DNA into each microcentrifuge tube. For each concentration, use a separate tube.
+
</section>
Pipette 50 µL of competent cells into each tube. Flick the tube gently with your finger to mix.
+
Incubate on ice for 30 minutes.
+
Preheat the water-bath to 42°C.
+
Heat-shock the cells by placing them into the water-bath for one minute. Be careful to keep the lids of the tubes above the water level, and keep the ice close by.
+
Immediately transfer the tubes back to ice, and incubate on ice for 5 minutes. This helps the cells recover.
+
Add 200 µL of SOC media per tube, and incubate at 37°C for 2 hours. Prepare the agar plates during this time: label them, and add sterile glass beads if using beads to spread the mixture.
+
Pipette 20 µL from each tube onto the appropriate plate, and spread the mixture evenly across the plate. Do triplicates (3 each) of each tube if possible, so you can calculate an average colony yield.
+
Incubate at 37°C overnight or approximately 16 hours. Position the plates so the agar side is facing up, and the lid is facing down.
+
Count the number of colonies on a light field or a dark background, such as a lab bench. Use the following equation to calculate your competent cell efficiency. If you've done triplicates of each sample, use the average cell colony count in the calculation. Make sure to measure the area of each colony to see how effective our cells are.
+
  
 +
<!-- Three -->
 +
<section id="two" class="wrapper spotlight style2">
 +
<div class="inner">
 +
<a href="#" class="image"><img src="https://static.igem.org/mediawiki/2017/1/18/Title_image_asij.png" alt="" /></a>
 +
<div class="content">
 +
<h2 class="major">Project Motivations</h2>
 +
<p>After speaking to Minako Abe, an immunologist, we became aware of the immense prevalence and impact--especially in Japan--of colorectal cancer. In Japan alone, in 2015, there were almost 50,000 deaths from colorectal cancer, marking a sudden, sharp spike in the number of young adults that were diagnosed with this cancer. Finding out that two faculty members at our school were survivors of this disease further cemented our belief in the importance of addressing it at its root.
 +
The issue is especially prevalent in Japan mostly because the younger generation is not fully aware on how common colorectal cancer is becoming and because they are not checking up on their bodies as frequently as they should be. This motivated us to not limit our project on only addressing early detection of CRC, but also raising awareness.</p>
 +
<h2 class="major">How did we do it?</h2>
 +
<p>Our goal was to create a biosensor that would be able to diagnose CRC at an earlier stage and have it fit for a home-kit where use would be accessible and convenient. To do so, we looked upstream fill in. The activation of the Wnt pathway inhibits the degradation of beta-catenin, a protein that triggers the mutation of oncogenes and tumor suppressor genes. Building off of a rapamycin induced split-luciferase system characterized by the 2015 Peking iGEM team, our construct consists of a promoter reporter system that looks at two downstream products, C-myc and COX-2.
 +
As for community outreach, we wanted to take advantage of the fact that we live in the most metropolitan area in Japan. We did so by carrying out our project mainly in Harajuku, which is one of the most popular areas in Tokyo. As ASIJ is also central to many international communities, we’ve also promoted our project at family events held at ASIJ, as well as through our virtual pre-medical club where we were able to interact with schools around the globe.</p>
 +
</div>
 +
</div>
 +
</section>
  
 +
<section id="four" class="wrapper alt style1">
 +
<div class="inner">
 +
<h2 class="major">Pictures</h2>
 +
<section class="features">
 +
 +
</section>
  
 +
<!-- Two -->
 +
<section id="two" class="wrapper alt spotlight style2">
 +
</div>
 +
</div>
 +
</section>
  
Gibson Assembly:
+
<!-- Three -->
The purpose of the Gibson Assembly was to synthesize DNA fragments of the E. coli bacterium with Andersen promoters of three different strengths. In performing this procedure, we were able to determine the optimal promoter strength for the growth of COX-2 and c-Myc. We discovered that the medium strength promoter was more competent with COX-2 and the strong promoter was more competent with c-Myc. The COX-2 promoter and c-Myc promoter were then synthesized by IDT and used in making the BioBrick.
+
<section id="three" class="wrapper spotlight style3">
 +
<div class="inner">
 +
<a href="https://2017.igem.org/Team:ASIJ_TOKYO/Design" class="image"><img src="https://static.igem.org/mediawiki/2017/1/18/Title_image_asij.png" alt="" /></a>
 +
<div class="content">
 +
<h2 class="major">Design</h2>
 +
<p>Our design – how we planned out our experiments.
 +
</p>
 +
</div>
 +
</div>
 +
</section>
  
 +
<!-- Four -->
 +
<section id="four" class="wrapper alt style1">
 +
<div class="inner">
 +
<h2 class="major">Design</h2>
 +
<section class="features">
 +
 +
 +
<a href = "https://2017.igem.org/Team:ASIJ_TOKYO/Design">Click here for more design
  
Materials:
+
</a>
 +
 +
  
Thermocycler
+
</section>
Master Mix
+
Pipette: 1ul, 10ul, 11ul
+
<!-- Two -->
Cox-2 gene
+
<section id="two" class="wrapper alt spotlight style2">
C-myc gene
+
</div>
Anderson promoter
+
</div>
Distilled water
+
</section>
  
 +
<!-- Three -->
 +
<section id="three" class="wrapper spotlight style3">
 +
<div class="inner">
 +
<a href="https://2017.igem.org/Team:ASIJ_TOKYO/Experiments" class="image"><img src="https://static.igem.org/mediawiki/2017/1/18/Title_image_asij.png" alt="" /></a>
 +
<div class="content">
 +
<h2 class="major">Experiments</h2>
 +
<p>Our experiments – the procedure we carried out to gain our data
 +
</p>
 +
</div>
 +
</div>
 +
</section>
  
 +
<!-- Four -->
 +
<section id="four" class="wrapper alt style1">
 +
<div class="inner">
 +
<h2 class="major">Experiments</h2>
 +
<section class="features">
 +
 +
 +
<a href = "https://2017.igem.org/Team:ASIJ_TOKYO/Experiments">Click here for more experiments
  
Method:
+
</a>
Set up the following reaction on ice:
+
 +
  
 +
</section>
 +
<!-- Two -->
 +
<section id="two" class="wrapper alt spotlight style2">
 +
</div>
 +
</div>
 +
</section>
  
Recommended Amount of Fragments Used for Assembly
+
<!-- Three -->
2-3 Fragment Assembly
+
<section id="three" class="wrapper spotlight style3">
4-6 Fragment Assembly
+
<div class="inner">
Positive Control**
+
<a href="https://2017.igem.org/Team:ASIJ_TOKYO/Notebook" class="image"><img src="https://static.igem.org/mediawiki/2017/1/18/Title_image_asij.png" alt="" /></a>
Total Amount of Fragments
+
<div class="content">
0.02–0.5 pmols*
+
<h2 class="major">Notebook</h2>
X μl
+
<p>Our lab notebook – all of our work, progress, and results in one document.</p>
0.2–1 pmols*
+
</div>
X μl
+
</div>
10 μl
+
</section>
Gibson Assembly Master Mix (2X)
+
10 μl
+
10 μl
+
10 μl
+
Deionized H2O
+
10-X μl
+
10-X μl
+
0
+
Total Volume
+
20 μl***
+
20 μl***
+
20 μl
+
* Optimized cloning efficiency is 50–100 ng of vectors with 2–3 fold of excess inserts. Apply 5 times as many inserts if size falls below 200 bps. Total volume of unpurified PCR fragments in Gibson Assembly reaction should not exceed 20%.
+
** Control reagents are provided for 5 experiments.
+
*** If greater numbers of fragments are assembled, additional Gibson Assembly Master Mix may be required.
+
2. Incubate samples, using a thermocycler at 50°C, for 15 minutes when 2 or 3 fragments are being assembled, or 60 minutes when 4-6 fragments are being assembled. Following incubation, store samples on ice or at –20°C for subsequent transformation.
+
Note: Extended incubation up to 60 minutes may help to improve assembly efficiency in some cases (for further details see FAQ section).
+
  
 +
<!-- Four -->
 +
<section id="four" class="wrapper alt style1">
 +
<div class="inner">
 +
<h2 class="major">Notebook</h2>
 +
<section class="features">
 +
<a href = "https://2017.igem.org/Team:ASIJ_TOKYO/Notebook">Click here for the notebook (PDF format)</a>
 +
</section>
 +
</div>
 +
</section>
 +
 +
<!-- Two -->
 +
<section id="two" class="wrapper alt spotlight style2">
 +
</div>
 +
</div>
 +
</section>
  
 +
<!-- Three -->
 +
<section id="three" class="wrapper spotlight style3">
 +
<div class="inner">
 +
<a href="https://2017.igem.org/Team:ASIJ_TOKYO/Results" class="image"><img src="https://static.igem.org/mediawiki/2017/1/18/Title_image_asij.png" alt="" /></a>
 +
<div class="content">
 +
<h2 class="major">Results</h2>
 +
<p>Our results – conclusive answers to our study.</p>
 +
</div>
 +
</div>
 +
</section>
  
Transformation:
+
<!-- Four -->
The chemically competent cell transformation was for the purpose of observing phenotypic results from our previous Gibson Assembly procedure in the E. coli bacterium. A phenotypical reporter system in the presence of black light, part of our Biobrick, was what we searched for after the final incubation. This was done by examining the cell cultures in black light after an overnight process of full recovery.  
+
<section id="four" class="wrapper alt style1">
 +
<div class="inner">
 +
<h2 class="major">Results</h2>
 +
<section class="features">
 +
 +
 +
<a href = "https://2017.igem.org/Team:ASIJ_TOKYO/Results">Click here for the results-only page.</a>
  
Materials:
+
</section>
NEB 5-alpha Competent E. coli cells
+
</section>
Pipettes: 50ul, 2ul, 950ul, 200ul
+
<!-- Two -->
1.5ul microcentrifuge tube
+
<section id="two" class="wrapper alt spotlight style2">
Waterbath
+
</div>
Ice bath
+
</div>
SOC media
+
</section>
Inoculating loop
+
LB plate
+
CAMr plate
+
  
Methods:
+
<!-- Three -->
Thaw New England Biolab (NEB) competent cells on ice.
+
<section id="three" class="wrapper spotlight style3">
Chill approximately 5 ng (2 μl) of the ligation mixture in a 1.5 ml microcentrifuge tube.
+
<div class="inner">
Add 50 µl of competent cells to the DNA. Mix gently by pipetting up and down or flicking the tube 4–5 times to mix the cells and DNA. Do not vortex.
+
<a href="#" class="image"><img src="https://static.igem.org/mediawiki/2017/1/18/Title_image_asij.png" alt="" /></a>
Place the mixture on ice for 30 minutes. Do not mix.
+
<div class="content">
Heat shock at 42°C for 30 seconds*. Do not mix.
+
<h2 class="major">Attributions</h2>
Add 950 µl of room temperature SOC media* to the tube.
+
<p>Our attributions – credit given where credit is due.</p>
Place tube at 37°C for 60 minutes. Shake vigorously (250 rpm) or rotate.
+
</div>
Warm selection plates to 37°C.
+
</div>
Spread 50–100 µl of the cells and ligation mixture evenly onto the plates.
+
</section>
Incubate overnight at 37°C.
+
Check for phenotypical expression of cell cultures in black light.
+
* Please note: For the duration and temperature of the heat shock step as well as for the media to be used during the recovery period, please follow the recommendations provided by the competent cells’ manufacturer.
+
  
Electrophoresis:
+
<!-- Four -->
 +
<section id="four" class="wrapper alt style1">
 +
<div class="inner">
 +
<h2 class="major">Attributions</h2>
 +
<section class="features">
 +
<a href = "https://2017.igem.org/Team:ASIJ_TOKYO/Attributions">Click here for the attributions</a>
 +
</section>
 +
</div>
 +
</section>
  
The procedure of electrophoresis was used to verify that all our Biobrick components had been successfully assembled during the Gibson Assembly protocol. Through this process, we were able to confirm success, through determining and comparing the results to each corresponding construct’s predicted plasmid length.
+
 +
 +
<!-- Scripts -->
 +
<script src="assets/js/skel.min.js"></script>
 +
<script src="assets/js/jquery.min.js"></script>
 +
<script src="assets/js/jquery.scrollex.min.js"></script>
 +
<script src="assets/js/util.js"></script>
 +
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
 +
<script src="assets/js/main.js"></script>
  
Materials:
 
Electrophoresis chamber + power supply
 
Agarose solution
 
Pipette: 1ul
 
TBE buffer
 
Dye
 
Bromophenol blue
 
  
Method:
+
<style>
 +
@import url(font-awesome.min.css);
 +
@import url("https://fonts.googleapis.com/css?family=Raleway:200,700|Source+Sans+Pro:300,600,300italic,600italic");
  
Cast 0.8% Agarose Gel
+
/*
Seal ends of gel-casting tray with tape, and insert well-forming comb. Place gel-casting tray out of the way on lab bench so that agarose poured in next step can set undisturbed.  
+
Solid State by HTML5 UP
Carefully pour enough agarose solution into casting tray to fill to depth of about 5mm. Gel should cover only about one-third the height of comb teeth. Use a pipette top to move large bubbles or solid debris to sides or end of tray, while gel is still liquid.
+
html5up.net | @ajlkn
Gel will become cloudy as it solidifies (about 10 minutes). Be careful not to move or jap casting tray while agarose is solidifying. Touch corner of agarose away from comb to test whether gel has solidified.
+
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
When agarose has set, unseal ends of casting tray. Place tray on platform of gel box, so that comb is at negative (black) electrode.
+
*/
Fill box with TBE buffer, to a level that just covers entire surface of gel.
+
Gently remove comb, taking care not to rip wells.
+
Make certain that sample wells left by comb are completely submerged. If “dimples” are noticed around wells, slowly add buffer until they disappear.
+
  
Load Gel and Electrophorese
+
/* Reset */
Add loading dye to each reaction. Either
+
Add 1ul of loading dye to each reaction tube. Close tube tops, and mix by tapping tube bottom on lab bench, pipetting in and out, or pulsing in a microfuge. Make sure tubes are placed in a balanced configuration in rotor.
+
Use micropipette to load entire contents of each reaction tube into separate well in gel as shown in diagrams.  Use fresh tip for each reaction.
+
Steady pipette over well using two hands
+
If there is air in the end of the tip, carefully depress plunger to push the sample to the end of the tip.
+
Dip the pipette tip through the surface of the buffer, center it over the well, and gently depress the pipette plunger to slowly expel sample. Sucrose in the loading dye weighs down the sample, causing it to sink to the bottom of the well.
+
Close top of electrophoresis box, and connect electrical leads to a power supply, anode to anode and cathode to cathode. Make sure both electrodes are connected to same channel of power supply.
+
Turn power supply on, and set to 100-150 volts. The ammeter should register approximately 50-100 milliamperes. If current is not detected, check connections and try again.
+
Run the gel through the electrophoresis machine for 40-60 minutes. Good separation will have occurred when the bromophenol blue band has moved 4-8 cm from wells. If time allows, electrophorese until the bromophenol blue band nears the end of the gel. Stop electrophoresis before bromophenol blue band runs off end of gel.
+
Turn off power supply, disconnect leads from the inputs, and remove top  of electrophoresis box.
+
Carefully remove casting tray from electrophoresis box, and slide gel into disposable weigh boat or  other shallow tray. Label staining tray with your name.
+
  
Restriction Digest
+
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 {
We used restriction digest to find the restriction enzyme that cut our construct into the least number of parts. The restriction enzyme that we choose will allow us to separate our construct from the plasmid backbone.
+
margin: 0;
 +
padding: 0;
 +
border: 0;
 +
font-size: 100%;
 +
font: inherit;
 +
vertical-align: baseline;
 +
}
  
Material
+
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
1.5 ml tubes
+
display: block;
Restriction enzymes: PstI, EcoRI, SpeI, Xbal
+
}
dH2O
+
Pipette: 4 ul, 5ul, 10ul, 1ul, 6ul
+
Waterbath
+
  
 +
body {
 +
line-height: 1;
 +
}
  
Method:
+
ol, ul {
1. Use permanent marker to label four 1.5-ml tubes, in which restriction reactions will be performed
+
list-style: none;
P = PstI
+
}
E = EcoRI
+
S = SpeI
+
X = Xbal
+
- = no enzyme
+
  
2. Use table below as a checklist by adding reagents to each reaction.
+
blockquote, q {
Tube
+
quotes: none;
DNA
+
}
Buffer
+
Pstl
+
EcoRI
+
Spel
+
Xbal
+
H2O
+
1
+
4μl
+
5μl
+
-
+
-
+
-
+
1μl
+
6μl
+
2
+
4μl
+
5μl
+
-
+
1μl
+
-
+
-
+
6μl
+
3
+
4μl
+
5μl
+
-
+
-
+
1μl
+
-
+
6μl
+
4
+
4μl
+
5μl
+
1μl
+
-
+
-
+
-
+
6μl
+
5
+
4μl
+
10μl
+
-
+
-
+
1μl
+
1μl
+
-
+
6
+
4μl
+
10μl
+
1μl
+
-
+
-
+
1μl
+
-
+
7
+
4μl
+
10μl
+
-
+
1μl
+
1μl
+
-
+
-
+
8
+
4μl
+
10μl
+
1μl
+
1μl
+
-
+
-
+
-
+
  
 +
blockquote:before, blockquote:after, q:before, q:after {
 +
content: '';
 +
content: none;
 +
}
  
3. Collect reagents, and place in test tube rack on lab bench.
+
table {
 +
border-collapse: collapse;
 +
border-spacing: 0;
 +
}
  
4. Add 4 μl of DNA to each reaction tube. Touch pipet tip to side of reaction tube, as near to the bottom as possible, to create capillary action to pull solution out of tip.
+
body {
 +
-webkit-text-size-adjust: none;
 +
}
  
5. Always add buffer to reaction tubes before adding enzymes. Use fresh tip to add 5 μl of restriction buffer to clean spot on each reaction tube.
+
/* Box Model */
  
6. Use fresh tips to add 1 μl of PstI, EcoRI, SpeI, XbaI to appropriate tubes.
+
*, *:before, *:after {
 +
-moz-box-sizing: border-box;
 +
-webkit-box-sizing: border-box;
 +
box-sizing: border-box;
 +
}
  
7. Use fresh tip to add 1μl of dH20 to tube labeled “-”.
+
/* Grid */
  
8. Close tube tops. Pool and mix reagents by pulsing in a microfuge or by sharply tapping the tube bottom on lab bench.
+
.row {
 +
border-bottom: solid 1px transparent;
 +
-moz-box-sizing: border-box;
 +
-webkit-box-sizing: border-box;
 +
box-sizing: border-box;
 +
}
  
9. Place reaction tubes in 37 C water bath, and incubate for a minimum of 20 minutes. Reactions can be incubated for a longer period of time.  
+
.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 0em;
 +
}
  
</p>
+
.row.\30 \25 {
</div>
+
margin: 0 0 -1px 0em;
 +
}
 +
 
 +
.row.uniform.\30 \25 > * {
 +
padding: 0em 0 0 0em;
 +
}
 +
 
 +
.row.uniform.\30 \25 {
 +
margin: 0em 0 -1px 0em;
 +
}
 +
 
 +
.row > * {
 +
padding: 0 0 0 1.75em;
 +
}
 +
 
 +
.row {
 +
margin: 0 0 -1px -1.75em;
 +
}
 +
 
 +
.row.uniform > * {
 +
padding: 1.75em 0 0 1.75em;
 +
}
 +
 
 +
.row.uniform {
 +
margin: -1.75em 0 -1px -1.75em;
 +
}
 +
 
 +
.row.\32 00\25 > * {
 +
padding: 0 0 0 3.5em;
 +
}
 +
 
 +
.row.\32 00\25 {
 +
margin: 0 0 -1px -3.5em;
 +
}
 +
 
 +
.row.uniform.\32 00\25 > * {
 +
padding: 3.5em 0 0 3.5em;
 +
}
 +
 
 +
.row.uniform.\32 00\25 {
 +
margin: -3.5em 0 -1px -3.5em;
 +
}
 +
 
 +
.row.\31 50\25 > * {
 +
padding: 0 0 0 2.625em;
 +
}
 +
 
 +
.row.\31 50\25 {
 +
margin: 0 0 -1px -2.625em;
 +
}
 +
 
 +
.row.uniform.\31 50\25 > * {
 +
padding: 2.625em 0 0 2.625em;
 +
}
 +
 
 +
.row.uniform.\31 50\25 {
 +
margin: -2.625em 0 -1px -2.625em;
 +
}
 +
 
 +
.row.\35 0\25 > * {
 +
padding: 0 0 0 0.875em;
 +
}
 +
 
 +
.row.\35 0\25 {
 +
margin: 0 0 -1px -0.875em;
 +
}
 +
 
 +
.row.uniform.\35 0\25 > * {
 +
padding: 0.875em 0 0 0.875em;
 +
}
 +
 
 +
.row.uniform.\35 0\25 {
 +
margin: -0.875em 0 -1px -0.875em;
 +
}
 +
 
 +
.row.\32 5\25 > * {
 +
padding: 0 0 0 0.4375em;
 +
}
 +
 
 +
.row.\32 5\25 {
 +
margin: 0 0 -1px -0.4375em;
 +
}
 +
 
 +
.row.uniform.\32 5\25 > * {
 +
padding: 0.4375em 0 0 0.4375em;
 +
}
 +
 
 +
.row.uniform.\32 5\25 {
 +
margin: -0.4375em 0 -1px -0.4375em;
 +
}
 +
 
 +
.\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 1.75em;
 +
}
 +
 
 +
.row {
 +
margin: 0 0 -1px -1.75em;
 +
}
 +
 
 +
.row.uniform > * {
 +
padding: 1.75em 0 0 1.75em;
 +
}
 +
 
 +
.row.uniform {
 +
margin: -1.75em 0 -1px -1.75em;
 +
}
 +
 
 +
.row.\32 00\25 > * {
 +
padding: 0 0 0 3.5em;
 +
}
 +
 
 +
.row.\32 00\25 {
 +
margin: 0 0 -1px -3.5em;
 +
}
 +
 
 +
.row.uniform.\32 00\25 > * {
 +
padding: 3.5em 0 0 3.5em;
 +
}
 +
 
 +
.row.uniform.\32 00\25 {
 +
margin: -3.5em 0 -1px -3.5em;
 +
}
 +
 
 +
.row.\31 50\25 > * {
 +
padding: 0 0 0 2.625em;
 +
}
 +
 
 +
.row.\31 50\25 {
 +
margin: 0 0 -1px -2.625em;
 +
}
 +
 
 +
.row.uniform.\31 50\25 > * {
 +
padding: 2.625em 0 0 2.625em;
 +
}
 +
 
 +
.row.uniform.\31 50\25 {
 +
margin: -2.625em 0 -1px -2.625em;
 +
}
 +
 
 +
.row.\35 0\25 > * {
 +
padding: 0 0 0 0.875em;
 +
}
 +
 
 +
.row.\35 0\25 {
 +
margin: 0 0 -1px -0.875em;
 +
}
 +
 
 +
.row.uniform.\35 0\25 > * {
 +
padding: 0.875em 0 0 0.875em;
 +
}
 +
 
 +
.row.uniform.\35 0\25 {
 +
margin: -0.875em 0 -1px -0.875em;
 +
}
 +
 
 +
.row.\32 5\25 > * {
 +
padding: 0 0 0 0.4375em;
 +
}
 +
 
 +
.row.\32 5\25 {
 +
margin: 0 0 -1px -0.4375em;
 +
}
 +
 
 +
.row.uniform.\32 5\25 > * {
 +
padding: 0.4375em 0 0 0.4375em;
 +
}
 +
 
 +
.row.uniform.\32 5\25 {
 +
margin: -0.4375em 0 -1px -0.4375em;
 +
}
 +
 
 +
.\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.75em;
 +
}
 +
 
 +
.row {
 +
margin: 0 0 -1px -1.75em;
 +
}
 +
 
 +
.row.uniform > * {
 +
padding: 1.75em 0 0 1.75em;
 +
}
 +
 
 +
.row.uniform {
 +
margin: -1.75em 0 -1px -1.75em;
 +
}
 +
 
 +
.row.\32 00\25 > * {
 +
padding: 0 0 0 3.5em;
 +
}
 +
 
 +
.row.\32 00\25 {
 +
margin: 0 0 -1px -3.5em;
 +
}
 +
 
 +
.row.uniform.\32 00\25 > * {
 +
padding: 3.5em 0 0 3.5em;
 +
}
 +
 
 +
.row.uniform.\32 00\25 {
 +
margin: -3.5em 0 -1px -3.5em;
 +
}
 +
 
 +
.row.\31 50\25 > * {
 +
padding: 0 0 0 2.625em;
 +
}
 +
 
 +
.row.\31 50\25 {
 +
margin: 0 0 -1px -2.625em;
 +
}
 +
 
 +
.row.uniform.\31 50\25 > * {
 +
padding: 2.625em 0 0 2.625em;
 +
}
 +
 
 +
.row.uniform.\31 50\25 {
 +
margin: -2.625em 0 -1px -2.625em;
 +
}
 +
 
 +
.row.\35 0\25 > * {
 +
padding: 0 0 0 0.875em;
 +
}
 +
 
 +
.row.\35 0\25 {
 +
margin: 0 0 -1px -0.875em;
 +
}
 +
 
 +
.row.uniform.\35 0\25 > * {
 +
padding: 0.875em 0 0 0.875em;
 +
}
 +
 
 +
.row.uniform.\35 0\25 {
 +
margin: -0.875em 0 -1px -0.875em;
 +
}
 +
 
 +
.row.\32 5\25 > * {
 +
padding: 0 0 0 0.4375em;
 +
}
 +
 
 +
.row.\32 5\25 {
 +
margin: 0 0 -1px -0.4375em;
 +
}
 +
 
 +
.row.uniform.\32 5\25 > * {
 +
padding: 0.4375em 0 0 0.4375em;
 +
}
 +
 
 +
.row.uniform.\32 5\25 {
 +
margin: -0.4375em 0 -1px -0.4375em;
 +
}
 +
 
 +
.\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.75em;
 +
}
 +
 
 +
.row {
 +
margin: 0 0 -1px -1.75em;
 +
}
 +
 
 +
.row.uniform > * {
 +
padding: 1.75em 0 0 1.75em;
 +
}
 +
 
 +
.row.uniform {
 +
margin: -1.75em 0 -1px -1.75em;
 +
}
 +
 
 +
.row.\32 00\25 > * {
 +
padding: 0 0 0 3.5em;
 +
}
 +
 
 +
.row.\32 00\25 {
 +
margin: 0 0 -1px -3.5em;
 +
}
 +
 
 +
.row.uniform.\32 00\25 > * {
 +
padding: 3.5em 0 0 3.5em;
 +
}
 +
 
 +
.row.uniform.\32 00\25 {
 +
margin: -3.5em 0 -1px -3.5em;
 +
}
 +
 
 +
.row.\31 50\25 > * {
 +
padding: 0 0 0 2.625em;
 +
}
 +
 
 +
.row.\31 50\25 {
 +
margin: 0 0 -1px -2.625em;
 +
}
 +
 
 +
.row.uniform.\31 50\25 > * {
 +
padding: 2.625em 0 0 2.625em;
 +
}
 +
 
 +
.row.uniform.\31 50\25 {
 +
margin: -2.625em 0 -1px -2.625em;
 +
}
 +
 
 +
.row.\35 0\25 > * {
 +
padding: 0 0 0 0.875em;
 +
}
 +
 
 +
.row.\35 0\25 {
 +
margin: 0 0 -1px -0.875em;
 +
}
 +
 
 +
.row.uniform.\35 0\25 > * {
 +
padding: 0.875em 0 0 0.875em;
 +
}
 +
 
 +
.row.uniform.\35 0\25 {
 +
margin: -0.875em 0 -1px -0.875em;
 +
}
 +
 
 +
.row.\32 5\25 > * {
 +
padding: 0 0 0 0.4375em;
 +
}
 +
 
 +
.row.\32 5\25 {
 +
margin: 0 0 -1px -0.4375em;
 +
}
 +
 
 +
.row.uniform.\32 5\25 > * {
 +
padding: 0.4375em 0 0 0.4375em;
 +
}
 +
 
 +
.row.uniform.\32 5\25 {
 +
margin: -0.4375em 0 -1px -0.4375em;
 +
}
 +
 
 +
.\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.25em;
 +
}
 +
 
 +
.row {
 +
margin: 0 0 -1px -1.25em;
 +
}
 +
 
 +
.row.uniform > * {
 +
padding: 1.25em 0 0 1.25em;
 +
}
 +
 
 +
.row.uniform {
 +
margin: -1.25em 0 -1px -1.25em;
 +
}
 +
 
 +
.row.\32 00\25 > * {
 +
padding: 0 0 0 2.5em;
 +
}
 +
 
 +
.row.\32 00\25 {
 +
margin: 0 0 -1px -2.5em;
 +
}
 +
 
 +
.row.uniform.\32 00\25 > * {
 +
padding: 2.5em 0 0 2.5em;
 +
}
 +
 
 +
.row.uniform.\32 00\25 {
 +
margin: -2.5em 0 -1px -2.5em;
 +
}
 +
 
 +
.row.\31 50\25 > * {
 +
padding: 0 0 0 1.875em;
 +
}
 +
 
 +
.row.\31 50\25 {
 +
margin: 0 0 -1px -1.875em;
 +
}
 +
 
 +
.row.uniform.\31 50\25 > * {
 +
padding: 1.875em 0 0 1.875em;
 +
}
 +
 
 +
.row.uniform.\31 50\25 {
 +
margin: -1.875em 0 -1px -1.875em;
 +
}
 +
 
 +
.row.\35 0\25 > * {
 +
padding: 0 0 0 0.625em;
 +
}
 +
 
 +
.row.\35 0\25 {
 +
margin: 0 0 -1px -0.625em;
 +
}
 +
 
 +
.row.uniform.\35 0\25 > * {
 +
padding: 0.625em 0 0 0.625em;
 +
}
 +
 
 +
.row.uniform.\35 0\25 {
 +
margin: -0.625em 0 -1px -0.625em;
 +
}
 +
 
 +
.row.\32 5\25 > * {
 +
padding: 0 0 0 0.3125em;
 +
}
 +
 
 +
.row.\32 5\25 {
 +
margin: 0 0 -1px -0.3125em;
 +
}
 +
 
 +
.row.uniform.\32 5\25 > * {
 +
padding: 0.3125em 0 0 0.3125em;
 +
}
 +
 
 +
.row.uniform.\32 5\25 {
 +
margin: -0.3125em 0 -1px -0.3125em;
 +
}
 +
 
 +
.\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: 640px) {
 +
 
 +
.row > * {
 +
padding: 0 0 0 1.25em;
 +
}
 +
 
 +
.row {
 +
margin: 0 0 -1px -1.25em;
 +
}
 +
 
 +
.row.uniform > * {
 +
padding: 1.25em 0 0 1.25em;
 +
}
 +
 
 +
.row.uniform {
 +
margin: -1.25em 0 -1px -1.25em;
 +
}
 +
 
 +
.row.\32 00\25 > * {
 +
padding: 0 0 0 2.5em;
 +
}
 +
 
 +
.row.\32 00\25 {
 +
margin: 0 0 -1px -2.5em;
 +
}
 +
 
 +
.row.uniform.\32 00\25 > * {
 +
padding: 2.5em 0 0 2.5em;
 +
}
 +
 
 +
.row.uniform.\32 00\25 {
 +
margin: -2.5em 0 -1px -2.5em;
 +
}
 +
 
 +
.row.\31 50\25 > * {
 +
padding: 0 0 0 1.875em;
 +
}
 +
 
 +
.row.\31 50\25 {
 +
margin: 0 0 -1px -1.875em;
 +
}
 +
 
 +
.row.uniform.\31 50\25 > * {
 +
padding: 1.875em 0 0 1.875em;
 +
}
 +
 
 +
.row.uniform.\31 50\25 {
 +
margin: -1.875em 0 -1px -1.875em;
 +
}
 +
 
 +
.row.\35 0\25 > * {
 +
padding: 0 0 0 0.625em;
 +
}
 +
 
 +
.row.\35 0\25 {
 +
margin: 0 0 -1px -0.625em;
 +
}
 +
 
 +
.row.uniform.\35 0\25 > * {
 +
padding: 0.625em 0 0 0.625em;
 +
}
 +
 
 +
.row.uniform.\35 0\25 {
 +
margin: -0.625em 0 -1px -0.625em;
 +
}
 +
 
 +
.row.\32 5\25 > * {
 +
padding: 0 0 0 0.3125em;
 +
}
 +
 
 +
.row.\32 5\25 {
 +
margin: 0 0 -1px -0.3125em;
 +
}
 +
 
 +
.row.uniform.\32 5\25 > * {
 +
padding: 0.3125em 0 0 0.3125em;
 +
}
 +
 
 +
.row.uniform.\32 5\25 {
 +
margin: -0.3125em 0 -1px -0.3125em;
 +
}
 +
 
 +
.\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%;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 360px) {
 +
 
 +
.row > * {
 +
padding: 0 0 0 1.25em;
 +
}
 +
 
 +
.row {
 +
margin: 0 0 -1px -1.25em;
 +
}
 +
 
 +
.row.uniform > * {
 +
padding: 1.25em 0 0 1.25em;
 +
}
 +
 
 +
.row.uniform {
 +
margin: -1.25em 0 -1px -1.25em;
 +
}
 +
 
 +
.row.\32 00\25 > * {
 +
padding: 0 0 0 2.5em;
 +
}
 +
 
 +
.row.\32 00\25 {
 +
margin: 0 0 -1px -2.5em;
 +
}
 +
 
 +
.row.uniform.\32 00\25 > * {
 +
padding: 2.5em 0 0 2.5em;
 +
}
 +
 
 +
.row.uniform.\32 00\25 {
 +
margin: -2.5em 0 -1px -2.5em;
 +
}
 +
 
 +
.row.\31 50\25 > * {
 +
padding: 0 0 0 1.875em;
 +
}
 +
 
 +
.row.\31 50\25 {
 +
margin: 0 0 -1px -1.875em;
 +
}
 +
 
 +
.row.uniform.\31 50\25 > * {
 +
padding: 1.875em 0 0 1.875em;
 +
}
 +
 
 +
.row.uniform.\31 50\25 {
 +
margin: -1.875em 0 -1px -1.875em;
 +
}
 +
 
 +
.row.\35 0\25 > * {
 +
padding: 0 0 0 0.625em;
 +
}
 +
 
 +
.row.\35 0\25 {
 +
margin: 0 0 -1px -0.625em;
 +
}
 +
 
 +
.row.uniform.\35 0\25 > * {
 +
padding: 0.625em 0 0 0.625em;
 +
}
 +
 
 +
.row.uniform.\35 0\25 {
 +
margin: -0.625em 0 -1px -0.625em;
 +
}
 +
 
 +
.row.\32 5\25 > * {
 +
padding: 0 0 0 0.3125em;
 +
}
 +
 
 +
.row.\32 5\25 {
 +
margin: 0 0 -1px -0.3125em;
 +
}
 +
 
 +
.row.uniform.\32 5\25 > * {
 +
padding: 0.3125em 0 0 0.3125em;
 +
}
 +
 
 +
.row.uniform.\32 5\25 {
 +
margin: -0.3125em 0 -1px -0.3125em;
 +
}
 +
 
 +
.\31 2u\28xxsmall\29, .\31 2u\24\28xxsmall\29 {
 +
width: 100%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 1u\28xxsmall\29, .\31 1u\24\28xxsmall\29 {
 +
width: 91.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 0u\28xxsmall\29, .\31 0u\24\28xxsmall\29 {
 +
width: 83.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\39 u\28xxsmall\29, .\39 u\24\28xxsmall\29 {
 +
width: 75%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\38 u\28xxsmall\29, .\38 u\24\28xxsmall\29 {
 +
width: 66.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\37 u\28xxsmall\29, .\37 u\24\28xxsmall\29 {
 +
width: 58.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\36 u\28xxsmall\29, .\36 u\24\28xxsmall\29 {
 +
width: 50%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\35 u\28xxsmall\29, .\35 u\24\28xxsmall\29 {
 +
width: 41.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\34 u\28xxsmall\29, .\34 u\24\28xxsmall\29 {
 +
width: 33.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\33 u\28xxsmall\29, .\33 u\24\28xxsmall\29 {
 +
width: 25%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\32 u\28xxsmall\29, .\32 u\24\28xxsmall\29 {
 +
width: 16.6666666667%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 u\28xxsmall\29, .\31 u\24\28xxsmall\29 {
 +
width: 8.3333333333%;
 +
clear: none;
 +
margin-left: 0;
 +
}
 +
 
 +
.\31 2u\24\28xxsmall\29 + *,
 +
.\31 1u\24\28xxsmall\29 + *,
 +
.\31 0u\24\28xxsmall\29 + *,
 +
.\39 u\24\28xxsmall\29 + *,
 +
.\38 u\24\28xxsmall\29 + *,
 +
.\37 u\24\28xxsmall\29 + *,
 +
.\36 u\24\28xxsmall\29 + *,
 +
.\35 u\24\28xxsmall\29 + *,
 +
.\34 u\24\28xxsmall\29 + *,
 +
.\33 u\24\28xxsmall\29 + *,
 +
.\32 u\24\28xxsmall\29 + *,
 +
.\31 u\24\28xxsmall\29 + * {
 +
clear: left;
 +
}
 +
 
 +
.\-11u\28xxsmall\29 {
 +
margin-left: 91.66667%;
 +
}
 +
 
 +
.\-10u\28xxsmall\29 {
 +
margin-left: 83.33333%;
 +
}
 +
 
 +
.\-9u\28xxsmall\29 {
 +
margin-left: 75%;
 +
}
 +
 
 +
.\-8u\28xxsmall\29 {
 +
margin-left: 66.66667%;
 +
}
 +
 
 +
.\-7u\28xxsmall\29 {
 +
margin-left: 58.33333%;
 +
}
 +
 
 +
.\-6u\28xxsmall\29 {
 +
margin-left: 50%;
 +
}
 +
 
 +
.\-5u\28xxsmall\29 {
 +
margin-left: 41.66667%;
 +
}
 +
 
 +
.\-4u\28xxsmall\29 {
 +
margin-left: 33.33333%;
 +
}
 +
 
 +
.\-3u\28xxsmall\29 {
 +
margin-left: 25%;
 +
}
 +
 
 +
.\-2u\28xxsmall\29 {
 +
margin-left: 16.66667%;
 +
}
 +
 
 +
.\-1u\28xxsmall\29 {
 +
margin-left: 8.33333%;
 +
}
 +
 
 +
}
 +
 
 +
/* Basic */
 +
 
 +
@-ms-viewport {
 +
width: device-width;
 +
}
 +
 
 +
body {
 +
-ms-overflow-style: scrollbar;
 +
}
 +
 
 +
@media screen and (max-width: 640px) {
 +
 
 +
html, body {
 +
min-width: 320px;
 +
}
 +
 
 +
}
 +
 
 +
body {
 +
background-color: #4221af;
 +
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
 +
background-size: auto, cover;
 +
background-attachment: fixed, fixed;
 +
background-position: center, center;
 +
}
 +
 
 +
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 */
 +
 
 +
body, input, select, textarea {
 +
color: #ffffff;
 +
font-family: "Source Sans Pro", Helvetica, sans-serif;
 +
font-size: 16.5pt;
 +
font-weight: 300;
 +
line-height: 1.65;
 +
}
 +
 
 +
@media screen and (max-width: 1680px) {
 +
 
 +
body, input, select, textarea {
 +
font-size: 13pt;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 1280px) {
 +
 
 +
body, input, select, textarea {
 +
font-size: 12pt;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 980px) {
 +
 
 +
body, input, select, textarea {
 +
font-size: 12pt;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
body, input, select, textarea {
 +
font-size: 12pt;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 640px) {
 +
 
 +
body, input, select, textarea {
 +
font-size: 12pt;
 +
}
 +
 
 +
}
 +
 
 +
a {
 +
-moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
 +
-webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
 +
-ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
 +
transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
 +
border-bottom: dotted 1px rgba(255, 255, 255, 0.35);
 +
color: #ffffff;
 +
text-decoration: none;
 +
}
 +
 
 +
a:hover {
 +
border-bottom-color: transparent;
 +
color: #ffffff !important;
 +
}
 +
 
 +
a.special:not(.button) {
 +
text-decoration: none;
 +
border-bottom: 0;
 +
display: block;
 +
font-family: Raleway, Helvetica, sans-serif;
 +
font-size: 0.8em;
 +
font-weight: 700;
 +
letter-spacing: 0.1em;
 +
margin: 0 0 2em 0;
 +
text-transform: uppercase;
 +
}
 +
 
 +
a.special:not(.button):before {
 +
-moz-osx-font-smoothing: grayscale;
 +
-webkit-font-smoothing: antialiased;
 +
font-family: FontAwesome;
 +
font-style: normal;
 +
font-weight: normal;
 +
text-transform: none !important;
 +
}
 +
 
 +
a.special:not(.button):before {
 +
-moz-transition: background-color 0.2s ease-in-out;
 +
-webkit-transition: background-color 0.2s ease-in-out;
 +
-ms-transition: background-color 0.2s ease-in-out;
 +
transition: background-color 0.2s ease-in-out;
 +
border-radius: 100%;
 +
border: solid 2px rgba(255, 255, 255, 0.125);
 +
content: '\f105';
 +
display: inline-block;
 +
font-size: 1.25em;
 +
height: 2em;
 +
line-height: 1.65em;
 +
margin-right: 0.85em;
 +
text-align: center;
 +
text-indent: 0.15em;
 +
vertical-align: middle;
 +
width: 2em;
 +
}
 +
 
 +
a.special:not(.button):hover:before {
 +
background-color: rgba(255, 255, 255, 0.025);
 +
}
 +
 
 +
a.special:not(.button):active:before {
 +
background-color: rgba(255, 255, 255, 0.075);
 +
}
 +
 
 +
strong, b {
 +
color: #ffffff;
 +
font-weight: 600;
 +
}
 +
 
 +
em, i {
 +
font-style: italic;
 +
}
 +
 
 +
p {
 +
margin: 0 0 2em 0;
 +
}
 +
 
 +
h1, h2, h3, h4, h5, h6 {
 +
color: #ffffff;
 +
font-family: Raleway, Helvetica, sans-serif;
 +
font-weight: 700;
 +
letter-spacing: 0.1em;
 +
margin: 0 0 1em 0;
 +
text-transform: uppercase;
 +
}
 +
 
 +
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 +
color: inherit;
 +
text-decoration: none;
 +
}
 +
 
 +
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
 +
font-weight: 200;
 +
}
 +
 
 +
h1.major, h2.major, h3.major, h4.major, h5.major, h6.major {
 +
padding-bottom: 1em;
 +
border-bottom: solid 2px rgba(255, 255, 255, 0.125);
 +
}
 +
 
 +
h2 {
 +
font-size: 1.2em;
 +
}
 +
 
 +
h3 {
 +
font-size: 0.9em;
 +
}
 +
 
 +
h4 {
 +
font-size: 0.7em;
 +
}
 +
 
 +
h5 {
 +
font-size: 0.7em;
 +
}
 +
 
 +
h6 {
 +
font-size: 0.7em;
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
h2 {
 +
font-size: 1em;
 +
}
 +
 
 +
h3 {
 +
font-size: 0.8em;
 +
}
 +
 
 +
}
 +
 
 +
sub {
 +
font-size: 0.8em;
 +
position: relative;
 +
top: 0.5em;
 +
}
 +
 
 +
sup {
 +
font-size: 0.8em;
 +
position: relative;
 +
top: -0.5em;
 +
}
 +
 
 +
blockquote {
 +
border-left: solid 4px rgba(255, 255, 255, 0.125);
 +
font-style: italic;
 +
margin: 0 0 2em 0;
 +
padding: 0.5em 0 0.5em 2em;
 +
}
 +
 
 +
code {
 +
background: rgba(255, 255, 255, 0.025);
 +
border-radius: 5px;
 +
border: solid 2px rgba(255, 255, 255, 0.125);
 +
font-family: "Courier New", monospace;
 +
font-size: 0.9em;
 +
margin: 0 0.25em;
 +
padding: 0.25em 0.65em;
 +
}
 +
 
 +
pre {
 +
-webkit-overflow-scrolling: touch;
 +
font-family: "Courier New", monospace;
 +
font-size: 0.9em;
 +
margin: 0 0 2em 0;
 +
}
 +
 
 +
pre code {
 +
display: block;
 +
line-height: 1.75em;
 +
padding: 1em 1.5em;
 +
overflow-x: auto;
 +
}
 +
 
 +
hr {
 +
border: 0;
 +
border-bottom: solid 2px rgba(255, 255, 255, 0.125);
 +
margin: 2.5em 0;
 +
}
 +
 
 +
hr.major {
 +
margin: 4em 0;
 +
}
 +
 
 +
.align-left {
 +
text-align: left;
 +
}
 +
 
 +
.align-center {
 +
text-align: center;
 +
}
 +
 
 +
.align-right {
 +
text-align: right;
 +
}
 +
 
 +
/* Section/Article */
 +
 
 +
section.special, article.special {
 +
text-align: center;
 +
}
 +
 
 +
/* Form */
 +
 
 +
form {
 +
margin: 0 0 2em 0;
 +
}
 +
 
 +
form .field {
 +
margin: 0 0 2em 0;
 +
}
 +
 
 +
form .field label {
 +
margin-top: -1.5em;
 +
}
 +
 
 +
form .field:first-child label {
 +
margin-top: 0;
 +
}
 +
 
 +
form > :last-child {
 +
margin-bottom: 0;
 +
}
 +
 
 +
label {
 +
color: #ffffff;
 +
display: block;
 +
font-family: Raleway, Helvetica, sans-serif;
 +
font-size: 0.8em;
 +
font-weight: 700;
 +
letter-spacing: 0.1em;
 +
margin: 0 0 0.7em 0;
 +
text-transform: uppercase;
 +
}
 +
 
 +
input[type="text"],
 +
input[type="password"],
 +
input[type="email"],
 +
input[type="tel"],
 +
select,
 +
textarea {
 +
-moz-appearance: none;
 +
-webkit-appearance: none;
 +
-ms-appearance: none;
 +
appearance: none;
 +
background: rgba(255, 255, 255, 0.025);
 +
border-radius: 5px;
 +
border: none;
 +
border: solid 2px rgba(255, 255, 255, 0.125);
 +
color: inherit;
 +
display: block;
 +
outline: 0;
 +
padding: 0 1em;
 +
text-decoration: none;
 +
width: 100%;
 +
}
 +
 
 +
input[type="text"]:invalid,
 +
input[type="password"]:invalid,
 +
input[type="email"]:invalid,
 +
input[type="tel"]:invalid,
 +
select:invalid,
 +
textarea:invalid {
 +
box-shadow: none;
 +
}
 +
 
 +
input[type="text"]:focus,
 +
input[type="password"]:focus,
 +
input[type="email"]:focus,
 +
input[type="tel"]:focus,
 +
select:focus,
 +
textarea:focus {
 +
border-color: #6a588e;
 +
}
 +
 
 +
.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 {
 +
color: rgba(255, 255, 255, 0.125);
 +
content: '\f078';
 +
display: block;
 +
height: 2.75em;
 +
line-height: 2.75em;
 +
pointer-events: none;
 +
position: absolute;
 +
right: 0;
 +
text-align: center;
 +
top: 0;
 +
width: 2.75em;
 +
}
 +
 
 +
.select-wrapper select::-ms-expand {
 +
display: none;
 +
}
 +
 
 +
select option {
 +
color: #ffffff;
 +
background: #4221af;
 +
}
 +
 
 +
input[type="text"],
 +
input[type="password"],
 +
input[type="email"],
 +
select {
 +
height: 2.75em;
 +
}
 +
 
 +
textarea {
 +
padding: 0.75em 1em;
 +
}
 +
 
 +
input[type="checkbox"],
 +
input[type="radio"] {
 +
-moz-appearance: none;
 +
-webkit-appearance: none;
 +
-ms-appearance: none;
 +
appearance: none;
 +
display: block;
 +
float: left;
 +
margin-right: -2em;
 +
opacity: 0;
 +
width: 1em;
 +
z-index: -1;
 +
}
 +
 
 +
input[type="checkbox"] + label,
 +
input[type="radio"] + label {
 +
text-decoration: none;
 +
color: #ffffff;
 +
cursor: pointer;
 +
display: inline-block;
 +
font-size: 1em;
 +
font-family: "Source Sans Pro", Helvetica, sans-serif;
 +
text-transform: none;
 +
letter-spacing: 0;
 +
font-weight: 300;
 +
padding-left: 2.4em;
 +
padding-right: 0.75em;
 +
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 {
 +
background: rgba(255, 255, 255, 0.025);
 +
border-radius: 5px;
 +
border: solid 2px rgba(255, 255, 255, 0.125);
 +
content: '';
 +
display: inline-block;
 +
height: 1.65em;
 +
left: 0;
 +
line-height: 1.58125em;
 +
position: absolute;
 +
text-align: center;
 +
top: 0;
 +
width: 1.65em;
 +
}
 +
 
 +
input[type="checkbox"]:checked + label:before,
 +
input[type="radio"]:checked + label:before {
 +
background: #ffffff;
 +
border-color: #ffffff;
 +
content: '\f00c';
 +
color: #4221af;
 +
}
 +
 
 +
input[type="checkbox"]:focus + label:before,
 +
input[type="radio"]:focus + label:before {
 +
border-color: #4c5c96;
 +
}
 +
 
 +
input[type="checkbox"] + label:before {
 +
border-radius: 5px;
 +
}
 +
 
 +
input[type="radio"] + label:before {
 +
border-radius: 100%;
 +
}
 +
 
 +
::-webkit-input-placeholder {
 +
color: rgba(255, 255, 255, 0.35) !important;
 +
opacity: 1.0;
 +
}
 +
 
 +
:-moz-placeholder {
 +
color: rgba(255, 255, 255, 0.35) !important;
 +
opacity: 1.0;
 +
}
 +
 
 +
::-moz-placeholder {
 +
color: rgba(255, 255, 255, 0.35) !important;
 +
opacity: 1.0;
 +
}
 +
 
 +
:-ms-input-placeholder {
 +
color: rgba(255, 255, 255, 0.35) !important;
 +
opacity: 1.0;
 +
}
 +
 
 +
.polyfill-placeholder {
 +
color: rgba(255, 255, 255, 0.35) !important;
 +
opacity: 1.0;
 +
}
 +
 
 +
/* Box */
 +
 
 +
.box {
 +
border-radius: 5px;
 +
border: solid 2px rgba(255, 255, 255, 0.125);
 +
margin-bottom: 2em;
 +
padding: 1.5em;
 +
}
 +
 
 +
.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;
 +
}
 +
 
 +
/* 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: 5px;
 +
border: 0;
 +
display: inline-block;
 +
position: relative;
 +
}
 +
 
 +
.image img {
 +
border-radius: 5px;
 +
display: block;
 +
}
 +
 
 +
.image.left, .image.right {
 +
max-width: 40%;
 +
}
 +
 
 +
.image.left img, .image.right img {
 +
width: 100%;
 +
}
 +
 
 +
.image.left {
 +
float: left;
 +
padding: 0 1.5em 1em 0;
 +
top: 0.25em;
 +
}
 +
 
 +
.image.right {
 +
float: right;
 +
padding: 0 0 1em 1.5em;
 +
top: 0.25em;
 +
}
 +
 
 +
.image.fit {
 +
display: block;
 +
margin: 0 0 2em 0;
 +
width: 100%;
 +
}
 +
 
 +
.image.fit img {
 +
width: 100%;
 +
}
 +
 
 +
.image.main {
 +
display: block;
 +
margin: 0 0 3em 0;
 +
width: 100%;
 +
}
 +
 
 +
.image.main img {
 +
width: 100%;
 +
}
 +
 
 +
/* List */
 +
 
 +
ol {
 +
list-style: decimal;
 +
margin: 0 0 2em 0;
 +
padding-left: 1.25em;
 +
}
 +
 
 +
ol li {
 +
padding-left: 0.25em;
 +
}
 +
 
 +
ul {
 +
list-style: disc;
 +
margin: 0 0 2em 0;
 +
padding-left: 1em;
 +
}
 +
 
 +
ul li {
 +
padding-left: 0.5em;
 +
}
 +
 
 +
ul.alt {
 +
list-style: none;
 +
padding-left: 0;
 +
}
 +
 
 +
ul.alt li {
 +
border-top: solid 1px rgba(255, 255, 255, 0.125);
 +
padding: 0.5em 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 1em 0 0;
 +
}
 +
 
 +
ul.icons li:last-child {
 +
padding-right: 0;
 +
}
 +
 
 +
ul.icons li .icon:before {
 +
font-size: 1.25em;
 +
}
 +
 
 +
ul.actions {
 +
cursor: default;
 +
list-style: none;
 +
padding-left: 0;
 +
}
 +
 
 +
ul.actions li {
 +
display: inline-block;
 +
padding: 0 1em 0 0;
 +
vertical-align: middle;
 +
}
 +
 
 +
ul.actions li:last-child {
 +
padding-right: 0;
 +
}
 +
 
 +
ul.actions.small li {
 +
padding: 0 0.5em 0 0;
 +
}
 +
 
 +
ul.actions.vertical li {
 +
display: block;
 +
padding: 1em 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.5em 0 0 0;
 +
}
 +
 
 +
ul.actions.vertical.small li:first-child {
 +
padding-top: 0;
 +
}
 +
 
 +
ul.actions.fit {
 +
display: table;
 +
margin-left: -1em;
 +
padding: 0;
 +
table-layout: fixed;
 +
width: calc(100% + 1em);
 +
}
 +
 
 +
ul.actions.fit li {
 +
display: table-cell;
 +
padding: 0 0 0 1em;
 +
}
 +
 
 +
ul.actions.fit li > * {
 +
margin-bottom: 0;
 +
}
 +
 
 +
ul.actions.fit.small {
 +
margin-left: -0.5em;
 +
width: calc(100% + 0.5em);
 +
}
 +
 
 +
ul.actions.fit.small li {
 +
padding: 0 0 0 0.5em;
 +
}
 +
 
 +
@media screen and (max-width: 640px) {
 +
 
 +
ul.actions {
 +
margin: 0 0 2em 0;
 +
}
 +
 
 +
ul.actions li {
 +
padding: 1em 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.small li {
 +
padding: 0.5em 0 0 0;
 +
}
 +
 
 +
ul.actions.small li:first-child {
 +
padding-top: 0;
 +
}
 +
 
 +
}
 +
 
 +
ul.contact {
 +
list-style: none;
 +
padding: 0;
 +
}
 +
 
 +
ul.contact li {
 +
text-decoration: none;
 +
margin: 2.5em 0 0 0;
 +
padding: 0 0 0 3.25em;
 +
position: relative;
 +
}
 +
 
 +
ul.contact li:before {
 +
-moz-osx-font-smoothing: grayscale;
 +
-webkit-font-smoothing: antialiased;
 +
font-family: FontAwesome;
 +
font-style: normal;
 +
font-weight: normal;
 +
text-transform: none !important;
 +
}
 +
 
 +
ul.contact li:before {
 +
border-radius: 100%;
 +
border: solid 2px rgba(255, 255, 255, 0.125);
 +
display: inline-block;
 +
font-size: 0.8em;
 +
height: 2.5em;
 +
left: 0;
 +
line-height: 2.35em;
 +
position: absolute;
 +
text-align: center;
 +
top: 0;
 +
width: 2.5em;
 +
}
 +
 
 +
ul.contact li:first-child {
 +
margin-top: 0;
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
ul.contact li {
 +
margin: 1.5em 0 0 0;
 +
}
 +
 
 +
}
 +
 
 +
ul.pagination {
 +
cursor: default;
 +
list-style: none;
 +
padding-left: 0;
 +
}
 +
 
 +
ul.pagination li {
 +
display: inline-block;
 +
padding-left: 0;
 +
vertical-align: middle;
 +
}
 +
 
 +
ul.pagination li > .page {
 +
-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-bottom: 0;
 +
border-radius: 5px;
 +
display: inline-block;
 +
height: 1.5em;
 +
line-height: 1.5em;
 +
margin: 0 0.125em;
 +
min-width: 1.5em;
 +
padding: 0 0.5em;
 +
text-align: center;
 +
}
 +
 
 +
ul.pagination li > .page:hover {
 +
background-color: rgba(255, 255, 255, 0.025);
 +
}
 +
 
 +
ul.pagination li > .page.active {
 +
background-color: #4c5c96;
 +
}
 +
 
 +
ul.pagination li:first-child {
 +
padding-right: 0.75em;
 +
}
 +
 
 +
ul.pagination li:last-child {
 +
padding-left: 0.75em;
 +
}
 +
 
 +
@media screen and (max-width: 640px) {
 +
 
 +
ul.pagination li:nth-child(n+2):nth-last-child(n+2) {
 +
display: none;
 +
}
 +
 
 +
ul.pagination li .button {
 +
width: 100%;
 +
}
 +
 
 +
ul.pagination li:first-child {
 +
width: calc(50% - 2px);
 +
text-align: left;
 +
padding-right: 0.325em;
 +
}
 +
 
 +
ul.pagination li:last-child {
 +
width: calc(50% - 2px);
 +
text-align: right;
 +
padding-left: 0.325em;
 +
}
 +
 
 +
}
 +
 
 +
dl {
 +
margin: 0 0 2em 0;
 +
}
 +
 
 +
dl dt {
 +
display: block;
 +
font-weight: 600;
 +
margin: 0 0 1em 0;
 +
}
 +
 
 +
dl dd {
 +
margin-left: 2em;
 +
}
 +
 
 +
/* Table */
 +
 
 +
.table-wrapper {
 +
-webkit-overflow-scrolling: touch;
 +
overflow-x: auto;
 +
}
 +
 
 +
table {
 +
margin: 0 0 2em 0;
 +
width: 100%;
 +
}
 +
 
 +
table tbody tr {
 +
border: solid 1px rgba(255, 255, 255, 0.125);
 +
border-left: 0;
 +
border-right: 0;
 +
}
 +
 
 +
table tbody tr:nth-child(2n + 1) {
 +
background-color: rgba(255, 255, 255, 0.025);
 +
}
 +
 
 +
table td {
 +
padding: 0.75em 0.75em;
 +
}
 +
 
 +
table th {
 +
color: #ffffff;
 +
font-size: 0.9em;
 +
font-weight: 600;
 +
padding: 0 0.75em 0.75em 0.75em;
 +
text-align: left;
 +
}
 +
 
 +
table thead {
 +
border-bottom: solid 2px rgba(255, 255, 255, 0.125);
 +
}
 +
 
 +
table tfoot {
 +
border-top: solid 2px rgba(255, 255, 255, 0.125);
 +
}
 +
 
 +
table.alt {
 +
border-collapse: separate;
 +
}
 +
 
 +
table.alt tbody tr td {
 +
border: solid 1px rgba(255, 255, 255, 0.125);
 +
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;
 +
}
 +
 
 +
/* 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;
 +
-webkit-transition: background-color 0.2s ease-in-out;
 +
-ms-transition: background-color 0.2s ease-in-out;
 +
transition: background-color 0.2s ease-in-out;
 +
background-color: transparent;
 +
border-radius: 5px;
 +
border: 0;
 +
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.125);
 +
color: #ffffff !important;
 +
cursor: pointer;
 +
display: inline-block;
 +
font-family: Raleway, Helvetica, sans-serif;
 +
font-size: 0.8em;
 +
font-weight: 700;
 +
height: 3.75em;
 +
letter-spacing: 0.1em;
 +
line-height: 3.75em;
 +
padding: 0 2.25em;
 +
text-align: center;
 +
text-decoration: none;
 +
text-transform: uppercase;
 +
white-space: nowrap;
 +
}
 +
 
 +
input[type="submit"]:hover,
 +
input[type="reset"]:hover,
 +
input[type="button"]:hover,
 +
button:hover,
 +
.button:hover {
 +
background-color: rgba(255, 255, 255, 0.025);
 +
}
 +
 
 +
input[type="submit"]:active,
 +
input[type="reset"]:active,
 +
input[type="button"]:active,
 +
button:active,
 +
.button:active {
 +
background-color: rgba(255, 255, 255, 0.075);
 +
}
 +
 
 +
input[type="submit"].icon:before,
 +
input[type="reset"].icon:before,
 +
input[type="button"].icon:before,
 +
button.icon:before,
 +
.button.icon:before {
 +
margin-right: 0.5em;
 +
color: rgba(255, 255, 255, 0.35);
 +
}
 +
 
 +
input[type="submit"].special,
 +
input[type="reset"].special,
 +
input[type="button"].special,
 +
button.special,
 +
.button.special {
 +
background-color: #4c5c96;
 +
box-shadow: none;
 +
}
 +
 
 +
input[type="submit"].special:hover,
 +
input[type="reset"].special:hover,
 +
input[type="button"].special:hover,
 +
button.special:hover,
 +
.button.special:hover {
 +
background-color: #6a588e;
 +
}
 +
 
 +
input[type="submit"].special:active,
 +
input[type="reset"].special:active,
 +
input[type="button"].special:active,
 +
button.special:active,
 +
.button.special:active {
 +
background-color: #45558d;
 +
}
 +
 
 +
input[type="submit"].special.icon:before,
 +
input[type="reset"].special.icon:before,
 +
input[type="button"].special.icon:before,
 +
button.special.icon:before,
 +
.button.special.icon:before {
 +
color: #7985b0;
 +
}
 +
 
 +
input[type="submit"].fit,
 +
input[type="reset"].fit,
 +
input[type="button"].fit,
 +
button.fit,
 +
.button.fit {
 +
display: block;
 +
margin: 0 0 1em 0;
 +
width: 100%;
 +
}
 +
 
 +
input[type="submit"].small,
 +
input[type="reset"].small,
 +
input[type="button"].small,
 +
button.small,
 +
.button.small {
 +
font-size: 0.6em;
 +
}
 +
 
 +
input[type="submit"].big,
 +
input[type="reset"].big,
 +
input[type="button"].big,
 +
button.big,
 +
.button.big {
 +
font-size: 1em;
 +
}
 +
 
 +
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 {
 +
opacity: 0.25;
 +
}
 +
 
 +
@media screen and (max-width: 640px) {
 +
 
 +
input[type="submit"],
 +
input[type="reset"],
 +
input[type="button"],
 +
button,
 +
.button {
 +
padding: 0;
 +
}
 +
 
 +
}
 +
 
 +
/* Features */
 +
 
 +
.features {
 +
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;
 +
margin: 0 0 2em 0;
 +
}
 +
 
 +
.features article {
 +
padding: 1.75em 1.75em 0.1em 1.75em ;
 +
background-color: #353849;
 +
border-radius: 5px;
 +
margin: 1.5em 3em 1.5em 0;
 +
width: calc(50% - 1.5em);
 +
}
 +
 
 +
.features article:nth-child(2n) {
 +
margin-right: 0;
 +
}
 +
 
 +
.features article .image {
 +
border-radius: 5px 5px 0 0;
 +
display: block;
 +
margin-bottom: 1.75em;
 +
margin-left: -1.75em;
 +
margin-top: -1.75em;
 +
position: relative;
 +
width: calc(100% + 3.5em);
 +
}
 +
 
 +
.features article .image img {
 +
border-radius: 5px 5px 0 0;
 +
width: 100%;
 +
}
 +
 
 +
@media screen and (max-width: 980px) {
 +
 
 +
.features article {
 +
margin: 1em 2em 1em 0;
 +
width: calc(50% - 1em);
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
.features article {
 +
padding: 1.5em 1.5em 0.1em 1.5em ;
 +
margin: 0.875em 1.75em 0.875em 0;
 +
width: calc(50% - 0.875em - 1px);
 +
}
 +
 
 +
.features article .image {
 +
margin-bottom: 1.5em;
 +
margin-left: -1.5em;
 +
margin-top: -1.5em;
 +
width: calc(100% + 3em);
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 640px) {
 +
 
 +
.features {
 +
display: block;
 +
}
 +
 
 +
.features article {
 +
width: 100%;
 +
margin: 0 0 2em 0 !important;
 +
}
 +
 
 +
}
 +
 
 +
/* Header */
 +
 
 +
#header {
 +
-moz-transition: background-color 0.2s ease-in-out;
 +
-webkit-transition: background-color 0.2s ease-in-out;
 +
-ms-transition: background-color 0.2s ease-in-out;
 +
transition: background-color 0.2s ease-in-out;
 +
background-color: rgba(53, 56, 73, 0.95);
 +
height: 3.5em;
 +
left: 0;
 +
line-height: 3.5em;
 +
padding: 0 1.25em;
 +
position: fixed;
 +
top: 0;
 +
width: 100%;
 +
z-index: 10000;
 +
}
 +
 
 +
#header h1 {
 +
-moz-transition: opacity 0.2s ease-in-out, visibility 0.2s;
 +
-webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s;
 +
-ms-transition: opacity 0.2s ease-in-out, visibility 0.2s;
 +
transition: opacity 0.2s ease-in-out, visibility 0.2s;
 +
border-bottom: 0;
 +
font-size: 0.8em;
 +
margin-bottom: 0;
 +
opacity: 1;
 +
visibility: visible;
 +
}
 +
 
 +
#header h1 a {
 +
border: 0;
 +
}
 +
 
 +
#header nav {
 +
font-family: Raleway, Helvetica, sans-serif;
 +
font-size: 0.8em;
 +
font-weight: 700;
 +
height: 3em;
 +
letter-spacing: 0.1em;
 +
line-height: 3em;
 +
position: absolute;
 +
right: 0.7em;
 +
text-transform: uppercase;
 +
top: 0.7em;
 +
}
 +
 
 +
#header nav a {
 +
border: 0;
 +
display: inline-block;
 +
padding: 0 1em;
 +
}
 +
 
 +
#header nav a:before {
 +
float: right;
 +
margin-left: 0.75em;
 +
}
 +
 
 +
#header nav a[href="#menu"] {
 +
text-decoration: none;
 +
-moz-transition: background-color 0.2s ease-in-out;
 +
-webkit-transition: background-color 0.2s ease-in-out;
 +
-ms-transition: background-color 0.2s ease-in-out;
 +
transition: background-color 0.2s ease-in-out;
 +
border-radius: 5px;
 +
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.125);
 +
padding: 0 1.35em;
 +
}
 +
 
 +
#header nav a[href="#menu"]:before {
 +
-moz-osx-font-smoothing: grayscale;
 +
-webkit-font-smoothing: antialiased;
 +
font-family: FontAwesome;
 +
font-style: normal;
 +
font-weight: normal;
 +
text-transform: none !important;
 +
}
 +
 
 +
#header nav a[href="#menu"]:before {
 +
content: '\f0c9';
 +
}
 +
 
 +
#header nav a[href="#menu"]:hover {
 +
background-color: rgba(255, 255, 255, 0.025);
 +
}
 +
 
 +
#header nav a[href="#menu"]:active {
 +
background-color: rgba(255, 255, 255, 0.075);
 +
}
 +
 
 +
#header.alt {
 +
background-color: transparent;
 +
}
 +
 
 +
#header.alt h1 {
 +
opacity: 0;
 +
visibility: hidden;
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
#header {
 +
height: 2.75em;
 +
line-height: 2.75em;
 +
}
 +
 
 +
#header nav {
 +
top: 0;
 +
right: 0;
 +
height: inherit;
 +
line-height: inherit;
 +
}
 +
 
 +
#header nav a {
 +
height: inherit;
 +
line-height: inherit;
 +
}
 +
 
 +
#header nav a[href="#menu"] {
 +
box-shadow: none;
 +
padding: 0 1em;
 +
border-radius: 0;
 +
}
 +
 
 +
#header nav a[href="#menu"]:hover, #header nav a[href="#menu"]:active {
 +
background-color: inherit;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 640px) {
 +
 
 +
#header nav a[href="#menu"] {
 +
width: 4em;
 +
white-space: nowrap;
 +
text-indent: 4em;
 +
position: relative;
 +
}
 +
 
 +
#header nav a[href="#menu"]:before {
 +
width: inherit;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
text-indent: 0;
 +
text-align: right;
 +
margin-left: 0;
 +
padding-right: 1.25em;
 +
}
 +
 
 +
}
 +
 
 +
/* Menu */
 +
 
 +
#page-wrapper {
 +
-moz-transition: -moz-filter 0.25s ease;
 +
-webkit-transition: -webkit-filter 0.25s ease;
 +
-ms-transition: -ms-filter 0.25s ease;
 +
transition: filter 0.25s ease;
 +
}
 +
 
 +
#menu {
 +
-moz-align-items: center;
 +
-webkit-align-items: center;
 +
-ms-align-items: center;
 +
align-items: center;
 +
display: -moz-flex;
 +
display: -webkit-flex;
 +
display: -ms-flex;
 +
display: flex;
 +
-moz-justify-content: center;
 +
-webkit-justify-content: center;
 +
-ms-justify-content: center;
 +
justify-content: center;
 +
-moz-pointer-events: none;
 +
-webkit-pointer-events: none;
 +
-ms-pointer-events: none;
 +
pointer-events: none;
 +
-moz-transition: opacity 0.35s ease, visibility 0.35s;
 +
-webkit-transition: opacity 0.35s ease, visibility 0.35s;
 +
-ms-transition: opacity 0.35s ease, visibility 0.35s;
 +
transition: opacity 0.35s ease, visibility 0.35s;
 +
-moz-user-select: none;
 +
-webkit-user-select: none;
 +
-ms-user-select: none;
 +
user-select: none;
 +
-webkit-tap-highlight-color: transparent;
 +
background: rgba(46, 49, 65, 0.8);
 +
cursor: default;
 +
height: 100%;
 +
left: 0;
 +
opacity: 0;
 +
position: fixed;
 +
text-align: center;
 +
top: 0;
 +
visibility: hidden;
 +
width: 100%;
 +
}
 +
 
 +
#menu .inner {
 +
padding: 2.5em 1.5em 0.5em 1.5em ;
 +
-moz-transform: translateY(0.5em);
 +
-webkit-transform: translateY(0.5em);
 +
-ms-transform: translateY(0.5em);
 +
transform: translateY(0.5em);
 +
-moz-transition: opacity 0.35s ease, -moz-transform 0.35s ease;
 +
-webkit-transition: opacity 0.35s ease, -webkit-transform 0.35s ease;
 +
-ms-transition: opacity 0.35s ease, -ms-transform 0.35s ease;
 +
transition: opacity 0.35s ease, transform 0.35s ease;
 +
-webkit-overflow-scrolling: touch;
 +
background: #4c5c96;
 +
border-radius: 5px;
 +
display: block;
 +
max-width: 100%;
 +
opacity: 0;
 +
position: relative;
 +
width: 18em;
 +
}
 +
 
 +
#menu h2 {
 +
border-bottom: solid 2px rgba(255, 255, 255, 0.125);
 +
padding-bottom: 1em;
 +
}
 +
 
 +
#menu .close {
 +
background-image: url("images/close.svg");
 +
background-position: 75% 25%;
 +
background-repeat: no-repeat;
 +
background-size: 2em 2em;
 +
border: 0;
 +
content: '';
 +
display: block;
 +
height: 4em;
 +
overflow: hidden;
 +
position: absolute;
 +
right: 0;
 +
text-align: center;
 +
text-indent: 4em;
 +
top: 0;
 +
width: 4em;
 +
}
 +
 
 +
#menu .links {
 +
list-style: none;
 +
margin-bottom: 1.5em;
 +
padding: 0;
 +
}
 +
 
 +
#menu .links li {
 +
padding: 0;
 +
}
 +
 
 +
#menu .links li a {
 +
border-radius: 5px;
 +
border: 0;
 +
display: block;
 +
font-family: Raleway, Helvetica, sans-serif;
 +
font-size: 0.8em;
 +
font-weight: 200;
 +
letter-spacing: 0.1em;
 +
line-height: 1.85em;
 +
padding: 0.75em 0;
 +
text-transform: uppercase;
 +
}
 +
 
 +
#menu .links li a:hover {
 +
background: #45558d;
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
#menu .inner {
 +
max-height: 100%;
 +
overflow-y: auto;
 +
overflow-x: hidden;
 +
}
 +
 
 +
#menu .inner .close {
 +
background-size: 1.5em 1.5em;
 +
}
 +
 
 +
}
 +
 
 +
body.is-menu-visible #page-wrapper {
 +
-moz-filter: blur(1.5px);
 +
-webkit-filter: blur(1.5px);
 +
-ms-filter: blur(1.5px);
 +
filter: blur(1.5px);
 +
}
 +
 
 +
body.is-menu-visible #menu {
 +
-moz-pointer-events: auto;
 +
-webkit-pointer-events: auto;
 +
-ms-pointer-events: auto;
 +
pointer-events: auto;
 +
opacity: 1;
 +
visibility: visible;
 +
}
 +
 
 +
body.is-menu-visible #menu .inner {
 +
-moz-transform: translateY(0);
 +
-webkit-transform: translateY(0);
 +
-ms-transform: translateY(0);
 +
transform: translateY(0);
 +
opacity: 1;
 +
}
 +
 
 +
/* Banner */
 +
 
 +
#banner {
 +
padding: 10em 0 4.75em 0 ;
 +
}
 +
 
 +
#banner .inner {
 +
margin: 0 auto;
 +
width: 55em;
 +
}
 +
 
 +
#banner .logo {
 +
-moz-transition: opacity 2s ease, -moz-transform 1s ease;
 +
-webkit-transition: opacity 2s ease, -webkit-transform 1s ease;
 +
-ms-transition: opacity 2s ease, -ms-transform 1s ease;
 +
transition: opacity 2s ease, transform 1s ease;
 +
-moz-transform: translateY(0);
 +
-webkit-transform: translateY(0);
 +
-ms-transform: translateY(0);
 +
transform: translateY(0);
 +
opacity: 1;
 +
margin: 0 0 1.3em 0;
 +
}
 +
 
 +
#banner .logo .icon {
 +
border-radius: 100%;
 +
border: solid 2px rgba(255, 255, 255, 0.125);
 +
cursor: default;
 +
display: inline-block;
 +
font-size: 2em;
 +
height: 2.25em;
 +
line-height: 2.25em;
 +
text-align: center;
 +
width: 2.25em;
 +
}
 +
 
 +
#banner h2 {
 +
-moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease, -moz-filter 0.25s ease;
 +
-webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease, -webkit-filter 0.25s ease;
 +
-ms-transition: opacity 0.5s ease, -ms-transform 0.5s ease, -ms-filter 0.25s ease;
 +
transition: opacity 0.5s ease, transform 0.5s ease, filter 0.25s ease;
 +
-moz-transform: translateX(0);
 +
-webkit-transform: translateX(0);
 +
-ms-transform: translateX(0);
 +
transform: translateX(0);
 +
-moz-transition-delay: 0.65s;
 +
-webkit-transition-delay: 0.65s;
 +
-ms-transition-delay: 0.65s;
 +
transition-delay: 0.65s;
 +
-moz-filter: blur(0);
 +
-webkit-filter: blur(0);
 +
-ms-filter: blur(0);
 +
filter: blur(0);
 +
opacity: 1;
 +
border-bottom: solid 2px rgba(255, 255, 255, 0.125);
 +
font-size: 2.25em;
 +
margin-bottom: 0.8em;
 +
padding-bottom: 0.4em;
 +
}
 +
 
 +
#banner p {
 +
-moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease, -moz-filter 0.25s ease;
 +
-webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease, -webkit-filter 0.25s ease;
 +
-ms-transition: opacity 0.5s ease, -ms-transform 0.5s ease, -ms-filter 0.25s ease;
 +
transition: opacity 0.5s ease, transform 0.5s ease, filter 0.25s ease;
 +
-moz-transform: translateX(0);
 +
-webkit-transform: translateX(0);
 +
-ms-transform: translateX(0);
 +
transform: translateX(0);
 +
-moz-transition-delay: 0.8s;
 +
-webkit-transition-delay: 0.8s;
 +
-ms-transition-delay: 0.8s;
 +
transition-delay: 0.8s;
 +
-moz-filter: blur(0);
 +
-webkit-filter: blur(0);
 +
-ms-filter: blur(0);
 +
filter: blur(0);
 +
opacity: 1;
 +
font-family: Raleway, Helvetica, sans-serif;
 +
font-size: 1em;
 +
font-weight: 200;
 +
letter-spacing: 0.1em;
 +
line-height: 2;
 +
text-transform: uppercase;
 +
}
 +
 
 +
@media screen and (max-width: 1280px) {
 +
 
 +
#banner {
 +
padding: 7em 0 8.25em 0 ;
 +
background-color: #4221af;
 +
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
 +
background-size: auto, cover;
 +
background-position: center, center;
 +
margin-bottom: -6.5em;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 980px) {
 +
 
 +
#banner {
 +
padding: 12em 3em 12.375em 3em ;
 +
margin-bottom: -4.75em;
 +
}
 +
 
 +
#banner .inner {
 +
width: 100%;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
#banner {
 +
padding: 5em 2em 4.25em 2em ;
 +
margin-bottom: -2.5em;
 +
}
 +
 
 +
#banner .logo {
 +
margin: 0 0 1em 0;
 +
}
 +
 
 +
#banner .logo .icon {
 +
font-size: 1.5em;
 +
}
 +
 
 +
#banner h2 {
 +
font-size: 1.5em;
 +
}
 +
 
 +
#banner p {
 +
font-size: 0.8em;
 +
}
 +
 
 +
}
 +
 
 +
body.is-loading #banner .logo {
 +
-moz-transform: translateY(0.5em);
 +
-webkit-transform: translateY(0.5em);
 +
-ms-transform: translateY(0.5em);
 +
transform: translateY(0.5em);
 +
opacity: 0;
 +
}
 +
 
 +
body.is-loading #banner h2 {
 +
opacity: 0;
 +
-moz-transform: translateX(0.25em);
 +
-webkit-transform: translateX(0.25em);
 +
-ms-transform: translateX(0.25em);
 +
transform: translateX(0.25em);
 +
-moz-filter: blur(2px);
 +
-webkit-filter: blur(2px);
 +
-ms-filter: blur(2px);
 +
filter: blur(2px);
 +
}
 +
 
 +
body.is-loading #banner p {
 +
opacity: 0;
 +
-moz-transform: translateX(0.5em);
 +
-webkit-transform: translateX(0.5em);
 +
-ms-transform: translateX(0.5em);
 +
transform: translateX(0.5em);
 +
-moz-filter: blur(2px);
 +
-webkit-filter: blur(2px);
 +
-ms-filter: blur(2px);
 +
filter: blur(2px);
 +
}
 +
 
 +
/* Wrapper */
 +
 
 +
#wrapper > header {
 +
padding: 11em 0 2.25em 0 ;
 +
}
 +
 
 +
#wrapper > header .inner {
 +
margin: 0 auto;
 +
width: 55em;
 +
}
 +
 
 +
#wrapper > header h2 {
 +
border-bottom: solid 2px rgba(255, 255, 255, 0.125);
 +
font-size: 2em;
 +
margin-bottom: 0.8em;
 +
padding-bottom: 0.4em;
 +
}
 +
 
 +
#wrapper > header p {
 +
font-family: Raleway, Helvetica, sans-serif;
 +
font-size: 1em;
 +
font-weight: 200;
 +
letter-spacing: 0.1em;
 +
line-height: 2;
 +
text-transform: uppercase;
 +
}
 +
 
 +
@media screen and (max-width: 1280px) {
 +
 
 +
#wrapper > header {
 +
padding: 9em 0 6.25em 0 ;
 +
background-color: #4221af;
 +
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
 +
background-size: auto, cover;
 +
background-position: center, 0% 30%;
 +
margin-bottom: -6.5em;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 980px) {
 +
 
 +
#wrapper > header {
 +
padding: 11em 3em 7.375em 3em ;
 +
background-size: auto, cover;
 +
background-position: center, 0% 0%;
 +
margin-bottom: -4.75em;
 +
}
 +
 
 +
#wrapper > header .inner {
 +
width: 100%;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
#wrapper > header {
 +
padding: 6.5em 2em 3em 2em ;
 +
background-size: auto, 125%;
 +
margin-bottom: -2.5em;
 +
}
 +
 
 +
#wrapper > header h2 {
 +
font-size: 1.25em;
 +
}
 +
 
 +
#wrapper > header p {
 +
font-size: 0.8em;
 +
}
 +
 
 +
}
 +
 
 +
.wrapper {
 +
background-color: #4221af;
 +
margin: 6.5em 0;
 +
position: relative;
 +
}
 +
 
 +
.wrapper:before, .wrapper:after {
 +
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%232e3141%3B' /%3E%3C/svg%3E");
 +
}
 +
 
 +
.wrapper:before {
 +
box-shadow: inset 0 -1px 0 0 #4221af, 0 1px 0 0 #4221af;
 +
}
 +
 
 +
.wrapper:after {
 +
box-shadow: inset 0 -1px 0 0 #4221af, 0 1px 0 0 #4221af;
 +
}
 +
 
 +
.wrapper:before, .wrapper:after {
 +
background-repeat: no-repeat;
 +
background-size: 100% 100%;
 +
content: '';
 +
display: block;
 +
height: 6.5em;
 +
position: absolute;
 +
width: 100%;
 +
}
 +
 
 +
.wrapper:before {
 +
left: 0;
 +
top: -6.5em;
 +
}
 +
 
 +
.wrapper:after {
 +
-moz-transform: scaleY(-1);
 +
-webkit-transform: scaleY(-1);
 +
-ms-transform: scaleY(-1);
 +
transform: scaleY(-1);
 +
bottom: -6.5em;
 +
left: 0;
 +
}
 +
 
 +
.wrapper.alt:before {
 +
-moz-transform: scaleX(-1);
 +
-webkit-transform: scaleX(-1);
 +
-ms-transform: scaleX(-1);
 +
transform: scaleX(-1);
 +
}
 +
 
 +
.wrapper.alt:after {
 +
-moz-transform: scaleY(-1) scaleX(-1);
 +
-webkit-transform: scaleY(-1) scaleX(-1);
 +
-ms-transform: scaleY(-1) scaleX(-1);
 +
transform: scaleY(-1) scaleX(-1);
 +
}
 +
 
 +
.wrapper .inner {
 +
padding: 3em 0 1em 0 ;
 +
margin: 0 auto;
 +
width: 55em;
 +
}
 +
 
 +
.wrapper.style2 {
 +
background-color: #353849;
 +
}
 +
 
 +
.wrapper.style2:before, .wrapper.style2:after {
 +
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23353849%3B' /%3E%3C/svg%3E");
 +
}
 +
 
 +
.wrapper.style2:before {
 +
box-shadow: inset 0 -1px 0 0 #353849, 0 1px 0 0 #353849;
 +
}
 +
 
 +
.wrapper.style2:after {
 +
box-shadow: inset 0 -1px 0 0 #353849, 0 1px 0 0 #353849;
 +
}
 +
 
 +
.wrapper.style3 {
 +
background-color: #3d4051;
 +
}
 +
 
 +
.wrapper.style3:before, .wrapper.style3:after {
 +
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%233d4051%3B' /%3E%3C/svg%3E");
 +
}
 +
 
 +
.wrapper.style3:before {
 +
box-shadow: inset 0 -1px 0 0 #3d4051, 0 1px 0 0 #3d4051;
 +
}
 +
 
 +
.wrapper.style3:after {
 +
box-shadow: inset 0 -1px 0 0 #3d4051, 0 1px 0 0 #3d4051;
 +
}
 +
 
 +
.wrapper.style4 {
 +
background-color: #454858;
 +
}
 +
 
 +
.wrapper.style4:before, .wrapper.style4:after {
 +
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23454858%3B' /%3E%3C/svg%3E");
 +
}
 +
 
 +
.wrapper.style4:before {
 +
box-shadow: inset 0 -1px 0 0 #454858, 0 1px 0 0 #454858;
 +
}
 +
 
 +
.wrapper.style4:after {
 +
box-shadow: inset 0 -1px 0 0 #454858, 0 1px 0 0 #454858;
 +
}
 +
 
 +
.wrapper.style5 {
 +
background-color: #4d5060;
 +
}
 +
 
 +
.wrapper.style5:before, .wrapper.style5:after {
 +
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%234d5060%3B' /%3E%3C/svg%3E");
 +
}
 +
 
 +
.wrapper.style5:before {
 +
box-shadow: inset 0 -1px 0 0 #4d5060, 0 1px 0 0 #4d5060;
 +
}
 +
 
 +
.wrapper.style5:after {
 +
box-shadow: inset 0 -1px 0 0 #4d5060, 0 1px 0 0 #4d5060;
 +
}
 +
 
 +
.wrapper.style6 {
 +
background-color: #555867;
 +
}
 +
 
 +
.wrapper.style6:before, .wrapper.style6:after {
 +
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23555867%3B' /%3E%3C/svg%3E");
 +
}
 +
 
 +
.wrapper.style6:before {
 +
box-shadow: inset 0 -1px 0 0 #555867, 0 1px 0 0 #555867;
 +
}
 +
 
 +
.wrapper.style6:after {
 +
box-shadow: inset 0 -1px 0 0 #555867, 0 1px 0 0 #555867;
 +
}
 +
 
 +
.wrapper.spotlight {
 +
background-color: #4c5c96;
 +
}
 +
 
 +
.wrapper.spotlight:before, .wrapper.spotlight:after {
 +
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%234c5c96%3B' /%3E%3C/svg%3E");
 +
}
 +
 
 +
.wrapper.spotlight:before {
 +
box-shadow: inset 0 -1px 0 0 #4c5c96, 0 1px 0 0 #4c5c96;
 +
}
 +
 
 +
.wrapper.spotlight:after {
 +
box-shadow: inset 0 -1px 0 0 #4c5c96, 0 1px 0 0 #4c5c96;
 +
}
 +
 
 +
.wrapper.spotlight .inner {
 +
display: -moz-flex;
 +
display: -webkit-flex;
 +
display: -ms-flex;
 +
display: flex;
 +
-moz-align-items: center;
 +
-webkit-align-items: center;
 +
-ms-align-items: center;
 +
align-items: center;
 +
-moz-flex-direction: row;
 +
-webkit-flex-direction: row;
 +
-ms-flex-direction: row;
 +
flex-direction: row;
 +
}
 +
 
 +
.wrapper.spotlight .image {
 +
border-radius: 100%;
 +
margin: 0 3em 2em 0;
 +
width: 22em;
 +
overflow: hidden;
 +
-ms-flex: 1;
 +
}
 +
 
 +
.wrapper.spotlight .image img {
 +
border-radius: 100%;
 +
width: 100%;
 +
}
 +
 
 +
.wrapper.spotlight .content {
 +
width: 100%;
 +
-ms-flex: 2;
 +
}
 +
 
 +
.wrapper.spotlight:nth-child(2n - 1) .inner {
 +
-moz-flex-direction: row-reverse;
 +
-webkit-flex-direction: row-reverse;
 +
-ms-flex-direction: row-reverse;
 +
flex-direction: row-reverse;
 +
text-align: right;
 +
}
 +
 
 +
.wrapper.spotlight:nth-child(2n - 1) .image {
 +
margin: 0 0 2em 3em;
 +
}
 +
 
 +
.wrapper.spotlight.style2 {
 +
background-color: #45558d;
 +
}
 +
 
 +
.wrapper.spotlight.style2:before, .wrapper.spotlight.style2:after {
 +
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2345558d%3B' /%3E%3C/svg%3E");
 +
}
 +
 
 +
.wrapper.spotlight.style2:before {
 +
box-shadow: inset 0 -1px 0 0 #45558d, 0 1px 0 0 #45558d;
 +
}
 +
 
 +
.wrapper.spotlight.style2:after {
 +
box-shadow: inset 0 -1px 0 0 #45558d, 0 1px 0 0 #45558d;
 +
}
 +
 
 +
.wrapper.spotlight.style3 {
 +
background-color: #3f4e85;
 +
}
 +
 
 +
.wrapper.spotlight.style3:before, .wrapper.spotlight.style3:after {
 +
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%233f4e85%3B' /%3E%3C/svg%3E");
 +
}
 +
 
 +
.wrapper.spotlight.style3:before {
 +
box-shadow: inset 0 -1px 0 0 #3f4e85, 0 1px 0 0 #3f4e85;
 +
}
 +
 
 +
.wrapper.spotlight.style3:after {
 +
box-shadow: inset 0 -1px 0 0 #3f4e85, 0 1px 0 0 #3f4e85;
 +
}
 +
 
 +
.wrapper.spotlight.style4 {
 +
background-color: #39477c;
 +
}
 +
 
 +
.wrapper.spotlight.style4:before, .wrapper.spotlight.style4:after {
 +
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2339477c%3B' /%3E%3C/svg%3E");
 +
}
 +
 
 +
.wrapper.spotlight.style4:before {
 +
box-shadow: inset 0 -1px 0 0 #39477c, 0 1px 0 0 #39477c;
 +
}
 +
 
 +
.wrapper.spotlight.style4:after {
 +
box-shadow: inset 0 -1px 0 0 #39477c, 0 1px 0 0 #39477c;
 +
}
 +
 
 +
.wrapper.spotlight.style5 {
 +
background-color: #324072;
 +
}
 +
 
 +
.wrapper.spotlight.style5:before, .wrapper.spotlight.style5:after {
 +
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23324072%3B' /%3E%3C/svg%3E");
 +
}
 +
 
 +
.wrapper.spotlight.style5:before {
 +
box-shadow: inset 0 -1px 0 0 #324072, 0 1px 0 0 #324072;
 +
}
 +
 
 +
.wrapper.spotlight.style5:after {
 +
box-shadow: inset 0 -1px 0 0 #324072, 0 1px 0 0 #324072;
 +
}
 +
 
 +
.wrapper.spotlight.style6 {
 +
background-color: #2d3a69;
 +
}
 +
 
 +
.wrapper.spotlight.style6:before, .wrapper.spotlight.style6:after {
 +
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%232d3a69%3B' /%3E%3C/svg%3E");
 +
}
 +
 
 +
.wrapper.spotlight.style6:before {
 +
box-shadow: inset 0 -1px 0 0 #2d3a69, 0 1px 0 0 #2d3a69;
 +
}
 +
 
 +
.wrapper.spotlight.style6:after {
 +
box-shadow: inset 0 -1px 0 0 #2d3a69, 0 1px 0 0 #2d3a69;
 +
}
 +
 
 +
@media screen and (max-width: 980px) {
 +
 
 +
.wrapper {
 +
margin: 4.75em 0;
 +
}
 +
 
 +
.wrapper:before, .wrapper:after {
 +
height: 4.75em;
 +
}
 +
 
 +
.wrapper:before {
 +
top: -4.75em;
 +
}
 +
 
 +
.wrapper:after {
 +
bottom: -4.75em;
 +
left: 0;
 +
}
 +
 
 +
.wrapper .inner {
 +
padding: 3em 3em 1em 3em ;
 +
width: 100%;
 +
}
 +
 
 +
.wrapper.spotlight .image {
 +
margin: 0 2em 2em 0;
 +
width: 32em;
 +
}
 +
 
 +
.wrapper.spotlight:nth-child(2n - 1) .image {
 +
margin: 0 0 2em 2em;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
.wrapper {
 +
margin: 2.5em 0;
 +
}
 +
 
 +
.wrapper:before, .wrapper:after {
 +
height: 2.5em;
 +
}
 +
 
 +
.wrapper:before {
 +
top: -2.5em;
 +
}
 +
 
 +
.wrapper:after {
 +
bottom: -2.5em;
 +
left: 0;
 +
}
 +
 
 +
.wrapper .inner {
 +
padding: 2em 2em 0.1em 2em ;
 +
}
 +
 
 +
.wrapper.spotlight .inner {
 +
-moz-align-items: -moz-flex-start;
 +
-webkit-align-items: -webkit-flex-start;
 +
-ms-align-items: -ms-flex-start;
 +
align-items: flex-start;
 +
}
 +
 
 +
.wrapper.spotlight .image {
 +
width: 19em;
 +
margin: 0 1.75em 2em 0;
 +
}
 +
 
 +
.wrapper.spotlight:nth-child(2n - 1) .image {
 +
margin: 0 0 2em 1.75em;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 640px) {
 +
 
 +
.wrapper.spotlight .inner {
 +
display: block;
 +
}
 +
 
 +
.wrapper.spotlight .image {
 +
margin: 0 0 1em 0 !important;
 +
max-width: 85%;
 +
width: 12em;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 360px) {
 +
 
 +
.wrapper .inner {
 +
padding: 2em 1.5em 0.1em 1.5em ;
 +
}
 +
 
 +
}
 +
 
 +
/* Footer */
 +
 
 +
#footer .inner {
 +
padding: 5em 0 3em 0 ;
 +
display: -moz-flex;
 +
display: -webkit-flex;
 +
display: -ms-flex;
 +
display: flex;
 +
-moz-flex-direction: row;
 +
-webkit-flex-direction: row;
 +
-ms-flex-direction: row;
 +
flex-direction: row;
 +
-moz-flex-wrap: wrap;
 +
-webkit-flex-wrap: wrap;
 +
-ms-flex-wrap: wrap;
 +
flex-wrap: wrap;
 +
margin: 0 auto;
 +
width: 55em;
 +
}
 +
 
 +
#footer .inner > * {
 +
width: 100%;
 +
}
 +
 
 +
#footer .inner form {
 +
margin: 0 3em 0 0;
 +
width: calc(50% - 1.5em);
 +
}
 +
 
 +
#footer .inner .contact {
 +
width: calc(50% - 1.5em);
 +
}
 +
 
 +
#footer .inner .copyright {
 +
border-top: solid 2px rgba(255, 255, 255, 0.125);
 +
list-style: none;
 +
margin: 4em 0 2em 0;
 +
padding: 2em 0 0 0;
 +
width: 100%;
 +
}
 +
 
 +
#footer .inner .copyright li {
 +
border-left: solid 2px rgba(255, 255, 255, 0.125);
 +
color: rgba(255, 255, 255, 0.35);
 +
display: inline-block;
 +
font-size: 0.9em;
 +
line-height: 1;
 +
margin-left: 1em;
 +
padding: 0;
 +
padding-left: 1em;
 +
}
 +
 
 +
#footer .inner .copyright li:first-child {
 +
border-left: 0;
 +
margin-left: 0;
 +
padding-left: 0;
 +
}
 +
 
 +
#footer .inner .copyright li a {
 +
color: inherit;
 +
}
 +
 
 +
@media screen and (max-width: 1280px) {
 +
 
 +
#footer {
 +
background-color: #4221af;
 +
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
 +
background-size: auto, cover;
 +
background-position: center, center;
 +
margin-top: -6.5em;
 +
padding-top: 6.5em;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 980px) {
 +
 
 +
#footer {
 +
margin-top: -4.75em;
 +
padding-top: 4.75em;
 +
}
 +
 
 +
#footer .inner {
 +
padding: 3em 3em 1em 3em ;
 +
display: block;
 +
width: 100%;
 +
}
 +
 
 +
#footer .inner form {
 +
width: 100%;
 +
margin: 0 0 4em 0;
 +
}
 +
 
 +
#footer .inner .contact {
 +
width: 100%;
 +
margin: 0 0 4em 0;
 +
}
 +
 
 +
#footer .inner .copyright {
 +
margin: 4em 0 2em 0;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
 
 +
#footer {
 +
margin-top: -2.5em;
 +
padding-top: 2.5em;
 +
}
 +
 
 +
#footer .inner {
 +
padding: 2em 2em 0.1em 2em ;
 +
}
 +
 
 +
#footer .inner form {
 +
margin: 0 0 3em 0;
 +
}
 +
 
 +
#footer .inner .contact {
 +
margin: 0 0 3em 0;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 640px) {
 +
 
 +
#footer .inner .copyright li {
 +
border-left: 0;
 +
display: block;
 +
margin: 1em 0 0 0;
 +
padding-left: 0;
 +
}
 +
 
 +
#footer .inner .copyright li:first-child {
 +
margin-top: 0;
 +
}
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 360px) {
 +
 
 +
#footer .inner {
 +
padding: 2em 1.5em 0.1em 1.5em ;
 +
}
 +
 
 +
}
 +
</style>
 +
<style>
 +
/*
 +
Solid State by HTML5 UP
 +
html5up.net | @ajlkn
 +
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 +
*/
 +
 
 +
/* Basic */
 +
 
 +
body {
 +
background-color: #4221af;
 +
background-image: url("../../images/bg.jpg");
 +
background-size: cover;
 +
background-attachment: fixed;
 +
background-position: center;
 +
}
 +
 
 +
body:before {
 +
background: rgba(46, 49, 65, 0.8);
 +
content: '';
 +
display: block;
 +
height: 100%;
 +
left: 0;
 +
position: fixed;
 +
top: 0;
 +
width: 100%;
 +
}
 +
 
 +
body > * {
 +
position: relative;
 +
z-index: 1;
 +
}
 +
 
 +
/* Features */
 +
 
 +
.features article {
 +
display: inline-block;
 +
width: 45%;
 +
}
 +
 
 +
/* Menu */
 +
 
 +
#menu .inner {
 +
margin: 4em auto;
 +
}
 +
 
 +
/* Wrapper */
 +
 
 +
#wrapper > header {
 +
background: none !important;
 +
}
 +
 
 +
.wrapper.spotlight .inner {
 +
text-align: left !important;
 +
}
 +
 
 +
.wrapper.spotlight .image {
 +
display: inline-block;
 +
margin: 0 3em 2em 0 !important;
 +
vertical-align: middle;
 +
width: 24%;
 +
}
 +
 
 +
.wrapper.spotlight .content {
 +
display: inline-block;
 +
vertical-align: middle;
 +
width: 70%;
 +
}
 +
 
 +
/* Banner */
 +
 
 +
#banner {
 +
background: none !important;
 +
}
 +
 
 +
/* Footer */
 +
 
 +
#footer {
 +
background: none !important;
 +
}
 +
 
 +
#footer .inner form {
 +
display: inline-block;
 +
width: 45%;
 +
}
 +
 
 +
#footer .inner .contact {
 +
display: inline-block;
 +
width: 45%;
 +
}
 +
</style>
 +
<style>
 +
/*
 +
Solid State by HTML5 UP
 +
html5up.net | @ajlkn
 +
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 +
*/
 +
 
 +
/* Basic */
 +
 
 +
body {
 +
-ms-behavior: url("assets/js/backgroundsize.min.htc");
 +
}
 +
 
 +
/* Type */
 +
 
 +
h1.major, h2.major, h3.major, h4.major, h5.major, h6.major {
 +
border-bottom: solid 2px #ffffff;
 +
}
 +
 
 +
blockquote {
 +
border-left: solid 4px #ffffff;
 +
}
 +
 
 +
code {
 +
border: solid 2px #ffffff;
 +
}
 +
 
 +
hr {
 +
border-bottom: solid 2px #ffffff;
 +
}
 +
 
 +
/* Button */
 +
 
 +
input[type="submit"],
 +
input[type="reset"],
 +
input[type="button"],
 +
button,
 +
.button {
 +
position: relative;
 +
-ms-behavior: url("assets/js/ie/PIE.htc");
 +
border: solid 2px #ffffff;
 +
}
 +
 
 +
input[type="submit"].special,
 +
input[type="reset"].special,
 +
input[type="button"].special,
 +
button.special,
 +
.button.special {
 +
border: 0;
 +
}
 +
 
 +
/* Form */
 +
 
 +
input[type="text"],
 +
input[type="password"],
 +
input[type="email"],
 +
input[type="tel"],
 +
select,
 +
textarea {
 +
position: relative;
 +
-ms-behavior: url("assets/js/ie/PIE.htc");
 +
background: transparent;
 +
border: solid 2px #ffffff;
 +
}
 +
 
 +
/* Table */
 +
 
 +
table tbody tr {
 +
border: solid 1px #ffffff;
 +
border-left: 0;
 +
border-right: 0;
 +
}
 +
 
 +
table.alt tbody tr td {
 +
border: solid 1px #ffffff;
 +
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;
 +
}
 +
 
 +
/* Features */
 +
 
 +
.features article {
 +
-ms-behavior: url("assets/js/ie/PIE.htc");
 +
position: relative;
 +
width: 44%;
 +
}
 +
 
 +
.features article .image {
 +
margin-top: 0;
 +
margin-left: 0;
 +
width: 100%;
 +
}
 +
 
 +
/* Menu */
 +
 
 +
#menu {
 +
background: #4221af;
 +
}
 +
 
 +
#menu h2 {
 +
border-bottom: solid 2px #ffffff;
 +
}
 +
 
 +
/* Header */
 +
 
 +
#header {
 +
background-color: #353849;
 +
}
 +
 
 +
/* Wrapper */
 +
 
 +
.wrapper {
 +
margin: 0;
 +
}
 +
 
 +
.wrapper:before, .wrapper:after {
 +
display: none;
 +
}
 +
 
 +
.wrapper.spotlight .image {
 +
-ms-behavior: url("assets/js/ie/PIE.htc");
 +
}
 +
 
 +
.wrapper.spotlight .image img {
 +
position: relative;
 +
-ms-behavior: url("assets/js/ie/PIE.htc");
 +
}
 +
 
 +
/* Banner */
 +
 
 +
#banner .logo .icon {
 +
border: solid 2px #ffffff;
 +
-ms-behavior: url("assets/js/ie/PIE.htc");
 +
}
 +
 
 +
#banner h2 {
 +
border-bottom: solid 2px #ffffff;
 +
}
 +
 
 +
/* Footer */
 +
 
 +
#footer .inner .copyright {
 +
border-top: solid 2px #ffffff;
 +
}
 +
 
 +
#footer .inner .copyright li {
 +
border-left: solid 2px #ffffff;
 +
}
 +
</style>
  
 +
</body>
 
</html>
 
</html>

Revision as of 06:38, 30 October 2017

IGEM ASIJ TOKYO

What is CRC?

Colorectal cancer (CRC), or colon/bowel cancer, is a common form of cancer that most frequently develops starting with polyps. In 2014, an estimated 1.3 million people lived with colon and rectum cancer in the United States. In fact, about 1 in 20 men and women are expected to have colon cancer at some point in their life. CRC is caused by the APC gene, or activating mutation in β-catenin, which results in the accumulation of β-catenin and subsequent complex formation with TCF/LEF transcription factors. Excessive β-catenin can interact with TCF to activate the transcription of proliferative genes, such as c-MYC and cyclin D1, in the colon.

Pictures

Project Motivations

After speaking to Minako Abe, an immunologist, we became aware of the immense prevalence and impact--especially in Japan--of colorectal cancer. In Japan alone, in 2015, there were almost 50,000 deaths from colorectal cancer, marking a sudden, sharp spike in the number of young adults that were diagnosed with this cancer. Finding out that two faculty members at our school were survivors of this disease further cemented our belief in the importance of addressing it at its root. The issue is especially prevalent in Japan mostly because the younger generation is not fully aware on how common colorectal cancer is becoming and because they are not checking up on their bodies as frequently as they should be. This motivated us to not limit our project on only addressing early detection of CRC, but also raising awareness.

How did we do it?

Our goal was to create a biosensor that would be able to diagnose CRC at an earlier stage and have it fit for a home-kit where use would be accessible and convenient. To do so, we looked upstream fill in. The activation of the Wnt pathway inhibits the degradation of beta-catenin, a protein that triggers the mutation of oncogenes and tumor suppressor genes. Building off of a rapamycin induced split-luciferase system characterized by the 2015 Peking iGEM team, our construct consists of a promoter reporter system that looks at two downstream products, C-myc and COX-2. As for community outreach, we wanted to take advantage of the fact that we live in the most metropolitan area in Japan. We did so by carrying out our project mainly in Harajuku, which is one of the most popular areas in Tokyo. As ASIJ is also central to many international communities, we’ve also promoted our project at family events held at ASIJ, as well as through our virtual pre-medical club where we were able to interact with schools around the globe.

Pictures

Design

Our design – how we planned out our experiments.