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,preheader,header,message,contact,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,preheader,message,contact,header,hgroup,menu,nav,section,main{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}svg:not(:root){overflow:hidden}
/* ================================
Primary style
================================ */
*, *::after, *::before {-webkit-font-smoothing: antialiased; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
*::after, *::before {content: '';}
::selection {background-color: rgba(0, 95, 215, .95); color: rgb(255, 255, 255);}
::-moz-selection {background-color: rgba(0, 95, 215, .95); color: rgb(255, 255, 255);}
*, legend {box-sizing: border-box;}
html {}
html * {text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
body, html {overflow-x: hidden;}
body {background-color: rgb(255, 255, 255); color: rgb(130, 145, 155); font-family: "proxima-nova-soft",sans-serif; font-size: 1.15rem; font-weight: 200; line-height: 2;}
body.is-active {overflow: hidden; position: relative;}
body.is-active::after {background-color: rgb(110, 110, 110); content: ""; display: block; height: 100%; left: 0; opacity: .75; position: absolute; top: 0; transition: 0.2s linear; width: 100%; z-index: 200;}
@media only screen and (min-width: 768px) {
body::after {display: none;}
}
/* ================================
Typography
================================ */
h1, h2, h3, h4, h5, h6 {font-family: "open-sans",sans-serif; font-weight: 700; letter-spacing: -0.01em;}
p {color: rgb(140, 140, 140);}
address {font-style: normal; line-height: 1.5; margin-bottom: 20px;}
blockquote {border-left: 4px solid rgb(0, 135, 255); font-size: 1rem; font-weight: 700; line-height: 1; margin: 2rem 0; padding: 1rem 0 1rem 3rem;}
blockquote:after, blockquote:before, q:after, q:before {content: ''; content: none;}
blockquote > p {font-style: normal; font-weight: 700; line-height: 28px; margin-bottom: 10px;}
blockquote > cite {color: rgb(165, 165, 165); display: block; font-size: .75rem; font-weight: 400; line-height: 1.5; margin: 10px 0 0 0;}
code {border-radius: 2px; box-sizing: border-box; background: rgb(250, 250, 250); display: block; line-height: 1.5; margin: 20px 0; padding: 25px; width: 100%;}
@media only screen and (min-width: 1024px) {
blockquote > p {font-size: 30px !important; font-weight: 300; line-height: 40px !important;}
}
/* ================================
Media
================================ */
video {display: block; width: 100%;}
/* ================================
Buttons & Hyperlinks
================================ */
a {color: inherit; text-decoration: none;}
a, button {cursor: pointer;}
.button {background: transparent; box-sizing: border-box; border: 2px solid rgb(255, 255, 255); border-radius: 2px; color: rgb(255, 255, 255); display: inline-block; font-family: "open-sans",sans-serif; font-size: 10px; font-weight: 700; line-height: 20px;}
.button:focus, .button:hover {color: inherit; outline: none; text-decoration: none;}
.button:focus:after, .button:hover:after {content: "\E5C8"; display: block; float: right; font-family: 'Material Icons'; font-size: inherit; line-height: inherit; margin: 0 0 0 10px; position: relative; transition: all 200ms ease-out;}
.button > i {color: inherit; max-width: 0; opacity: 0; transition: 0.1s linear;}
.button:focus > i, .button:hover > i {margin-left: 10px; opacity: 1;}
.button.button-small {font-size: 12px; height: auto; letter-spacing: 1px; padding: 5px 15px;}
.button.button-medium {font-size: 12px; height: auto; padding: 10px 30px;}
.button.button-large {font-size: 12px; height: auto; padding: 15px 45px;}
.button.button-xlarge {font-size: 12px; height: auto; padding: 25px 45px;}
.modal-trigger {cursor: pointer; display: inline-block; height: 4.5em; margin: 1em; position: relative; width: 4.5em;}
.modal-trigger::before {color: rgb(255, 255, 255); content: "\e011"; display: block; font-family: et-line; font-size: 5em; height: 100%; left: 0; line-height: .95em; position: absolute; text-align: center; top: 0; width: 100%;}
.modal-trigger:focus, .modal-trigger:hover {opacity: .65;}
/* ================================
Form Elements
================================ */
input[type="text"], input[type="email"], input[type="password"], textarea, select, input[type="tel"], input[type="url"], input[type="search"] {border: none; border-radius: 0; color: inherit; font: inherit; font-weight: 500; margin: 0; padding: 0;}
input[type="text"]:not(button), input[type="email"]:not(button), input[type="password"]:not(button), textarea:not(button), select:not(button), input[type="tel"]:not(button), input[type="url"]:not(button), input[type="search"]:not(button) {}
form input[type="text"], form input[type="password"], form input[type="email"], form input[type="url"], form input[type="tel"], form textarea, form .input-select {transition: 0.1s linear;}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, select:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="search"]:focus {outline: none;}
input[type="text"]:active, input[type="email"]:active, input[type="password"]:active, textarea:active, select:active, input[type="tel"]:active, input[type="url"]:active, input[type="search"]:active {outline: none;}
/* ================================
Grid
================================ */
.grid {align-items: center; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 30px; margin: 0 auto; max-width: 1170px; width: 100%; z-index: 1;}
.grid > .column {flex: 0 0 100%;}
.grid > .column:last-of-type {order: initial;}
.grid > .column > div {box-sizing: border-box;}
.grid > .column.twelve > div {padding: 0;}
.grid > .column > div > h3 {font-size: 2rem; font-weight: 400; line-height: 1; margin-bottom: 1.25rem;}
.grid > .column > div > p {color: rgb(150, 150, 150);}
.grid > .column > div > figure {margin: auto; max-width: 100%; overflow: hidden;}
.grid > .column > div > figure.clip {border-radius: 2px;}
.grid > .column > div > figure > img {display: block; width: 100%;}
@media only screen and (min-width: 1024px) {
}
@media (min-width: 650px) {
.grid {padding: 6.5rem 30px;}
.grid > .column > div {padding: 0 1rem;}
.column {}
.column:first-child {margin-left: 0;}
.column.one {flex: 0 0 8.333333333333%;}
.column.two {flex: 0 0 16.66666666666%;}
.column.three {flex: 0 0 24.99999999999%;}
.column.four {flex: 0 0 33.33333333333%;}
.column.five {flex: 0 0 41.66666666666%;}
.column.six {flex: 0 0 50%;}
.column.seven {flex: 0 0 58.33333333331%;}
.column.eight {flex: 0 0 66.66666666664%;}
.column.nine {flex: 0 0 74.99999999997%;}
.column.ten {flex: 0 0 83.33333333333%;}
.column.eleven {flex: 0 0 91.66666666663%;}
.column.twelve {flex: 0 0 100%;}
.grid > .column > div > h3 {font-size: 2.25rem;}
}
@media (max-width: 650px) {
.grid > .column:first-of-type {margin: 0 0 30px;}
.grid > .column:only-of-type {margin: 0;}
}
/* ================================
Progress Bar(s)
================================ */
progress {appearance: none; background-color: rgb(65, 185, 145); border: none; color: rgb(65, 185, 145); height: 2px; left: 0; position: absolute; width: 100%; transition: width 500ms ease-out,opacity 400ms linear; z-index: 2147483647;}
progress.done {opacity: 0;}
progress::-webkit-progress-bar {background-color: transparent;}
progress::-webkit-progress-value {background-color: rgb(65, 185, 145);}
progress::-moz-progress-bar {background-color: rgb(65, 185, 145);}
progress dd, progress dt {border-radius: 100%; height: 2px; position: absolute; top: 0;}
progress dd {clip: rect(-6px,22px,14px,10px); opacity: 1; right: 0;}
progress dt {clip: rect(-6px,90px,14px,-6px); opacity: 1; right: -80px; width: 180px;}
/* ================================
Featherlight
================================ */
@media all {
.featherlight {background-color: rgba(50, 65, 75, .65); cursor: pointer; display: none; position:fixed; text-align: center; top: 0; right: 0; bottom: 0; left: 0; white-space: nowrap; z-index: 2147483647;}
.featherlight:last-of-type {background-color: rgba(50, 65, 75, .65);}
.featherlight:before {content: ''; display: inline-block; height: 100%; margin-right: -0.25em; vertical-align: middle;}
.featherlight .featherlight-content {background: rgb(255, 255, 255); cursor: auto; display: inline-block; margin: auto 10px; max-height: 95%; position: relative; overflow: auto; text-align: left; vertical-align: middle; white-space: normal;}
/* contains the content */
.featherlight .featherlight-inner {display: block;}
.featherlight .featherlight-inner > .featherlight-video {display: block;}
.featherlight .featherlight-inner > .featherlight-video > video {display: block; max-width: 100%;}
.featherlight .featherlight-inner > .featherlight-video-message > a {display: block; font-weight: 700; line-height: 20px; padding: 5px;}
.featherlight .featherlight-inner > .featherlight-video-message > a:hover {}
.featherlight .featherlight-inner > .featherlight-video-message > a:active {}
.featherlight .featherlight-inner > .featherlight-search {}
.featherlight .featherlight-close-icon {background: rgba(255, 255, 255, 0.3); color: rgb(255, 255, 255); cursor: pointer; line-height: 25px; position: absolute; right: 0; text-align: center; top: 0; width: 25px; z-index: 9999;}
.featherlight .featherlight-image {width: 100%;}
.featherlight-iframe .featherlight-content {border-bottom: 0; padding: 0;}
.featherlight iframe {border: none;}
}
@media only screen and (min-width: 1024px) {
.featherlight .featherlight-content {margin: auto 5%; max-height: 95%; max-width: 95%;}
.featherlight .featherlight-inner > .featherlight-video > video {max-width: 900px;}
}
/* ================================
Shared Components
================================ */
preheader, header, main, section, footer {box-sizing: border-box; position: relative; width: 100%;}
preheader > div, header > div, main > div, footer > div {line-height: 20px; position: relative;}
preheader > div, header > div, main > div, section > div, footer > div {box-sizing: border-box; margin: auto; padding: 30px; position: relative; z-index: 5;}
@media only screen and (min-width: 1024px) {
preheader > div, header > div, main > div, section > div, footer > div {height: 100%; max-width: 1170px;}
preheader > div, header > div, main > div, section > div, footer > div {padding: 5rem 30px;}
}
/* ================================
Pre-header Components
================================ */
preheader {background-color: rgb(10, 10, 10); color: rgb(255, 255, 255);}
preheader > div {font-weight: 700; letter-spacing: .075rem; line-height: 0; padding: 20px 30px; text-align: center;}
@media only screen and (min-width: 1024px) {
preheader {}
}
/* ================================
Header Components
================================ */
header {color: rgb(255, 255, 255); height: 80px; position: fixed; top: 0px; transform: translate3d(0,0,0); transition: .5s; z-index: 5;}
header.fixed {background-color: rgb(0, 115, 220); box-shadow: 0 0 10px 1px rgba(0, 0, 0, .075); top: 0;}
header > progress {top: 0;}
header > div {height: 80px; padding: 30px; text-align: center;}
header > div > div {height: 20px; position: relative;}
header > div > .logo {float: left; width: auto; z-index: 550;}
header > div > .logo a {background-image: url('../../img/logo.png'); background-position: 0 -20px; background-size: 100%; background-repeat: no-repeat; display: block; height: 20px; max-width: 100%; text-indent: -9999px; width: 260px;}
header > div > .logo.logo-alt a {background-image: url('../../img/logo-alt.png');}
header.fixed > div > .logo a {background-position: 0 -20px;}
.navactive header > div > .logo a {background-position: 0 -20px;}
header > div > .nav {float: right; width: 20px;}
/* Header Desktop Nav */
header > div > .nav .desktop {display: none; font-size: 12px; font-weight: 700;}
header > div > .nav .desktop > ul {list-style: none; text-align: right;}
header > div > .nav .desktop > ul > li {display: inline-block; float: left; position: relative;}
header > div > .nav .desktop > ul > li > a {color: rgb(255, 255, 255); cursor: pointer; display: block; letter-spacing: 1px; line-height: 20px; padding: 0 10px; transition: color 0.1s;}
header > div > .nav .desktop > ul > li > a::after {background-color: rgb(255, 255, 255); border-radius: 4px; bottom: -5px; content: ''; display: block; height: 2.5px; left: 10px; padding-bottom: inherit; position: absolute; transform: scaleX(0); transition: transform .3s ease-out,border-color .3s ease-out; width: calc(100% - 30px);}
header > div > .nav .desktop > ul > li > a:hover:after {-ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1);}
header.fixed > div > .nav .desktop > ul > li > a::after {border-color: rgb(225, 225, 225);}
header > div > .nav .desktop > ul > li.dropit-open > a::after {-ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1)}
header > div > .nav .desktop > ul > li.dropit-trigger > a {padding: 0 20px 0 10px; position: relative;}
header > div > .nav .desktop > ul > li.dropit-trigger > a::before {content: "\E5C5"; display: block; font-family: 'Material Icons'; height: 20px; line-height: 20px; position: absolute; right: 0; text-align: center; top: 0; width: 20px;}
header > div > .nav .desktop > ul > li.dropit-trigger.dropit-open > a::before {content: "\E5C7";}
header.fixed > div > .nav .desktop > ul > li > a {}
header > div > .nav .desktop > ul > li > a:hover, header .nav .desktop > ul > li > a:focus {}
header.fixed > div > .nav .desktop > ul > li > a:hover, header.fixed .nav .desktop > ul > li > a:focus {}
header > div > .nav .desktop > ul > li > a.action-button {box-sizing: border-box; border-radius: 2px; color: rgb(255, 255, 255); display: block; line-height: 25px; margin: 0 2.5px; overflow: hidden; position: relative; z-index: 5;}
header > div > .nav .desktop > ul > li > a.action-button::after {content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 2;}
header > div > .nav .desktop > ul > li > a.action-button:hover:after {background-color: rgba(0, 0, 0, .15);}
header > div > .nav .desktop > ul > li > a.action-button:focus, header > div > .nav .desktop > ul > li > a.action-button:hover {color: rgb(255, 255, 255) !important;}
header > div > .nav .desktop > ul > li > a.action-button > span {position: relative; z-index: 5;}
header > div > .nav .desktop > ul > li > a.action-button > span > i {margin-right: 5px;}
header > div > .nav .desktop > ul > li > nav {border-top: 0; left: calc(0% + 20px); display: none; margin: 0; max-height: 0; min-width: 190px; padding: 0; position: absolute; top: 50px;}
header > div > .nav .desktop > ul > li.dropit-open > nav {background-color: rgb(245, 245, 245); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border: none; box-shadow: 0 0 10px 1px rgba(0, 0, 0, .075); display: block; left: calc(50% - 50px); margin-left: -60px; max-height: 999px; min-width: 195px; right: 50%; z-index: 4;}
header > div > .nav .desktop > ul > li.dropit-open > nav::before {display: block;}
header > div > .nav .desktop > ul > li.dropit-open > nav::after {background-color: rgb(0, 135, 255); content: ""; display: block; height: 5px; left: 0; position: absolute; top: -5px; width: 100%;}
header > div > .nav .desktop > ul > li > nav > ul {box-sizing: border-box; list-style: none; overflow: hidden; margin: 20px; padding: 0; position: relative; z-index: 2;}
header > div > .nav .desktop > ul > li > nav > ul::before {background-color: rgb(215, 225, 235); border-radius: 4px; content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 5px;}
header > div > .nav .desktop > ul > li > nav > ul > li {text-align: left;}
header > div > .nav .desktop > ul > li > nav > ul > li > a {color: rgb(110, 110, 110); display: block; font-size: 12px; line-height: 30px; padding: 0 20px; position: relative;}
header > div > .nav .desktop > ul > li > nav > ul > li > a::before {border-radius: 4px; content: ""; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 5px;}
header > div > .nav .desktop > ul > li > nav > ul > li > a:hover:before {background-color: rgb(0, 135, 255);}
/* Header Mobile Nav */
header .nav .mobile {}
header .nav .mobile > * {-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent;}
/* Mobile Menu Action */
.icon {height: 20px; display: block; margin: 0px; position: fixed; width: 20px; z-index: 999;}
.menui {background: rgb(255, 255, 255); position: absolute; transition: 0.6s ease; transition-timing-function: cubic-bezier(.75, 0, .29, 1.01);}
.dark .menui {}
.mid .menui {}
.light .menui {background-color: rgb(255, 255, 255);}
.ministage .menui {background-color: rgb(255, 255, 255);}
.fixed .menui {background-color: rgb(255, 255, 255);}
.top-animate {background: rgb(255, 255, 255) !important; top: 13px !important; transform: rotate(45deg);}
.mid-animate {opacity: 0;}
.bottom-animate {background: rgb(255, 255, 255) !important; top: 13px !important; transform: rotate(-225deg);}
.top-menu {border-radius: 10px; height: 2px; top: 7px; width: 25px;}
.mid-menu {border-radius: 10px; height: 2px; top: 13px; width: 25px;}
.bottom-menu {border-radius: 10px; height: 2px; top: 19px; width: 25px;}
/* Mobile Menu Overlay */
.mobilenav {background: rgb(0, 115, 220); display: none; height: 100vh; left: 0; position: fixed; top: 0; width: 100%; z-index: 500;}
.mobilenav > ul {font-weight: 200; list-style: none; margin: 85px 0 0; text-align: left;}
.mobilenav > ul > li {display: block;}
.mobilenav > ul > li > a {color: rgb(255, 255, 255); display: block; font-size: 150%; padding: 10px 30px; text-decoration: none; width: 100%;}
.mobilenav > ul > li > a:active {background-color: rgba(0, 0, 0, .25);}
.mobilenav > ul > li.dropit-open > a {background-color: rgb(0, 175, 135);}
.mobilenav > ul > li > nav {background-color: rgb(10, 10, 15);}
.mobilenav > ul > li > nav > ul {list-style: none; margin: 0; padding: 0;}
.mobilenav > ul > li > nav > ul > li {display: block;}
.mobilenav > ul > li > nav > ul > li > a {color: rgb(255, 255, 255); display: block; padding: 10px 30px; text-decoration: none; width: 100%;}
.mobilenav > ul > li > nav > ul > li > a:hover {background-color: rgba(255, 255, 255, .05);}
.mobilenav > ul > li > nav > ul > li > a:active {background-color: rgba(255, 255, 255, .25);}
@media only screen and (min-width: 1024px) {
header {}
header .logo {}
header .nav {width: auto !important;}
header .nav .desktop {display: block !important;}
header .nav .mobile {display: none;}
}
/* ================================
Main Components
================================ */
main {background-color: rgb(255, 255, 255); z-index: 1;}
main > div {position: relative;}
main p {font-size: 100%; margin: 0px auto 3rem;}
main p:last-of-type {margin-bottom: 0;}
main a {}
main a:hover {}
main .lightbox {display: none;}
@media only screen and (min-width: 1024px) {
main {}
}
/* ================================
Section Components
================================ */
section {}
section > div {}
section > div > div {margin: auto;}
@media only screen and (min-width: 1024px) {
section {}
section > div {}
}
/* ================================
Contact
================================ */
message {background: rgb(60, 80, 95); box-sizing: border-box; box-shadow: 0 0 10px 1px rgba(0, 0, 0, .075); color: rgb(255, 255, 255); height: 100%; right: -95%; overflow-y: auto; padding: 2rem; position: fixed; top: 0; transition: right 300ms cubic-bezier(0.15, 0.05, 0.05, 0.95); width: 90%; z-index: 220;}
message.is-active {right: 0px;}
message > div {position: relative;}
message h4 {display: block; font-weight: 300; font-size: 1.5em; font-weight: 500; line-height: 1.5; margin-bottom: 1rem;}
message p {color: rgb(255, 255, 255); font-size: 1rem; line-height: 1.5;}
message ul {list-style: none; margin: 1rem 0 0; position: relative;}
message ul::after {clear: both; content: ""; display: table;}
message ul > li {display: block; margin: 0 0 10px; width: 100%;}
message ul > li.additional {margin-bottom: 20px;}
message ul > li > label {display: block; position: relative; width: 100%;}
message ul > li > label::after {clear: both; content: ""; display: table;}
message ul > li > label > .formlabel {display: block; font-size: .75em; font-weight: 500; line-height: 2; margin-bottom: 0;}
message ul > li > label > .formlabel > img {border: 0; display: inline-block; float: right;}
message ul > li > label > .formcontrol {background: transparent; border: 2px solid rgb(55, 75, 90); border-radius: 2px; color: rgb(255, 255, 255); font-family: "ff-nuvo-web-pro", sans-serif; font-size: .85rem; margin: 0; padding: .5rem; transition: 0.2s linear; -webkit-appearance: none; width: 100%;}
message ul > li > label > .formcontrol:focus {border-color: rgb(0, 175, 135);}
message ul > li > label > .button {border-color: rgb(55, 75, 90); color: rgb(205, 205, 205); line-height: 1; margin: 0; width: 100%;}
message ul > li > label > .button:hover {background: rgb(255, 255, 255); border-color: transparent; color: rgb(65, 85, 100);}
contact {background: rgb(65, 185, 145); border-radius: 2px; bottom: 20px; box-shadow: 0 0 10px 1px rgba(0, 0, 0, .075); cursor: pointer; color: rgb(255, 255, 255); height: 2.5rem; line-height: 2.5rem; padding: 10px; position: fixed; right: 20px; transition: all 500ms ease; width: 2.5rem; z-index: 250;}
contact::after {content: "\f086"; display: block; font-family: 'FontAwesome'; font-size: 1rem; height: 100%; left: 0; line-height: inherit; position: absolute; text-align:center; top: 0; width: 100%;}
contact.is-active {background: rgb(5, 125, 85);}
contact.is-active::after {content: "\f00d";}
@media only screen and (min-width: 1024px) {
message {right: -25%; width: 25%;}
}
/* ================================
Stage
================================ */
#stage {background-color: rgb(0, 135, 255); height: 70vh; overflow: hidden;}
#stage > div {height: 100%; max-width: none; padding: 0; width: 100%;}
#stage > div > div {height: 100%; width: 100%;}
#stage > div > div > ul {height: 100%; list-style: none; width: 100%;}
#stage > div > div > ul > li {background-position: center; background-repeat: repeat; display: block; height: 100%; position: relative; width: 100%; z-index: 5;}
#stage > div > div > ul > li > div {display: table; height: 100%; table-layout: fixed; width: 100%;}
#stage > div > div > ul > li > div > div {color: rgb(255, 255, 255); display: table-cell; padding: 80px 30px; vertical-align: middle; width: 100%;}
#stage > div > div > ul > li > div > div > div {margin: auto; max-width: 1110px; text-align: center;}
#stage heading, #stage subblock, #stage action {display: block;}
#stage heading, #stage subblock {letter-spacing: -1px;}
#stage heading {font-family: "open-sans",sans-serif; font-size: 1.25rem; font-weight: 700;}
#stage subblock {font-family: "open-sans",sans-serif; font-size: 2rem; font-weight: 800; line-height: 1.75;}
#stage subblock > span {clear: both; display: block;}
#stage subblock > span > span {border-bottom: 3px solid rgb(65, 185, 145);}
#stage action {margin: 30px 0 0;}
#stage action > .button {border-color: rgb(255, 255, 255); color: rgb(255, 255, 255);}
#stage action > .button:focus, #stage action > .button:hover {background: rgb(255, 255, 255); border-color: transparent; color: rgb(0, 115, 220);}
/* Stage Video */
#stage > div > div > ul > li.media {height: 100%; left: 0; opacity: .25; position: absolute; top: 0; width: 100%; z-index: 1;}
#stage > div > div > ul > li.media > * {min-height: 100%; min-width: 100%;}
#stage > div > div > ul > li.media video {display: none; min-width: 100%; min-height: 100%; opacity: .25;}
@media only screen and (min-width: 1024px) {
#stage {}
#stage subblock {font-size: 2.5rem; line-height: 1.5;}
#stage > div > div > ul > li.media video {display: block;}
}
/* ================================
Intro
================================ */
#intro {text-align: center;}
#intro > div {max-width: 50rem;}
#intro > div > div {}
#intro > div > div > h3 {font-size: 2rem; font-weight: 600; line-height: 1.2; position: relative;}
#intro > div > div > h4 {font-size: 1.75rem; font-weight: 200; line-height: 3.25rem; margin-top: 1.75rem;}
@media only screen and (min-width: 1024px) {
#intro {}
}
/* ================================
Page Header
================================ */
#page-header {background-color: rgb(0, 135, 255); overflow: hidden;}
#page-header > div {height: 100%; max-width: none; padding: 0; width: 100%;}
#page-header > div > div {height: 100%; width: 100%;}
#page-header > div > div > ul {height: 100%; list-style: none; width: 100%;}
#page-header > div > div > ul > li {background-position: center; background-repeat: no-repeat; background-size: cover; display: block; height: 100%; position: relative; width: 100%; z-index: 5;}
#page-header > div > div > ul > li > div {display: table; height: 100%; table-layout: fixed; width: 100%;}
#page-header > div > div > ul > li > div > div {color: rgb(255, 255, 255); display: table-cell; padding: 80px 30px; vertical-align: middle; width: 100%;}
#page-header > div > div > ul > li > div > div > div {margin: auto; max-width: 1110px; padding: 30px 0 0;}
#page-header heading, #page-header subblock, #page-header action, #page-header postdetails {display: block;}
#page-header heading {font-size: 2rem; font-weight: 800;}
#page-header subblock {font-size: 1.5rem; font-weight: 300; line-height: 1;}
#page-header action {margin: 30px 0 0;}
#page-header action > .button {border-color: rgb(255, 255, 255); color: rgb(255, 255, 255);}
#page-header action > .button:focus, #page-header action > .button:hover {background: rgb(255, 255, 255); border-color: transparent; color: rgb(0, 135, 255);}
#page-header postdetails {border-left: .1875rem solid rgb(255, 255, 255); margin: 1rem 0 0 .1875rem; min-height: 8rem; padding: .5rem 0 1.5rem 2rem;}
#page-header postdetails h4 {font-size: 1rem; font-weight: 800; position: relative; letter-spacing: .15rem; text-transform: uppercase;}
#page-header postdetails date {font-style: italic; font-weight: 300; font-size: 1.125rem; display: block; padding-bottom: 1.5rem;}
/* Post Stage Video */
#page-header > div > div > ul > li.media {height: 100%; left: 0; opacity: .25; position: absolute; top: 0; width: 100%; z-index: 1;}
#page-header > div > div > ul > li.media > * {min-height: 100%; min-width: 100%;}
#page-header > div > div > ul > li.media video {display: none;}
@media only screen and (min-width: 1024px) {
#page-header {height: 40vh;}
#page-header > div > div > ul > li > div > div > div {padding: 30px 0;}
#page-header > div > div > ul > li.media video {display: block;}
}
/* ================================
Service
================================ */
#service {background-color: rgb(255, 255, 255);}
#service > div {}
#service > div > div {}
.service {position: relative;}
.service::after {clear: both; content: ""; display: table;}
.service > div {box-sizing: border-box; display: inline-block; padding: 0 20px;}
.service-content {float: right; width: 75%;}
.service-sidebar {float: left; width: 25%;}
.service-sidebar > ul {list-style: none;}
.service-sidebar > ul > li {display: block; margin: 0 0 20px; width: 100%;}
.service-sidebar > ul > li:last-of-type {margin: 0;}
.service-sidebar > ul > li > div {background-color: rgb(246, 246, 246); box-sizing: border-box; display: block; padding: 20px;}
.service-sidebar > ul > li > div > div {box-sizing: border-box; display: block;}
.service-sidebar-header {}
.service-sidebar-header > h4 {font-size: 1rem; font-weight: 800;}
.service-sidebar-list {font-size: 13px;}
.service-sidebar-list > ul {}
.service-sidebar-list > ul > li {display: block; line-height: 30px; padding: 0 0 0 30px; position: relative; text-align: left;}
.service-sidebar-list > ul > li::before {content: "\f0da"; display: block; font-family: FontAwesome; font-size: 95%; height: 30px; left: 0; line-height: 30px; position: absolute; text-align: center; top: 0; width: 30px;}
.service-sidebar-list > ul > li > a {display: block; width: 100%;}
@media only screen and (min-width: 1024px) {
#service {}
}
/* ================================
Content
================================ */
#content {}
#content.color {background-color: rgb(245, 245, 245);}
#content > div {}
#content > div > div {}
#content > div > div > h3 {font-size: 1.25rem; font-weight: 800; margin: 0 0 .25rem; position: relative; letter-spacing: -.005rem;}
#content > div > div > h4 {font-size: 1.75rem; font-weight: 200; line-height: 3.25rem;}
@media only screen and (min-width: 1024px) {
#content {}
}
/* ================================
Quickview
================================ */
#quickview {background-color: rgb(250, 250, 250); text-align: center;}
#quickview > div {max-width: 1170px;}
#quickview > div > div {}
#quickview > div > div > h2 {font-size: 1.5rem; font-weight: 600;}
#quickview > div > div > ul {display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; justify-content: center; list-style: none; padding: 1rem 0 0;}
#quickview > div > div > ul::after {clear: both; content: ""; display: table;}
#quickview > div > div > ul > li {display: flex; margin: .5rem; overflow: hidden; position: relative; width: calc(100% - 1rem);}
#quickview > div > div > ul > li > div {display: block; height: 100%; text-align: center; width: 100%; z-index: 5;}
#quickview > div > div > ul > li > div > div {clear: both; display: block;}
#quickview > div > div > ul > li > div .thumb {}
#quickview > div > div > ul > li > div .thumb i {font-size: 40px; height: 40px; line-height: 40px;}
#quickview > div > div > ul > li > div .content {}
#quickview > div > div > ul > li > div .content h5 {font-size: 15px;}
#quickview > div > div > ul > li > div .content span {display: block; font-size: .85rem;}
@media only screen and (min-width: 1024px) {
#quickview {}
#quickview > div > div > ul > li {width: calc(33.33333% - 1rem);}
}
/* ================================
About
================================ */
#about {background-color: rgb(255, 255, 255);}
#about > div {}
#about > div > div {}
#about > div > div > h3 {font-size: 2rem; font-weight: 200; line-height: 1.2; position: relative;}
#about > div > div > h4 {font-size: 1rem; font-weight: 800; line-height: 3.25rem; margin-top: 0;}
@media only screen and (min-width: 1024px) {
#about {}
}
/* ================================
About Story
================================ */
#about-story {background-color: rgb(250, 250, 250);}
#about-story > div {}
#about-story > div > div {}
#about-story > div > div > h3 {font-size: 2rem; font-weight: 200; line-height: 1.2; position: relative;}
#about-story > div > div > h4 {font-size: 1rem; font-weight: 800; line-height: 3.25rem; margin-top: 0;}
@media only screen and (min-width: 1024px) {
#about-story {}
}
/* ================================
About Hero
================================ */
#about-hero {background-color: rgb(65, 85, 100); border: none; color: rgb(255, 255, 255); height: 400px; text-align: center;}
#about-hero > div {max-width: 100%; padding: 0;}
#about-hero > div > div {padding: 0;}
.hero-block {position: relative;}
.hero-block::after {clear: both; content: ""; display: table;}
.hero-block > div {background-size: cover;}
.hero-block-primary {border-bottom: 1px solid rgb(255, 255, 255); height: 250px; width: 100%;}
.hero-block-secondary {height: 150px; position: relative; width: 100%;}
.hero-block-secondary::after {clear: both; content: ""; display: table;}
.hero-block-secondary > div {background-size: cover; height: 150px; float: left; overflow: hidden; position: relative; width: 50%;}
.hero-block-secondary > div:last-of-type {border-left: 1px solid rgb(255, 255, 255);}
@media only screen and (min-width: 1024px) {
#about-hero {height: 520px;}
.hero-block-primary {border-right: 1px solid rgb(255, 255, 255); border: none; float: left; height: 520px; width: 66%;}
.hero-block-secondary {background-size: cover; border: none; float: right; height: 520px; width: 34%;}
.hero-block-secondary > div {background-size: cover; border: none !important; float: none; height: 260px; position: relative; width: 100%;}
.hero-block-secondary > div:last-of-type {border-top: 1px solid rgb(255, 255, 255);}
}
/* ================================
Blog
================================ */
#blog {background-color: rgb(250, 250, 250);}
#blog > div {}
#blog > div > div {}
#blog > div > div > h3 {font-size: 2rem; font-weight: 800; line-height: 1.2; position: relative;}
#blog > div > div > h4 {font-size: 1.75rem; font-weight: 200; line-height: 3.25rem; margin-top: 1.75rem;}
#blog > div > div > div {color: rgb(255, 255, 255); display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-pack: center; justify-content: center; list-style: none; padding: 0;}
#blog > div > div > div::after {clear: both; content: ""; display: table;}
#blog > div > div > div > article {background-color: rgb(65, 85, 100); border-radius: 2px; display: flex; margin: 0 .5rem .5rem 0; height: 25rem; overflow: hidden; position: relative; width: calc(100% - .5rem);}
#blog > div > div > div > article:hover {box-shadow: 0 0 10px 1px rgba(0, 0, 0, .085);}
#blog > div > div > div > article > div {display: block; height: 100%; text-align: left; width: 100%; z-index: 5;}
#blog > div > div > div > article > .media {background-position: center; background-repeat: no-repeat; background-size: cover; height: 100%; left: 0; opacity: .25; position: absolute; top: 0; width: 100%; z-index: 1;}
#blog > div > div > div > article > div > a {cursor: pointer; height: 100%; left: 0; position: absolute; top: 0; width: 100%;}
#blog heading, #blog subblock {box-sizing: border-box; display: block;}
#blog heading {left: 0; margin: 0 2.5rem; position: relative; transform: translate3d(0,-50%,0); transition: transform .3s,top .3s; top: 50%; will-change: transform,top;}
#blog article:hover heading {top: 2.5rem; transform: translate3d(0,0,0); transition: transform .3s,top .3s;}
#blog heading h5 {font-size: 1rem; font-weight: 200; margin: 0 0 .5rem; padding: 0 0 0 1.25rem;}
#blog heading h5::before {content: ""; display: block; font-family: 'simple-line-icons'; left: 0; line-height: inherit; position: absolute; top: 0;}
#blog .rocket heading h5::before {content: "\e05c";}
#blog .bolt heading h5::before {content: "\e020";}
#blog .layers heading h5::before {content: "\e034";}
#blog .mustache heading h5::before {content: "\e014";}
#blog .fire heading h5::before {content: "\e01c";}
#blog .mustache heading h5::before {content: "\e014";}
#blog .mustache heading h5::before {content: "\e014";}
#blog .mustache heading h5::before {content: "\e014";}
#blog heading h3 {font-size: 2rem; font-weight: 300; line-height: 1.2; margin: 0 0 1rem;}
#blog subblock {bottom: 0; font-size: 1rem; opacity: 0; padding: 2.5rem 5.5rem 1rem 4.5rem; position: relative; transform: translate3d(0,100%,0); transition: opacity .4s,transform .4s; width: 100%; will-change: opacity,transform;}
#blog article:hover subblock {opacity: 1; transform: translateY(0); transition: opacity .4s,transform .4s;}
#blog subblock::before {border-left: .1875rem solid rgb(255, 255, 255); height: 200%; left: 2.5rem; position: absolute; transform: translateZ(0);}
#blog article:hover subblock > a {text-decoration: underline;}
@media only screen and (min-width: 1024px) {
#blog {}
#blog > div > div > div > article {width: calc(33.33333% - .5rem);}
}
/* ================================
Post Stage
================================ */
#post-stage {background-color: rgb(0, 135, 255); overflow: hidden;}
#post-stage > div {height: 100%; max-width: none; padding: 0; width: 100%;}
#post-stage > div > div {height: 100%; width: 100%;}
#post-stage > div > div > ul {height: 100%; list-style: none; width: 100%;}
#post-stage > div > div > ul > li {background-position: center; background-repeat: no-repeat; background-size: cover; display: block; height: 100%; position: relative; width: 100%; z-index: 5;}
#post-stage > div > div > ul > li > div {display: table; height: 100%; table-layout: fixed; width: 100%;}
#post-stage > div > div > ul > li > div > div {color: rgb(255, 255, 255); display: table-cell; padding: 80px 30px 0; vertical-align: bottom; width: 100%;}
#post-stage > div > div > ul > li > div > div > div {margin: auto; max-width: 1170px; padding: 30px 0 0;}
#post-stage heading, #post-stage subblock, #post-stage action, #post-stage postdetails {display: block;}
#post-stage heading {font-size: 1rem; font-weight: 200;}
#post-stage subblock {font-size: 2rem; font-weight: 300; line-height: 1.2;}
#post-stage action {margin: 30px 0 0;}
#post-stage action > .button {border-color: rgb(255, 255, 255); color: rgb(255, 255, 255);}
#post-stage action > .button:focus, #post-stage action > .button:hover {background: rgb(255, 255, 255); border-color: transparent; color: rgb(125, 125, 125);}
#post-stage postdetails {margin: 1rem 0 0 0; min-height: 8rem; padding: 0;}
#post-stage postdetails date {font-style: italic; font-weight: 300; font-size: 1.125rem; display: block; padding-bottom: .5rem;}
#post-stage postdetails ul {font-size: .85rem; list-style: none; text-align: left;}
#post-stage postdetails ul::after {clear: both; content: ""; display: table;}
#post-stage postdetails ul > li {display: inline-block; margin: 0 .5rem 0 0; padding: 0 1rem 0 0; position: relative;}
#post-stage postdetails ul > li::after {content: " • "; display: block; line-height: 1; margin: 0 0 0 .5rem; position: absolute; right: 0; top: 0;}
#post-stage postdetails ul > li:last-of-type {margin: 0;}
#post-stage postdetails ul > li:last-of-type:after {display: none;}
#post-stage postdetails ul > li > a {box-sizing: border-box; display: block; line-height: 1; padding: 0;}
#post-stage postdetails ul > li > a:hover {text-decoration: underline;}
#post-stage postdetails h6 {padding: 1rem 0;}
#post-stage postdetails h6 > a {box-sizing: border-box; display: block; font-size: .85rem; line-height: 1;}
/* Post Stage Video */
#post-stage > div > div > ul > li.media {height: 100%; left: 0; opacity: .25; position: absolute; top: 0; width: 100%; z-index: 1;}
#post-stage > div > div > ul > li.media > * {min-height: 100%; min-width: 100%;}
#post-stage > div > div > ul > li.media video {display: none;}
@media only screen and (min-width: 1024px) {
#post-stage {height: 50vh;}
#post-stage > div > div > ul > li > div > div > div {padding: 30px 30px 0;}
#post-stage > div > div > ul > li.media video {display: block;}
}
/* ================================
Post
================================ */
#post {}
#post > div {}
#post > div > div {}
#post > div > div > h3 {font-size: 2rem; font-weight: 800; line-height: 1.2; position: relative;}
#post > div > div > h4 {font-size: 1.75rem; font-weight: 200; line-height: 3.25rem; margin-top: 1.75rem;}
@media only screen and (min-width: 1024px) {
#post {}
}
/* ================================
Contact
================================ */
#contact {background-color: rgb(255, 255, 255); position: relative;}
#contact > .container {}
#contact > .container > .row {}
#contact > .container > .row > div {display: block; position: relative;}
#contact > .container > .row > div::after {clear: both; content: ""; display: table;}
#contact > .container > .row > div > div {box-sizing: border-box; display: block; float: left; margin-bottom: 30px; vertical-align: top; width: 100%;}
#contact > .container > .row > div > div:last-of-type {margin-bottom: 0;}
#contact > .container > .row > div > div > div {box-sizing: border-box; display: block; margin: 0; padding: 0;}
#contact > .container > .row > div > div > div > ul {margin-top: 30px;}
#contact > .container > .row > div > div > div > ul > li {margin-bottom: 30px;}
#contact > .container > .row > div > div > div > ul > li:last-of-type {margin-bottom: 0;}
#contact > .container > .row > div > div > div > ul > li > h2 {color: rgb(100, 100, 100); font-size: 30px; font-weight: 400; margin-bottom: 15px;}
#contact > .container > .row > div > div > div > ul > li > ol {}
#contact > .container > .row > div > div > div > ul > li > ol > li {margin-bottom: 15px;}
#contact > .container > .row > div > div > div > ul > li > ol > li:last-of-type {margin-bottom: 0;}
#contact > .container > .row > div > div > div > ul > li > ol > li > h3 {color: rgb(100, 100, 100); font-size: 15px; font-weight: 900; line-height: 30px;}
@media only screen and (min-width: 1024px) {
#contact {}
#contact > .container > .row > div > div {margin-bottom: 0; width: 48.75%;}
#contact > .container > .row > div > div:nth-of-type(2) {margin-left: 2.5%;}
}
/* ================================
Contact Form
================================ */
.contact {background-color: rgb(255, 255, 255); box-sizing: border-box; border-radius: 4px; margin: 0; overflow: hidden; padding: 0; position: relative; text-align: left; width: 100%;}
.contact::after {clear: both; content: ""; display: table;}
.contact fieldset {box-sizing: border-box; display: inline-block; float: left; vertical-align: text-bottom; width: 100%;}
.contact fieldset:last-of-type {margin: 0;}
.contact fieldset > h3 {display: block; font-weight: 300; font-size: 1em; font-weight: 400; line-height: 1.5em; margin-bottom: 1.25em;}
.contact fieldset > ul {list-style: none; position: relative;}
.contact fieldset > ul::after {clear: both; content: ""; display: table;}
.contact fieldset > ul > li {display: block; margin: 0 0 10px; width: 100%;}
.contact fieldset > ul > li.additional {margin-bottom: 20px;}
.contact fieldset > ul > li > label {display: block; position: relative; width: 100%;}
.contact fieldset > ul > li > label::after {clear: both; content: ""; display: table;}
.contact fieldset > ul > li > label > .formlabel {display: block; font-size: 1em; font-weight: 400; line-height: 35px; margin-bottom: 0;}
.contact fieldset > ul > li > label > .formlabel > img {border: 0; display: inline-block; float: right;}
.contact fieldset > ul > li > label > .formcontrol {background: rgb(255, 255, 255); border: 2px solid rgb(205, 205, 205); border-radius: 4px; color: inherit; line-height: 10px; margin-bottom: 0; padding: 10px; transition: 0.2s linear; -webkit-appearance: none; width: 100%;}
.contact fieldset > ul > li > label > .formcontrol:focus {border-color: rgb(0, 135, 255);}
.contact fieldset > ul > li > label > .button {border-color: rgb(205, 205, 205); color: rgb(205, 205, 205); line-height: 16px; margin: 0; width: 100%;}
@media only screen and (min-width: 1024px) {
.contact {width: 100%;}
.contact fieldset {width: calc(100% - 0px);}
.contact fieldset > ul > li {display: inline-block; float: left;}
/* Desktop List */
.contact fieldset > ul > li.meta {display: none; visibility: hidden;}
.contact fieldset > ul > li.name {margin: 0 0 10px 0; width: calc(100% - 0px);}
.contact fieldset > ul > li.email {margin: 0 0 10px; width: calc(100% - 0px);}
.contact fieldset > ul > li.company {margin: 0 0 10px 0; width: calc(100% - 0px);}
.contact fieldset > ul > li.position {margin: 0 0 10px; width: calc(100% - 0px);}
.contact fieldset > ul > li.phone {margin: 0 20px 10px 0; width: calc(75% - 20px);}
.contact fieldset > ul > li.ext {margin: 0 0 10px; width: calc(25% - 0px);}
.contact fieldset > ul > li.additional {margin: 0 0 20px; width: calc(100% - 0px);}
.contact fieldset > ul > li.send {margin: 0; width: calc(100% - 0px);}
}
/* ================================
Social
================================ */
#social {background-color: rgb(250, 250, 250); text-align: center;}
#social > div {max-width: 50rem;}
#social > div > div {}
#social > div > div > h5 {font-size: 1.25rem; font-weight: 200; line-height: 3.25rem; margin-bottom: .5rem;}
#social > div > div > ul {list-style: none; margin: auto; text-align: center;}
#social > div > div > ul::after {clear: both; content: ""; display: table;}
#social > div > div > ul > li {display: inline-block; margin: .25rem 0 0; vertical-align: top;}
#social > div > div > ul > li > a {background-color: rgb(225, 225, 225); border-radius: 2px; color: rgb(125, 125, 125); display: block; height: 50px; line-height: 50px; min-width: 50px; position: relative;}
#social > div > div > ul > li > a::after {display: block; font-family: 'FontAwesome'; height: 100%; left: 0; line-height: inherit; position: absolute; text-align: center; top: 0; width: 50px;}
#social > div > div > ul > li > a:hover:after {color: rgb(65, 185, 145);}
#social > div > div > ul > li > a > span {display: inline-block; font-size: 1rem; padding: 0 30px 0 50px}
#social > div > div > ul > li a.facebook {}
#social > div > div > ul > li a.facebook::after {content: "\f09a";}
#social > div > div > ul > li a.twitter {}
#social > div > div > ul > li a.twitter::after {content: "\f099";}
#social > div > div > ul > li a.linkedin {}
#social > div > div > ul > li a.linkedin::after {content: "\f0e1";}
#social > div > div > ul > li a.link {}
#social > div > div > ul > li a.link::after {content: "\f0c1";}
@media only screen and (min-width: 1024px) {
#social {}
}
/* ================================
Preview
================================ */
#preview {background-color: rgb(65, 85, 100); overflow: hidden;}
#preview > div {height: 100%; max-width: none; padding: 0; width: 100%;}
#preview > div > div {height: 100%; width: 100%;}
#preview > div > div > ul {height: 100%; list-style: none; width: 100%;}
#preview > div > div > ul > li {background-position: center; background-repeat: no-repeat; background-size: cover; display: block; height: 100%; position: relative; width: 100%; z-index: 5;}
#preview > div > div > ul > li > a {cursor: pointer; display: block; padding: 5rem 30px;}
#preview > div > div > ul > li > a > div {display: table; height: 100%; table-layout: fixed; width: 100%;}
#preview > div > div > ul > li > a > div > div {color: rgb(255, 255, 255); display: table-cell; padding: 30px; vertical-align: middle; width: 100%;}
#preview > div > div > ul > li > a > div > div > div {margin: auto; max-width: 1110px;}
#preview heading, #preview subblock, #preview action {display: block;}
#preview heading {font-family: "open-sans",sans-serif; font-size: 1rem; font-weight: 200;}
#preview subblock {font-family: "open-sans",sans-serif; font-size: 2rem; font-weight: 300; line-height: 1.75;}
#preview subblock > span {clear: both; display: block;}
#preview subblock > span > span {border-bottom: 3px solid rgb(65, 185, 145);}
#preview action {margin: 30px 0 0;}
#preview action > .button {border-color: rgb(255, 255, 255); color: rgb(255, 255, 255);}
#preview action > .button:focus, #preview action > .button:hover {background: rgb(255, 255, 255); border-color: transparent; color: rgb(65, 85, 100);}
/* Stage Video */
#preview > div > div > ul > li.media {height: 100%; left: 0; opacity: .25; position: absolute; top: 0; width: 100%; z-index: 1;}
#preview > div > div > ul > li.media > * {min-height: 100%; min-width: 100%;}
#preview > div > div > ul > li.media video {display: none;}
@media only screen and (min-width: 1024px) {
#preview {}
#preview subblock {font-size: 2rem; line-height: 1.5;}
#preview > div > div > ul > li.media video {display: block;}
}
/* ================================
Error
================================ */
#error {background-color: rgb(65, 85, 100); height: 100vh; overflow: hidden; text-align: center;}
#error > div {height: 100%; max-width: none; padding: 0; width: 100%;}
#error > div > div {height: 100%; width: 100%;}
#error > div > div > ul {height: 100%; list-style: none; width: 100%;}
#error > div > div > ul > li {background-position: center; background-repeat: no-repeat; background-size: cover; display: block; height: 100%; position: relative; width: 100%; z-index: 5;}
#error > div > div > ul > li > div {display: table; height: 100%; table-layout: fixed; width: 100%;}
#error > div > div > ul > li > div > div {color: rgb(255, 255, 255); display: table-cell; padding: 80px 30px; vertical-align: middle; width: 100%;}
#error > div > div > ul > li > div > div > div {margin: auto; max-width: 1110px;}
#error errorblock, #error heading, #error subblock, #error action {display: block;}
#error errorblock {}
#error heading {font-family: "ff-nuvo-web-pro",sans-serif; font-size: 1.25rem; font-weight: 800; margin: 0 0 .25rem; position: relative; letter-spacing: -.005rem;}
#error subblock {font-family: "open-sans",sans-serif; font-size: 1.75rem; font-weight: 200; line-height: 3.25rem;}
#error subblock > span {clear: both; display: block;}
#error subblock > span > span {border-bottom: 3px solid rgb(65, 185, 145);}
#error action {margin: 30px 0 0;}
#error action > .button {border-color: rgb(255, 255, 255); color: rgb(255, 255, 255);}
#error action > .button:focus, #error action > .button:hover {background: rgb(255, 255, 255); border-color: transparent; color: rgb(65, 85, 100);}
/* error Video */
#error > div > div > ul > li.media {height: 100%; left: 0; opacity: .25; position: absolute; top: 0; width: 100%; z-index: 1;}
#error > div > div > ul > li.media > * {min-height: 100%; min-width: 100%;}
#error > div > div > ul > li.media video {display: none;}
@media only screen and (min-width: 1024px) {
#error {}
#error subblock {font-size: 1.75rem; line-height: 1.5;}
#error > div > div > ul > li.media video {display: block;}
}
@media only screen and (max-width: 520px) {
#error errorblock {}
}
/* ================================
Footer Components
================================ */
footer {font-size: 12px; text-align: center;}
footer > div {padding: 30px; position: relative;}
footer > div::after {clear: both; content: ""; display: table;}
footer > div > div {display: inline-block; float: left; line-height: 20px; width: 100%;}
footer > div > div > ol {font-weight: 400; list-style: none; position: relative;}
footer > div > div > ol::after {clear: both; content: ""; display: table;}
footer > div > div > ol > li {display: inline-block; margin: 0 .5rem 0 0; padding: 0 1rem 0 0; position: relative;}
footer > div > div > ol > li:last-of-type {margin: 0; padding: 0;}
footer > div > div > ol > li::after {content: " • "; display: block; position: absolute; right: 0; top: 0;}
footer > div > div > ol > li:last-of-type:after {display: none;}
footer > div > div > ol > li > a {display: inline-block;}
footer > div > div > ol > li > a:hover {color: rgb(0, 135, 255);}
footer > div > div > ul {height: 20px; margin: .5rem 0 0;}
footer > div > div > ul > li {display: inline-block;}
footer > div > div > ul > li > a {color: inherit; display: block; height: 20px; line-height: 20px; position: relative; text-decoration: none; width: 20px;}
footer > div > div > ul > li > a:hover {color: rgb(0, 135, 255);}
footer > div > div > ul > li > a::after {display: block; font-family: FontAwesome; height: 20px; line-height: 20px; position: absolute; right: 0; text-align: center; top: 0; width: 20px;}
footer > div > div > ul > li > .facebook::after {content: "\f09a";}
footer > div > div > ul > li > .twitter::after {content: "\f099";}
footer > div > div > ul > li > .instagram::after {content: "\f16d";}
footer > div > div > ul > li > .linkedin::after {content: "\f0e1";}
@media only screen and (min-width: 1024px) {
footer {}
footer > div > div {text-align: left; width: 50%;}
footer > div > div > ul {margin: 0; text-align: right;}
}