/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Normalize
2.0 Responsive Grid System
3.0 Typography
4.0 Elements
5.0 Forms
6.0 Media
7.0 Accessibility
8.0 Alignments
9.0 Clearings
10.0 Navigation
	10.1 Links
	10.2 Menus
11.0 Content
	11.1 Center
	11.2 Left
	11.3 Top
	11.4 Right
	11.5 Bottom
12.0 Footer
13.0 Animations
14.0 Mobile
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Normalize
--------------------------------------------------------------*/
html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}

body {
	margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
	display: block;
}

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

a:active,
a:hover {
	outline: 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

mark {
	background: #ff0;
	color: #000;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 1em 40px;
}

hr {
	box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

button {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input {
	line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"] {
	-webkit-appearance: textfield;
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}

legend {
	border: 0;
	padding: 0;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

td,
th {
	padding: 0;
}


/*--------------------------------------------------------------
2.0 Responsive Grid System
--------------------------------------------------------------*/
/* SITE CONTAINER WIDTH */
.site {
    width: 80%;
}

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF TWELVE  */
.span_12_of_12 {
	width: 100%;
}

.span_11_of_12 {
  	width: 91.53%;
}
.span_10_of_12 {
  	width: 83.06%;
}

.span_9_of_12 {
  	width: 74.6%;
}

.span_8_of_12 {
  	width: 66.13%;
}

.span_7_of_12 {
  	width: 57.66%;
}

.span_6_of_12 {
  	width: 49.2%;
}

.span_5_of_12 {
  	width: 40.73%;
}

.span_4_of_12 {
  	width: 32.26%;
}

.span_3_of_12 {
  	width: 23.8%;
}

.span_2_of_12 {
  	width: 15.33%;
}

.span_1_of_12 {
  	width: 6.866%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
    
    .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
	width: 100%; 
	}
}


/*--------------------------------------------------------------
3.0 Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
    font-family: 'Source Sans Pro', sans-serif;
    color: #fff;
    font-size: 18px;
    font-size: 1rem;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Gudea', sans-serif;
    position: relative;
    font-weight: 700;
    clear: both;
}

h1 {
    display: inline-block;
    margin-top: 125px;
    margin-bottom: 2.8em;
    margin-left: -20px;
    padding: 0 12px;
    border: 12px solid;
    font-size: 2.44em;
}

h2 {
    font-size: 2.27em;
    line-height: 1.2em;
    text-decoration: underline;
}

h3 {
    margin-top: 1.5em;
    font-size: 2.27em;
    line-height: 1.2em;
}

h3 span {
    display: block;
    position: absolute;
    right: 100%;
    bottom: 100%;
    margin-right: 15px;
    margin-bottom: -20px;
    font-size: .4em;
    text-decoration: underline;
}

nav {
    font-size: .6em;
}

p {
	margin-top: 0;
	margin-bottom: 1.5em;
}

.callout {
    	margin-bottom: 1em;
	font-family: 'Gudea', sans-serif;
        font-size: 1.83em;
	font-weight: 700;
        line-height: 1.2em;
}

.callout.offset {
    margin-left: -15%;
    font-weight: 400;
}

.callout span {
    font-size: 0.4em;
    text-decoration: underline;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}


/*--------------------------------------------------------------
4.0 Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
}

*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

html, body {
	background: #000; /* Fallback for when there is no custom background color defined. */
	width: 100%;
	height: 100%;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

blockquote,
q {
	quotes: "" "";
}

hr {
    width: 70%;
    height: 2px;
    margin-left: 0;
    margin-bottom: 1.5em;
    background-color: #6633cc;
    border: 0;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}

figure {
    position: relative;
    margin: 2em 0;
}

figcaption {
    position: absolute;
    right: 100%;
    bottom: 40px;
    width: 130px;
    margin-right: 15px;
    font-size: 0.8em;
    line-height: 1.2em;
    text-align: right;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}


/*--------------------------------------------------------------
5.0 Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05);
	color: rgba(0, 0, 0, .8);
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1;
	padding: .6em 1em .4em;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 15px 17px rgba(255, 255, 255, 0.8), inset 0 -5px 12px rgba(0, 0, 0, 0.02);
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
	border-color: #aaa #bbb #bbb;
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.15);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
	color: #111;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"] {
	padding: 3px;
}

textarea {
	padding-left: 3px;
	width: 100%;
}


/*--------------------------------------------------------------
6.0 Media
--------------------------------------------------------------*/
/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

.video-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 99999;
    opacity: 0;
    display: none;
}

.video-container iframe {
    position: fixed; 
    left: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
}

.video-container .close {
    display: block;
    position: absolute;
    top: 50px;
    left: 50px;
    width: 50px;
    height: 54px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIzOTguMiAxNzEuOSA1NDEuNSA1ODYuNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAzOTguMiAxNzEuOSA1NDEuNSA1ODYuNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlPnBvbHlnb257ZmlsbDogI2ZmZjt9PC9zdHlsZT48cG9seWdvbiBwb2ludHM9Ijg0OC44LDM1MyA4MDMuMywzMDcuNiA2NjcuOSw0NDMuNCA1MzIuMSwzMDcuNiA0ODcuMSwzNTMgNjIyLjQsNDg4LjUgNDg3LjEsNjI0LjQgNTMyLjEsNjY5LjYgNjY3LjksNTM0IDgwMy4zLDY2OS42IDg0OC44LDYyNC40IDcxMy4xLDQ4OC41Ii8+PGc+PHBvbHlnb24gcG9pbnRzPSI3NTkuNywyNjIuNCA3MTQuMSwyMTcuMiA2NjguOSwxNzEuOSA2MjMuNiwyMTcuMiA1NzguMywyNjIuNCA2MjMuNiwzMDcuNiA2NjguOSwyNjIuNCA3MTQuMSwzMDcuNiIvPjwvZz48Zz48cG9seWdvbiBwb2ludHM9Ijc1OS43LDcxMy4yIDcxNC4xLDY2Ny44IDY2OC45LDYyMi43IDYyMy42LDY2Ny44IDU3OC4zLDcxMy4yIDYyMy42LDc1OC41IDY2OC45LDcxMy4yIDcxNC4xLDc1OC41Ii8+PC9nPjxnPjxwb2x5Z29uIHBvaW50cz0iNDQzLjUsNTc4LjQgNDg4LjcsNTMzLjIgNTM0LjEsNDg3LjggNDg4LjcsNDQyLjcgNDQzLjUsMzk3LjIgMzk4LjIsNDQyLjcgNDQzLjUsNDg3LjggMzk4LjIsNTMzLjIiLz48L2c+PGc+PHBvbHlnb24gcG9pbnRzPSI4OTQuNSwzOTcuMiA4NDguOSw0NDIuNyA4MDMuNyw0ODcuOCA4NDguOSw1MzMuMiA4OTQuNSw1NzguNCA5MzkuOCw1MzMuMiA4OTQuNSw0ODcuOCA5MzkuOCw0NDIuNyIvPjwvZz48L3N2Zz4=');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 9999;
}


/*--------------------------------------------------------------
7.0 Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}


/*--------------------------------------------------------------
8.0 Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}


/*--------------------------------------------------------------
9.0 Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after {
	content: "";
	display: table;
}

.clear:after {
	clear: both;
}


/*--------------------------------------------------------------
10.0 Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
10.1 Links
--------------------------------------------------------------*/
a,
a:visited,
a:hover,
a:focus,
a:active {
    font-family: 'Gudea', sans-serif;
    color: #181298;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    outline: 0;
}


/*--------------------------------------------------------------
10.2 Menus
--------------------------------------------------------------*/

nav ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-menu,
.main-menu ul {
    width: 100%;
    height: 100%;
}

.main-menu .button {
    display: block;
    position: absolute;
    z-index: 900;
}

.main-menu .button span {
    display: block;
    float: left;
}

.main-menu .button span:first-child {
    width: 9px;
    height: 12px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNzcuMSAxMDIuNyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNzcuMSAxMDIuNyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PHBvbHlnb24gcG9pbnRzPSIyNS43LDEwMi43IDUxLjQsNzcuMSA3Ny4xLDUxLjQgNTEuNCwyNS43IDI1LjcsMCAwLDI1LjcgMjUuNyw1MS40IDAsNzcuMSIgY2xhc3M9InN0eWxlMCIgc3R5bGU9ImZpbGw6IzE4MTI5OCIvPjwvZz48L3N2Zz4=');
    background-size: cover;
    background-repeat: no-repeat;
}

.main-menu .button.change span:first-child {
        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNzcuMSAxMDIuNyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNzcuMSAxMDIuNyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PHBvbHlnb24gcG9pbnRzPSIyNS43LDEwMi43IDUxLjQsNzcuMSA3Ny4xLDUxLjQgNTEuNCwyNS43IDI1LjcsMCAwLDI1LjcgMjUuNyw1MS40IDAsNzcuMSIgY2xhc3M9InN0eWxlMCIgc3R5bGU9ImZpbGw6I2ZmZiIvPjwvZz48L3N2Zz4=');    
}

.main-menu .button.close span:first-child {
    width: 12px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNzkyIDYxMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNzkyIDYxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlPi5zdHlsZTB7ZmlsbDoJI2ZmZjt9PC9zdHlsZT48cG9seWdvbiBwb2ludHM9IjY5MS40LDE1Ni44IDU0NC44LDEwLjIgMzk1LjUsMTU5LjUgMjQ2LjIsMTAuMiA5OS42LDE1Ni44IDI0OC45LDMwNi4xIDk5LjYsNDU1LjUgMjQ2LjIsNjAyIDM5NS41LDQ1Mi43IDU0NC44LDYwMiA2OTEuNCw0NTUuNSA1NDIuMSwzMDYuMSIgY2xhc3M9InN0eWxlMCIvPjwvc3ZnPg==');
}

.main-menu .button span:last-child {
    margin-left: 5px;
}

.main-menu .button.left {
    bottom: 50%;
    left: -15px;
    margin-bottom: 40px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.main-menu .button.left span:first-child {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

.main-menu .button.top {
    top: 20px;
    left: 50%;
    margin-left: -4px;
}

.main-menu .button.top span:first-child {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.main-menu .button.right {
    top: 50%;
    right: -10px;
    margin-top: 5px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.main-menu .button.right span {
    float: right;
}

.main-menu .button.right span:first-child {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.main-menu .button.right span:last-child {
    margin-left: 0;
    margin-right: 5px;
}

.main-menu .button.bottom {
    bottom: 20px;
    left: 50%;
    margin-left: -4px;
}

.main-menu .button.bottom span:first-child {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}


.site-map ul {
    text-align: center;
}

.site-map li {
    display: inline-block; 
    margin: -20px 20px;        
    font-size: 1.8em;
}

.site-map li:nth-child(1) {
    margin-left: 60px;
}

.site-map li:nth-child(3) {
    margin-top: 10px;
    padding: 0 10px;
}

.site-map li a {
    color: #000;
    font-weight: 700;
    text-decoration: underline;
}


/*--------------------------------------------------------------
11.0 Content
--------------------------------------------------------------*/
.container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 600px;
    overflow: hidden;
}

.content {
    position: absolute;
    width: 100%;
    height: 100%;
}

.content .wrapper {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

.content section {
    position: relative;
    width: 100%;
    padding-left: 39%;
    padding-right: 26%;
    z-index: 700;
}

.scroll-cover {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
    background: inherit;
    z-index: 800;
}

.pattern {
    display: block;
    position: absolute; 
    height: auto;
    z-index: -1;
}

/*--------------------------------------------------------------
11.1 Center
--------------------------------------------------------------*/
.content.center {
    top: 0;
    bottom: 0;
    background: #ffdc00;
    overflow-y: hidden;
}

.content.center .logo {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 334px;
    height: 352px;
    margin-left: -167px;
    margin-top: -215px;
}

.content.center .play {
    display: block;
    position: absolute;
    bottom: 15%;
    left: 50%;
    margin-left: -25px;
    width: 50px;
    height: 50px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSI5MS45IDMuOSA2MDguMSA2MDguMSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyA5MS45IDMuOSA2MDguMSA2MDguMSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGc+PGc+PHBhdGggZD0iTTM5NiA2MTJDMjI4LjQgNjEyIDkxLjkgNDc1LjYgOTEuOSAzMDcuOVMyMjguNCAzLjkgMzk2IDMuOXMzMDQuMSAxMzYuNCAzMDQuMSAzMDQuMVM1NjMuNiA2MTIgMzk2IDYxMnogTTM5NiA0OC40IGMtMTQzLjEgMC0yNTkuNSAxMTYuNC0yNTkuNSAyNTkuNVMyNTIuOSA1NjcuNSAzOTYgNTY3LjVzMjU5LjUtMTE2LjQgMjU5LjUtMjU5LjVTNTM5LjEgNDguNCAzOTYgNDguNHoiIHN0eWxlPSJmaWxsOiNmZmYiLz48L2c+PHBvbHlnb24gcG9pbnRzPSIyOTIuNCwxNDcgNTc0LjIsMzA5LjYgMjkyLjQsNDcxLjciIHN0eWxlPSJmaWxsOiNmZmYiLz48L2c+PC9zdmc+');
    background-size: cover;
    background-repeat: no-repeat;
}

.slogan {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffdc00;
    z-index: 800;
}

.slogan p {
    position: relative;
    top: 50%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -180px;
    text-align: center;
    font-family: 'Gudea', sans-serif;
    font-size: 2.27em;
    font-weight: 700;
    line-height: 1.2em;
    color: #181298;
}

.slogan img {
    width: 400px;
    height: auto;
}

.slogan span {
    text-decoration: underline;
}


/*--------------------------------------------------------------
11.2 Left
--------------------------------------------------------------*/
.content.left {
	top: 0;
	left: -100%;
	background: #181298;
	overflow-y: auto; 
}

.content.left .pattern {
    top: 0;
    left: 5%;
    width: 13%;
}

.mosaic {
    width: 100%;
}

.mosaic a {
    display: block;
    position: relative;
    float: left;
    width: 16.666%;
    height: auto;
    overflow: hidden;
}

.mosaic a.type1 {
    background: #ffdc00;
    color: #181298;
}

.mosaic a.type2 {
    background: #b7f4f6;
    color: #c80000;
}

.mosaic a.type3 {
    background: #c80000;
    color: #fff;
}

.mosaic a.type4 {
    background: #181298;
    color: #fff;
}

.mosaic a img {
    display: block;
    width: 100%;
    height: auto;
    z-index: 1;
    margin: 0;
}

.mosaic a .overlay {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #ff0043;
    z-index: 2;
    text-transform: none;
    
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.mosaic a.type1 .overlay,
.mosaic a.type2 .overlay,
.mosaic a.type3 .overlay,
.mosaic a.type4 .overlay {
    left: 0;
    background: transparent;
}


.mosaic a:hover .overlay {
    left: 0;
}


.overlay div {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
}

.overlay span:first-child {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 1.5em;
    text-align: center;
    -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.overlay span:last-child {
    display: block;
    position: absolute;
    bottom: 10px;
    width: 100%;
    font-size: 1em;
    font-weight: 400;
    text-align: center;
    
}


/*--------------------------------------------------------------
11.3 Top
--------------------------------------------------------------*/
.content.top {
    top: -100%;
    color: #b7f4f6;
    background-color: #ff0043;
}

.content.top .pattern {
    top: 125px;
    left: 0;
    width: 35%;
}

.content.top h1 {
    margin-bottom: 1em;
}


/*--------------------------------------------------------------
11.4 Right
--------------------------------------------------------------*/
.content.right {
    top: 0;
    left: 100%;
    background: #c80000;
}

.content.right .pattern:first-of-type {
    top: 25px;
    left: 0;
    width: 35%;
}

.content.right .pattern:last-of-type {
    top: 85px;
    right: -20px;
    width: 37%;
}

/*--------------------------------------------------------------
11.5 Bottom
--------------------------------------------------------------*/
.content.bottom {
    top: 100%;
    background: #b7f4f6;
    color: #ff0043;
}

.content.bottom .pattern:first-of-type {
    top: 185px;
    left: 0;
    width: 33%;
}

.content.bottom .pattern:last-of-type {
    margin-top: -155px;
    left: 10px;
    width: 33%;
}

.chart-info {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    margin-right: 0;
    font-size: 0.8em;
    line-height: 1.2em;
    text-align: left;
}

.chart-info p {
    float: left;
    width: 150px;
    margin-right: 40px
}


/*--------------------------------------------------------------
12.0 Footer
--------------------------------------------------------------*/
.content footer {
    position: relative;
    width: 100%;
    height: 105px;
    margin-top: 150px;
    background-color: #fff;
}

.left footer {
    margin: 0;
}

.content footer .logo {
    width: 105px;
    height: 52px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIxNy40IDExNi42IDc2MS41IDM3Mi42IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDE3LjQgMTE2LjYgNzYxLjUgMzcyLjYiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxzdHlsZT4uc3R5bGUwe2ZpbGw6CSNCMkIyQjI7fTwvc3R5bGU+PHBvbHlnb24gcG9pbnRzPSI1MTIuOCwyMzEuNyA0ODQsMjAyLjkgMzk3LjksMjg5LjEgMzExLjcsMjAyLjkgMjgzLDIzMS43IDM2OS4xLDMxNy44IDI4Myw0MDQgMzExLjcsNDMyLjggMzk3LjksMzQ2LjYgNDg0LDQzMi44IDUxMi44LDQwNCA0MjYuNiwzMTcuOCIgY2xhc3M9InN0eWxlMCIvPjxwYXRoIGQ9Ik01ODcuMiA0MDQuM2gtNDIuM3YtODIuNGwtMjQuNCA0Mi41aC0yNy4xbC0yNC40LTQyLjZ2ODIuNGgtNDIuM1YyMzJoNDEuNmwzOC44IDc2bDM4LjgtNzZoNDEuM1Y0MDQuM3oiLz48cGF0aCBkPSJNMTc3LjkgNDA0LjNoLTQyLjN2LTgyLjRsLTI0LjQgNDIuNUg4NC4xbC0yNC40LTQyLjZ2ODIuNEgxNy40VjIzMmg0MS42bDM4LjggNzZsMzguOC03Nmg0MS42djE3Mi4zSDE3Ny45eiIvPjxwYXRoIGQ9Ik0zNjkuOCA0MDRoLTM3LjFsLTU1LjItODYuNlY0MDRoLTQyLjNWMjMxLjdoMzcuMWw1NS4yIDg2LjZ2LTg2LjZoNDIuM1Y0MDR6Ii8+PGc+PHBhdGggZD0iTTc3OSA0MDQuMmgtNDguNGwtMjguMy01M2wtMjguMyA1M2gtNDguNGw1My42LTg4LjJMNjI5IDIzMi4yaDQ4LjFsMjUgNDguNmwyNS00OC42aDQ4LjFMNzI1IDMxNkw3NzkgNDA0LjJ6Ii8+PC9nPjxnPjxwb2x5Z29uIHBvaW50cz0iNDU2LjIsMTc0LjIgNDI3LjMsMTQ1LjQgMzk4LjUsMTE2LjYgMzY5LjgsMTQ1LjQgMzQxLDE3NC4yIDM2OS44LDIwMi45IDM5OC41LDE3NC4yIDQyNy4zLDIwMi45IiBjbGFzcz0ic3R5bGUwIi8+PC9nPjxnPjxwb2x5Z29uIHBvaW50cz0iNDU2LjIsNDYwLjUgNDI3LjMsNDMxLjcgMzk4LjUsNDAzIDM2OS44LDQzMS43IDM0MSw0NjAuNSAzNjkuOCw0ODkuMyAzOTguNSw0NjAuNSA0MjcuMyw0ODkuMyIgY2xhc3M9InN0eWxlMCIvPjwvZz48Zz48cG9seWdvbiBwb2ludHM9IjI1NS40LDM3NC45IDI4NC4xLDM0Ni4xIDMxMi45LDMxNy4zIDI4NC4xLDI4OC42IDI1NS40LDI1OS44IDIyNi42LDI4OC42IDI1NS40LDMxNy4zIDIyNi42LDM0Ni4xIiBjbGFzcz0ic3R5bGUwIi8+PC9nPjxnPjxwb2x5Z29uIHBvaW50cz0iNTQxLjksMjU5LjggNTEyLjksMjg4LjYgNDg0LjIsMzE3LjMgNTEyLjksMzQ2LjEgNTQxLjksMzc0LjkgNTcwLjYsMzQ2LjEgNTQxLjksMzE3LjMgNTcwLjYsMjg4LjYiIGNsYXNzPSJzdHlsZTAiLz48L2c+PC9zdmc+');
    background-size: cover;
}

.copyright {
    position:absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    font-size: 0.8em;
    color: #000;
}

.copyright a {
    color: #000;
}

.copyright a:last-of-type {
    display: inline-block;
    border: 2px solid black;
    padding: 0 2px;
    margin: 0 3px;
    font-size: 0.7em;
}


/*--------------------------------------------------------------
13.0 Animations
--------------------------------------------------------------*/


/*--------------------------------------------------------------
14.0 Mobile
--------------------------------------------------------------*/

.mobile-container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffdc00;
    text-align: center;
    display: none;
    color: #181298;
}

.mobile-container .logo {
    margin-top: 25%;
    margin-bottom: 12%;
    left: 24%;
    width: 52%;
    height: auto;
}

@media only screen and (max-width: 480px) {
    .container {
        display: none;
    }
    
    .mobile-container {
        display: block;
    }

}