@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,800,800italic");
#page-wrapper, input, select, textarea { color: #fff; letter-spacing: 0.075em; line-height: 1.65em; font-family: "Open Sans", Helvetica, sans-serif; font-size: 15pt; font-weight: 400; }

@media screen and (max-width: 1400px) { #page-wrapper, input, select, textarea { font-size: 13pt; } }

@media screen and (max-width: 1200px) { #page-wrapper, input, select, textarea { font-size: 12pt; } }

@media screen and (max-width: 768px) { #page-wrapper, input, select, textarea { letter-spacing: 0.0375em; font-size: 11pt; } }

#page-wrapper a.text_link { -moz-transition: color 0.2s ease, border-bottom-color 0.2s ease; -webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease; -ms-transition: color 0.2s ease, border-bottom-color 0.2s ease; color: inherit; text-decoration: none; border-bottom: dotted 1px; transition: color 0.2s ease, border-bottom-color 0.2s ease; }

#page-wrapper a:hover { border-bottom-color: transparent; }

#page-wrapper p { margin: 0 0 2em 0; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 1em 0; color: #fff; text-transform: uppercase; letter-spacing: 0.225em; line-height: 1em; font-weight: 800; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; }

h2 { line-height: 1.75em; font-size: 1.35em; }

@media screen and (max-width: 768px) { h2 { line-height: 1.65em; font-size: 1.1em; } }

.wrapper { padding: 6em 0 13em 0; }

.wrapper > .inner { width: 55em; margin: 0 auto; }

@media screen and (max-width: 992px) { .wrapper > .inner { width: 97%; } }

.wrapper.alt { padding: 0; }

#banner { -moz-flex-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; position: relative; flex-direction: column; justify-content: center; height: 100vh; min-height: 35em; cursor: default; overflow: hidden; }

#banner h2 { -moz-transform: scale(1); -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease; -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease; -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease; display: inline-block; position: relative; z-index: 1; padding: 0.35em 1em; opacity: 1; font-size: 1.75em; transition: transform 0.5s ease, opacity 0.5s ease; transform: scale(1); }

#banner h2:before, #banner h2:after { -moz-transition: width 0.85s ease; -webkit-transition: width 0.85s ease; -ms-transition: width 0.85s ease; -moz-transition-delay: 0.25s; -webkit-transition-delay: 0.25s; -ms-transition-delay: 0.25s; transition-delay: 0.25s; display: block; position: absolute; width: 100%; height: 2px; background: #fff; content: ""; transition: width 0.85s ease; }

#banner h2:before { top: 0; left: 0; }

#banner h2:after { right: 0; bottom: 0; }

#banner p { letter-spacing: 0.2em; }

#banner p a { color: inherit; }

#banner p.text { display: inline-block; text-align: left; }

#banner .more { -moz-transition: -moz-transform 0.75s ease, opacity 0.75s ease; -webkit-transition: -webkit-transform 0.75s ease, opacity 0.75s ease; -ms-transition: -ms-transform 0.75s ease, opacity 0.75s ease; -moz-transition-delay: 3.5s; -webkit-transition-delay: 3.5s; -ms-transition-delay: 3.5s; transition-delay: 3.5s; -moz-transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); position: absolute; z-index: 1; left: 50%; bottom: 0; width: 16em; height: 8.5em; margin-left: -8.5em; padding-left: 0.225em; color: inherit; opacity: 1; text-align: center; text-transform: uppercase; letter-spacing: 0.225em; font-size: 0.8em; border: none; outline: 0; transition: transform 0.75s ease, opacity 0.75s ease; transform: translateY(0); }

#banner .more:after { display: block; position: absolute; left: 50%; bottom: 4em; width: 1.5em; height: 1.5em; margin: 0 0 0 -0.75em; background-image: url("/static/main/image/arrow.svg"); background-position: center; background-repeat: no-repeat; background-size: contain; content: ""; }

#banner:after { pointer-events: none; -moz-transition: opacity 1.5s ease-in-out; -webkit-transition: opacity 1.5s ease-in-out; -ms-transition: opacity 1.5s ease-in-out; -moz-transition-delay: 0.6s; -webkit-transition-delay: 0.6s; -ms-transition-delay: 0.6s; transition-delay: 0.6s; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #2e3842; opacity: 0; content: ""; transition: opacity 1.5s ease-in-out; }

body.is-preload #banner h2 { -moz-transform: scale(0.95); -webkit-transform: scale(0.95); -ms-transform: scale(0.95); opacity: 0; transform: scale(0.95); }

body.is-preload #banner h2:before, body.is-preload #banner h2:after { width: 0; }

body.is-preload #banner .more { -moz-transform: translateY(8.5em); -webkit-transform: translateY(8.5em); -ms-transform: translateY(8.5em); opacity: 0; transform: translateY(8.5em); }

body.is-preload #banner:after { opacity: 1; }

@media screen and (max-width: 768px) { #banner { height: auto; min-height: 0; padding: 7em 3em 5em 3em; } #banner h2 { font-size: 1.25em; } #banner br { display: none; } #banner .more { display: none; } }

body.landing #page-wrapper { padding-top: 0; background-attachment: fixed; background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/static/images/site_background.png"); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/static/images/site_background.png"); background-image: linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/static/images/site_background.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; }

.fade-up { animation-name: fade-up-anime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; }

@keyframes fade-up-anime { from { opacity: 0;
    transform: translateY(100px); }
  to { opacity: 1;
    transform: translateY(0); } }

.delay-time-button1 { animation-delay: 1s; }

.delay-time-button2 { animation-delay: 1.2s; }

.delay-time-button3 { animation-delay: 1.4s; }

.btn-light:hover { background-color: #ccc; }

.btn-success:hover { outline-style: solid; outline-width: 2px; outline-color: lightgreen; background-color: #21af6d; }
