html {
box-sizing: border-box
}
*,
*:before,
*:after {
box-sizing: inherit
}
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent
}
a:active,
a:hover {
outline: 0
}
::-moz-focus-inner {
border: 0;
padding: 0
}
img,
video,
audio {
max-width: 100%
}
img,
video {
height: auto
}
.wrapperz {
padding-top: 25px;
/*margin-left: calc(100%);*/
}
@font-face {
font-family: 'brandon_grotesquebold';
src: url("https//prod.newfrontierdata.com/wp-content/themes/mobilz/fonts/brandon_bld-webfont.woff2") format("woff2"), url("fonts/brandon_bld-webfont.woff") format("woff");
font-weight: normal;
font-style: normal
}
@font-face {
font-family: 'brandon_grotesquebold_italic';
src: url("fonts/brandon_bld_it-webfont.woff2") format("woff2"), url("fonts/brandon_bld_it-webfont.woff") format("woff");
font-weight: normal;
font-style: normal
}
@font-face {
font-family: 'brandon_grotesqueblack';
src: url("fonts/brandon_blk-webfont.woff2") format("woff2"), url("fonts/brandon_blk-webfont.woff") format("woff");
font-weight: normal;
font-style: normal
}
@font-face {
font-family: 'brandon_grotesqueblack_italic';
src: url("fonts/brandon_blk_it-webfont.woff2") format("woff2"), url("fonts/brandon_blk_it-webfont.woff") format("woff");
font-weight: normal;
font-style: normal
}
@font-face {
font-family: 'brandon_grotesquelight';
src: url("fonts/brandon_light-webfont.woff2") format("woff2"), url("fonts/brandon_light-webfont.woff") format("woff");
font-weight: normal;
font-style: normal
}
@font-face {
font-family: 'brandon_grotesquelight_italic';
src: url("fonts/brandon_light_it-webfont.woff2") format("woff2"), url("fonts/brandon_light_it-webfont.woff") format("woff");
font-weight: normal;
font-style: normal
}
@font-face {
font-family: 'brandon_grotesquemedium';
src: url("fonts/brandon_med-webfont.woff2") format("woff2"), url("fonts/brandon_med-webfont.woff") format("woff");
font-weight: normal;
font-style: normal
}
@font-face {
font-family: 'brandon_grotesqueMdIt';
src: url("fonts/brandon_med_it-webfont.woff2") format("woff2"), url("fonts/brandon_med_it-webfont.woff") format("woff");
font-weight: normal;
font-style: normal
}
@font-face {
font-family: 'brandon_grotesque_regularRg';
src: url("fonts/brandon_reg-webfont.woff2") format("woff2"), url("fonts/brandon_reg-webfont.woff") format("woff");
font-weight: normal;
font-style: normal
}
@font-face {
font-family: 'brandon_grotesqueRgIt';
src: url("fonts/brandon_reg_it-webfont.woff2") format("woff2"), url("fonts/brandon_reg_it-webfont.woff") format("woff");
font-weight: normal;
font-style: normal
}
@font-face {
font-family: 'brandon_grotesquethin';
src: url("fonts/brandon_thin-webfont.woff2") format("woff2"), url("fonts/brandon_thin-webfont.woff") format("woff");
font-weight: normal;
font-style: normal
}
@font-face {
font-family: 'brandon_grotesquethin_italic';
src: url("fonts/brandon_thin_it-webfont.woff2") format("woff2"), url("fonts/brandon_thin_it-webfont.woff") format("woff");
font-weight: normal;
font-style: normal
}*/
body {
font-family: "brandon_grotesque_regularRg", "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 24px;
font-size: 16px;
color: #333;
background-color: #fff
}
a {
color: #255bbd
}
a:hover {
color: #f34248
}
h1.title,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "brandon_grotesquebold", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
text-rendering: optimizeLegibility;
color: #000;
margin-bottom: 6px
}
h1.title {
font-size: 60px;
line-height: 64px
}
h1,
.h1 {
font-size: 48px;
line-height: 52px
}
h2,
.h2 {
font-size: 36px;
line-height: 40px
}
h3,
.h3 {
font-size: 24px;
line-height: 32px
}
h4,
.h4 {
font-size: 18px;
line-height: 24px
}
h5,
.h5 {
font-size: 16px;
line-height: 24px
}
h6,
.h6 {
font-size: 12px;
line-height: 20px;
text-transform: uppercase;
letter-spacing: 0.05em
}
p+h2,
p+h3,
p+h4,
p+h5,
p+h6,
ul+h2,
ul+h3,
ul+h4,
ul+h5,
ul+h6,
ol+h2,
ol+h3,
ol+h4,
ol+h5,
ol+h6,
dl+h2,
dl+h3,
dl+h4,
dl+h5,
dl+h6,
blockquote+h2,
blockquote+h3,
blockquote+h4,
blockquote+h5,
blockquote+h6,
hr+h2,
hr+h3,
hr+h4,
hr+h5,
hr+h6,
pre+h2,
pre+h3,
pre+h4,
pre+h5,
pre+h6,
table+h2,
table+h3,
table+h4,
table+h5,
table+h6,
form+h2,
form+h3,
form+h4,
form+h5,
form+h6,
figure+h2,
figure+h3,
figure+h4,
figure+h5,
figure+h6 {
margin-top: 32px
}
.subheading {
margin-top: -8px;
margin-bottom: 8px;
font-weight: 300
}
ul,
ol,
ul ul,
ol ol,
ul ol,
ol ul {
margin: 0 0 0 24px
}
ol ol li {
list-style-type: lower-alpha
}
ol ol ol li {
list-style-type: lower-roman
}
nav ul,
nav ol {
margin: 0;
list-style: none
}
dl dt {
font-weight: 700
}
dd {
margin-left: 24px
}
p,
blockquote,
hr,
pre,
ol,
ul,
dl,
table,
fieldset,
figure,
address,
form {
margin-bottom: 16px
}
hr {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
margin-top: -1px
}
blockquote {
padding-left: 24px;
border-left: 2px solid rgba(0, 0, 0, 0.125);
font-style: italic;
color: rgba(0, 0, 0, 0.65)
}
pre,
code,
samp,
var,
kbd {
font-family: Consolas, Monaco, "Courier New", monospace;
font-size: 14px
}
pre {
color: rgba(0, 0, 0, 0.85);
background: #f8f8f8;
padding: 20px;
border-radius: 4px;
line-height: 20px;
overflow: none;
white-space: pre-wrap
}
.small,
time,
cite,
small,
figcaption {
font-size: 12px;
line-height: 16px
}
cite {
color: rgba(0, 0, 0, 0.5)
}
figcaption {
font-style: italic;
padding-top: 4px;
padding-bottom: 4px
}
figure figcaption {
position: relative;
top: -4px
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted rgba(0, 0, 0, 0.5);
cursor: help
}
mark,
code,
samp,
kbd {
padding: 4px 8px 2px 8px;
display: inline-block;
line-height: 1;
border-radius: 4px;
color: rgba(0, 0, 0, 0.85)
}
pre code {
font-size: 100%;
white-space: pre;
padding: 0;
background: none;
line-height: 24px
}
mark {
background-color: #fed443
}
code {
background: #f4f4f4
}
var {
color: rgba(0, 0, 0, 0.6);
font-style: normal
}
strong,
b {
line-height: 1
}
samp {
color: #fff;
background: #5a89df
}
kbd {
border: 1px solid rgba(0, 0, 0, 0.1)
}
sub,
sup {
font-size: x-small;
line-height: 0;
margin-left: 4px;
position: relative
}
sup {
top: -4px
}
sub {
bottom: -2px
}
.row {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: -2.12766%
}
.row.centered {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center
}
.row.centered .col {
padding-left: 1.06383%;
padding-right: 1.06383%
}
.row.right {
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end
}
.row.bottom {
-ms-flex-align: end;
-webkit-align-items: flex-end;
align-items: flex-end
}
.row.around {
-ms-flex-pack: distribute;
-webkit-justify-content: space-around;
justify-content: space-around
}
.row.between {
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between
}
.row.equal .col {
display: -ms-flexbox;
display: -webkit-flex;
display: flex
}
.row.equal .col>div {
-ms-flex-grow: 1;
-webkit-flex-grow: 1;
flex-grow: 1
}
.row.splice {
margin-left: 0
}
.row.splice .col {
padding-left: 0
}
.col {
-ms-flex-grow: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
-webkit-flex-basis: 0;
-ms-flex-basis: 0;
flex-basis: 0;
max-width: 100%;
padding-left: 2.12766%
}
.col.first {
order: -1
}
.col.last {
order: 1
}
@media (max-width: 960px) {
.col.first-on-small {
order: -1
}
.col.last-on-small {
order: 1
}
}
.pull-right {
margin-left: auto
}
.col-1 {
flex-basis: 8.33333%;
max-width: 8.33333%;
width: 8.33333%
}
.col-2 {
flex-basis: 16.66667%;
max-width: 16.66667%;
width: 16.66667%
}
.col-3 {
flex-basis: 25%;
max-width: 25%;
width: 25%
}
.col-4 {
flex-basis: 33.33333%;
max-width: 33.33333%;
width: 33.33333%
}
.col-5 {
flex-basis: 41.66667%;
max-width: 41.66667%;
width: 41.66667%
}
.col-6 {
flex-basis: 50%;
max-width: 50%;
width: 50%
}
.col-7 {
flex-basis: 58.33333%;
max-width: 58.33333%;
width: 58.33333%
}
.col-8 {
flex-basis: 66.66667%;
max-width: 66.66667%;
width: 66.66667%
}
.col-9 {
flex-basis: 75%;
max-width: 75%;
width: 75%
}
.col-10 {
flex-basis: 83.33333%;
max-width: 83.33333%;
width: 83.33333%
}
.col-11 {
flex-basis: 91.66667%;
max-width: 91.66667%;
width: 91.66667%
}
.col-12 {
flex-basis: 100%;
max-width: 100%;
width: 100%
}
.offset-1 {
margin-left: 8.33333%
}
.offset-2 {
margin-left: 16.66667%
}
.offset-3 {
margin-left: 25%
}
.offset-4 {
margin-left: 33.33333%
}
.offset-5 {
margin-left: 41.66667%
}
.offset-6 {
margin-left: 50%
}
.offset-7 {
margin-left: 58.33333%
}
.offset-8 {
margin-left: 66.66667%
}
.offset-9 {
margin-left: 75%
}
.offset-10 {
margin-left: 83.33333%
}
.offset-11 {
margin-left: 91.66667%
}
.row-layout {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center
}
.col-fluid {
-ms-flex-grow: 1;
-webkit-flex-grow: 1;
flex-grow: 1;
width: 100%
}
@media (max-width: 960px) {
.row-layout {
display: block
}
.col-fixed {
-ms-flex: 1 !important;
-webkit-flex: 1 !important;
flex: 1 !important
}
.row-layout>.col-fixed {
order: 1
}
.row-layout>.col-fluid {
order: 2
}
}
@media (max-width: 960px) {
.row {
margin-left: 0
}
.col:not(th):not(td),
[class^="col-"]:not(th):not(td),
[class*=" col-"]:not(th):not(td) {
flex-basis: 100%;
max-width: 100%;
width: 100%
}
.col {
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
padding-left: 0
}
.pull-right,
[class^="offset-"],
[class*=" offset-"] {
margin-left: 0
}
}
table {
border-collapse: collapse;
border-spacing: 0;
max-width: 100%;
width: 100%;
empty-cells: show;
font-size: 15px
}
th {
text-align: left;
font-weight: 700;
vertical-align: bottom
}
td {
vertical-align: top
}
tr.align-middle td,
td.align-middle {
vertical-align: middle
}
th,
td {
padding: 16px;
padding-bottom: 15px;
border-bottom: 1px solid #eee
}
th:first-child,
td:first-child {
padding-left: 0
}
th:last-child,
td:last-child {
padding-right: 0
}
tfoot th,
tfoot td {
color: rgba(0, 0, 0, 0.5)
}
table.bordered {
margin-top: -1px
}
table.bordered td,
table.bordered th {
border: 1px solid #eee
}
table.striped tr:nth-child(odd) td {
background: #f4f4f4
}
table.bordered td:first-child,
table.bordered th:first-child,
table.striped td:first-child,
table.striped th:first-child {
padding-left: 16px
}
table.bordered td:last-child,
table.bordered th:last-child,
table.striped td:last-child,
table.striped th:last-child {
padding-right: 16px
}
table.flat td,
table.flat th {
border: none;
padding: 0
}
input,
select,
textarea,
fieldset {
font-family: "brandon_grotesque_regularRg", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px
}
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="date"],
input[type="tel"],
input[type="url"],
input[type="password"] {
height: 40px;
padding: 8px 0px;
vertical-align: middle;
-webkit-appearance: none;
background: none;
border-bottom: 1px solid #002941
}
select,
textarea {
display: block;
width: 100%;
line-height: 1.75;
padding: 8px 0px;
border-radius: 2px;
background: none;
border-bottom: 1px solid #002941
}
textarea {
border: 1px solid #002941;
padding: 8px 10px
}
select:not([multiple]) {
cursor: pointer;
height: 40px;
vertical-align: middle
}
label {
vertical-align: middle
}
textarea:focus,
select:focus,
input:focus {
outline: none;
background: none;
border-color: #4c697a
}
textarea:disabled,
select:disabled,
input:disabled,
textarea.disabled,
select.disabled,
input.disabled {
resize: none;
opacity: 0.75;
cursor: default;
font-style: italic;
color: rgba(0, 0, 0, 0.5)
}
fieldset {
padding: 39px 32px;
margin-bottom: 24px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 4px
}
legend {
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
padding: 0 1em;
margin-left: -1em;
top: 2px;
position: relative;
line-height: 0
}
.form {
margin-bottom: 0
}
.form .form-item {
margin-bottom: 24px
}
.form input[type="email"],
.form input[type="number"],
.form input[type="search"],
.form input[type="text"],
.form input[type="date"],
.form input[type="tel"],
.form input[type="url"],
.form input[type="password"],
.form select,
.form textarea {
display: block;
width: 100%
}
.form input.width-50,
.form textarea.width-50,
.form select.width-50 {
width: 50%
}
.form label {
font-size: 16.1px;
color: #022a42;
font-weight: normal;
display: block
}
.form .checkboxes label,
.form label.checkbox {
text-transform: none;
font-weight: normal;
cursor: pointer;
color: inherit;
font-size: 15px
}
.form .checkboxes label {
margin-bottom: 8px
}
.form .checkboxes label:last-child {
margin-bottom: 0
}
.form .checkboxes-inline {
display: block
}
.form .checkboxes-inline label {
font-size: inherit;
color: inherit;
display: inline-block;
margin-right: 16px;
text-transform: none;
font-weight: normal
}
.form span.error,
.form div.error,
.form span.success,
.form div.success {
text-transform: none;
font-weight: normal;
font-size: 12px
}
.form span.error,
.form span.success {
margin-left: .4rem
}
.form-inline textarea,
.form-inline select,
.form-inline input[type="email"],
.form-inline input[type="number"],
.form-inline input[type="search"],
.form-inline input[type="text"],
.form-inline input[type="date"],
.form-inline input[type="tel"],
.form-inline input[type="url"],
.form-inline input[type="password"] {
width: auto;
display: inline-block
}
input.big,
select.big {
font-size: 18px;
height: 40px
}
input.big {
padding: 16px 10px
}
select.big {
padding: 6px 10px
}
.desc {
text-transform: none;
margin-top: 4px;
color: rgba(0, 0, 0, 0.5);
font-size: 12px;
line-height: 20px;
font-weight: normal
}
ul.desc {
margin-bottom: 8px
}
span.desc {
margin-left: 4px;
line-height: 20px
}
input.error,
textarea.error,
select.error {
margin-top: -1px;
background: none;
background-color: rgba(243, 66, 72, 0.1);
border: 1px solid #f34248
}
input.success,
textarea.success,
select.success {
margin-top: -1px;
background: none;
background-color: rgba(96, 174, 77, 0.1);
border: 1px solid #60ae4d
}
.controls {
display: -ms-flexbox;
display: -webkit-flex;
display: flex
}
.controls input {
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
margin-bottom: 0 !important
}
.controls .button,
.controls span {
-ms-flex-shrink: 0;
-webkit-flex-shrink: 0;
flex-shrink: 0
}
.controls span {
font-weight: normal;
background-color: #eee;
padding: 0 12px;
color: #555;
font-size: 12px;
line-height: 40px;
white-space: nowrap
}
.controls .button {
border-radius: 0 4px 4px 0
}
@media (max-width: 960px) {
.form input,
.form textarea,
.form select {
font-size: 16px
}
.form input.width-50,
.form textarea.width-50,
.form select.width-50 {
width: 100%
}
}
.form .row {
margin-bottom: 1.5em
}
button,
.button {
font-family: "brandon_grotesque_regularRg", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: normal;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
display: inline-block;
line-height: 1.125rem;
min-height: 40px;
padding: 10px 28px;
border: 2px solid transparent;
vertical-align: middle;
-webkit-appearance: none;
color: #fff;
background-color: #71c7b0;
border-radius: 4px
}
input.button {
height: auto
}
button:hover,
.button:hover {
outline: none;
color: #fff;
background: #76d3ba;
text-decoration: none
}
button:focus,
.button:focus {
background: #68b9a3
}
.button:disabled,
.button.disabled {
cursor: default;
font-style: normal;
opacity: .5
}
.button:disabled:hover,
.button.disabled:hover {
color: #000;
box-shadow: none
}
.button.outline {
background: none;
color: #71c7b0;
border-color: #71c7b0;
font-weight: normal
}
.button.outline.secondary {
color: #fff;
border-color: #fff
}
.button.outline.secondary:hover {
color: #002941;
background: #fff;
border-color: transparent
}
.button.outline.secondary:focus {
background: #ebebeb
}
.button.outline:hover {
color: #76d3ba;
border-color: #76d3ba;
box-shadow: none
}
.button.outline:disabled:hover,
.button.outline.disabled:hover {
color: rgba(0, 0, 0, 0.8);
border-color: rgba(0, 0, 0, 0.4)
}
.button.small {
font-size: 12px;
min-height: 32px;
padding: 6px 20px
}
.button.small.upper {
font-size: 10px
}
.button.big {
font-size: 15.75px;
min-height: 40px;
padding: 11px 40px
}
.button.big.upper {
font-size: 13px
}
.button.upper {
font-size: 11px
}
.button.primary {
background: #3c74d9;
color: #fff
}
.button.primary:focus,
.button.primary:hover {
color: rgba(255, 255, 255, 0.6)
}
.button.primary:focus:disabled,
.button.primary:focus.disabled,
.button.primary:hover:disabled,
.button.primary:hover.disabled {
color: #fff;
background: #3c74d9
}
.button.primary.outline:hover {
color: rgba(60, 116, 217, 0.6);
border-color: rgba(60, 116, 217, 0.4)
}
.button.primary.outline,
.button.primary.outline:disabled:hover,
.button.primary.outline.disabled:hover {
color: #3c74d9;
border-color: #3c74d9;
background: none
}
.button.inverted {
background: #fff;
color: #000
}
.button.inverted:focus,
.button.inverted:hover {
color: rgba(0, 0, 0, 0.6)
}
.button.inverted:focus:disabled,
.button.inverted:focus.disabled,
.button.inverted:hover:disabled,
.button.inverted:hover.disabled {
color: #000;
background: #fff
}
.button.inverted.outline:hover {
color: rgba(255, 255, 255, 0.6);
border-color: rgba(255, 255, 255, 0.4)
}
.button.inverted.outline,
.button.inverted.outline:disabled:hover,
.button.inverted.outline.disabled:hover {
color: #fff;
border-color: #fff;
background: none
}
.buttons.group {
display: inline-block;
vertical-align: bottom
}
.buttons.group .button {
float: left;
margin-left: -1px;
border-radius: 0
}
.buttons.group .button:first-child {
border-radius: 4px 0 0 4px
}
.buttons.group .button:last-child {
border-radius: 0 4px 4px 0
}
.label {
font-size: 10px;
font-weight: normal;
display: inline;
line-height: 1;
top: -1px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
border-radius: 4px;
position: relative;
vertical-align: middle;
color: #000;
background: #f4f4f4;
padding: 2px 8px;
letter-spacing: .01em
}
.label a,
.label a:hover {
color: #000;
text-decoration: none
}
.label.primary {
background: #3c74d9
}
.label.primary,
.label.primary a {
color: #fff
}
.label.primary.outline {
border-color: #3c74d9
}
.label.primary.outline,
.label.primary.outline a {
color: #3c74d9
}
.label.primary.tag {
background: none
}
.label.primary.tag,
.label.primary.tag a {
color: #3c74d9
}
.label.error {
background: #f34248
}
.label.error,
.label.error a {
color: #fff
}
.label.error.outline {
border-color: #f34248
}
.label.error.outline,
.label.error.outline a {
color: #f34248
}
.label.error.tag {
background: none
}
.label.error.tag,
.label.error.tag a {
color: #f34248
}
.label.success {
background: #60ae4d
}
.label.success,
.label.success a {
color: #fff
}
.label.success.outline {
border-color: #60ae4d
}
.label.success.outline,
.label.success.outline a {
color: #60ae4d
}
.label.success.tag {
background: none
}
.label.success.tag,
.label.success.tag a {
color: #60ae4d
}
.label.warning {
background: #fed443
}
.label.warning,
.label.warning a {
color: #000
}
.label.warning.outline {
border-color: #fed443
}
.label.warning.outline,
.label.warning.outline a {
color: #fed443
}
.label.warning.tag {
background: none
}
.label.warning.tag,
.label.warning.tag a {
color: #fed443
}
.label.inverted {
background: #fff
}
.label.inverted,
.label.inverted a {
color: #000
}
.label.inverted.outline {
border-color: #fff
}
.label.inverted.outline,
.label.inverted.outline a {
color: #fff
}
.label.inverted.tag {
background: none
}
.label.inverted.tag,
.label.inverted.tag a {
color: #fff
}
.label.outline {
background: none;
padding: 1px 7px;
border: 1px solid rgba(0, 0, 0, 0.2)
}
.label.outline,
.label.outline a {
color: rgba(0, 0, 0, 0.65)
}
.badge {
padding: 2px 6px;
border-radius: 24px
}
.badge.outline {
padding: 1px 5px
}
.label.tag {
padding: 0;
background: none;
font-weight: bold;
letter-spacing: .02em
}
.label.tag.primary,
.label.tag.primary a {
color: #3c74d9
}
.label.tag.error,
.label.tag.error a {
color: #f34248
}
.label.tag.success,
.label.tag.success a {
color: #60ae4d
}
.label.tag.warning,
.label.tag.warning a {
color: #fed443
}
.label.tag.inverted,
.label.tag.inverted a {
color: #fff
}
.button:hover .badge {
opacity: .6
}
h6 .label {
top: -3px
}
.alert {
position: relative;
padding: 15px 24px;
padding-right: 40px;
line-height: 20px;
font-size: 14px;
color: #000;
background: #f4f4f4;
border: 1px solid #dbdbdb;
display: block;
font-weight: normal;
border-radius: 4px;
margin-bottom: 24px
}
.alert a {
color: #000;
font-weight: bold
}
.alert a:hover {
-moz-transition: all linear 0.2s;
transition: all linear 0.2s;
color: rgba(0, 0, 0, 0.6)
}
.alert h5 {
margin-bottom: 4px
}
.alert p,
.alert ul,
.alert ol {
margin-bottom: 0
}
.alert .close {
position: absolute;
top: 15px;
right: 8px
}
.alert.primary {
color: #3c74d9;
background-color: rgba(60, 116, 217, 0.15);
border: 1px solid rgba(60, 116, 217, 0.15)
}
.alert.primary a,
.alert.primary h5 {
color: #3c74d9
}
.alert.primary a:hover {
color: #000
}
.alert.error {
color: #f34248;
background-color: rgba(243, 66, 72, 0.15);
border: 1px solid rgba(243, 66, 72, 0.15)
}
.alert.error a,
.alert.error h5 {
color: #f34248
}
.alert.error a:hover {
color: #000
}
.alert.success {
color: #60ae4d;
background-color: rgba(96, 174, 77, 0.15);
border: 1px solid rgba(96, 174, 77, 0.15)
}
.alert.success a,
.alert.success h5 {
color: #60ae4d
}
.alert.success a:hover {
color: #000
}
.alert.warning {
color: #c09501;
background-color: rgba(254, 212, 67, 0.15);
border: 1px solid rgba(254, 212, 67, 0.15);
border-color: rgba(254, 212, 67, 0.5)
}
.alert.warning a,
.alert.warning h5 {
color: #c09501
}
.alert.warning a:hover {
color: #000
}
.message {
display: none;
position: fixed;
border-radius: 4px;
z-index: 500;
top: 16px;
right: 16px;
width: 320px;
line-height: 20px;
font-size: 14px;
padding: 16px 20px;
color: rgba(0, 0, 0, 0.9);
background: #f4f4f4
}
.message .close {
position: absolute;
top: 6px;
right: 6px
}
.message h1,
.message h2,
.message h3,
.message h4,
.message h5,
.message h6 {
color: inherit
}
.message ul,
.message ol {
margin-bottom: 0
}
.message.line {
top: 0;
right: 0;
left: 0;
width: 100%;
max-width: none;
border-radius: 0;
padding-right: 56px
}
.message.line .close {
top: 16px;
right: 16px
}
.message .buttons {
margin-top: 16px
}
.message .buttons a {
display: inline-block;
text-transform: uppercase;
font-size: 12px;
margin-right: 8px
}
.message.line .buttons {
margin-top: 0;
display: inline-block
}
.message.primary {
background: #3c74d9;
color: rgba(255, 255, 255, 0.9)
}
.message.error {
background: #f34248;
color: rgba(255, 255, 255, 0.9)
}
.message.success {
background: #60ae4d;
color: rgba(255, 255, 255, 0.9)
}
.message.warning {
background: #fed443
}
.message.primary a,
.message.error a,
.message.success a {
color: rgba(255, 255, 255, 0.9)
}
.message.primary a:hover,
.message.error a:hover,
.message.success a:hover {
color: rgba(255, 255, 255, 0.7)
}
.tabs {
margin-bottom: 24px;
font-size: 14px
}
.tabs li em,
.tabs li.active a {
color: #000;
border: 1px solid rgba(0, 0, 0, 0.1);
cursor: default;
text-decoration: none;
background: none
}
.tabs em,
.tabs a {
position: relative;
top: 1px;
font-style: normal;
display: block;
padding: 7px 24px;
border: 1px solid transparent;
color: rgba(0, 0, 0, 0.5);
text-decoration: none;
border-top-right-radius: 4px;
border-top-left-radius: 4px
}
.tabs a:hover {
-moz-transition: all linear 0.2s;
transition: all linear 0.2s;
color: #000;
text-decoration: underline;
background-color: #f2f2f2
}
@media (min-width: 960px) {
.tabs ul {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin-top: -1px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}
.tabs li em,
.tabs li.active a {
border-bottom: 1px solid #fff
}
}
.breadcrumb {
font-size: 12px;
margin-bottom: 24px
}
.breadcrumb ul {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center
}
.breadcrumb.centered ul {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center
}
.breadcrumb em,
.breadcrumb a {
font-style: normal;
padding: 0 10px;
display: inline-block;
white-space: nowrap
}
.breadcrumb em {
color: rgba(0, 0, 0, 0.5)
}
.breadcrumb a {
color: #000;
text-decoration: none
}
.breadcrumb a:hover {
-moz-transition: all linear 0.2s;
transition: all linear 0.2s;
color: rgba(0, 0, 0, 0.6);
text-decoration: underline
}
.breadcrumb li:after {
display: inline-block;
content: '/';
color: rgba(0, 0, 0, 0.4)
}
.breadcrumb li:last-child:after {
display: none
}
.breadcrumb li:first-child em,
.breadcrumb li:first-child a {
padding-left: 0
}
.breadcrumb li.active em,
.breadcrumb li.active a {
text-decoration: none;
cursor: text;
color: rgba(0, 0, 0, 0.4)
}
.pagination {
margin: 24px 0;
font-size: 14px
}
.pagination ul {
display: -ms-flexbox;
display: -webkit-flex;
display: flex
}
.pagination.centered ul {
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center
}
.pagination em,
.pagination a {
display: inline-block;
font-style: normal;
padding: 8px 16px;
line-height: 1;
border-radius: 4px;
white-space: nowrap;
border: 1px solid transparent
}
.pagination a {
text-decoration: none;
color: #000
}
.pagination a:hover {
color: rgba(0, 0, 0, 0.5);
background: #f4f4f4
}
.pagination em,
.pagination li.active a {
color: rgba(0, 0, 0, 0.5);
background: #f4f4f4;
cursor: text
}
.pagination.upper {
font-size: 11px
}
.pager em,
.pager a {
border-radius: 24px;
border-color: rgba(0, 0, 0, 0.1)
}
.pager li {
-webkit-flex-basis: 50%;
-ms-flex-basis: 50%;
flex-basis: 50%
}
.pager li.next {
text-align: right
}
.pager.centered li {
-webkit-flex-basis: auto;
-ms-flex-basis: auto;
flex-basis: auto;
margin-left: 4px;
margin-right: 4px
}
.pager.flat em,
.pager.flat a {
border: none;
display: block;
padding: 0
}
.pager.flat a {
font-weight: bold
}
.pager.flat a:hover {
background: none;
text-decoration: underline
}
@media (max-width: 960px) {
.pager.flat ul {
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column
}
.pager.flat li {
-webkit-flex-basis: 100%;
-ms-flex-basis: 100%;
flex-basis: 100%;
margin-bottom: 8px;
text-align: left
}
}
.dropdown {
display: none;
position: absolute;
z-index: 100;
top: 0;
right: 0;
width: 280px;
color: #000;
font-size: 14px;
background: #fff;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
border-radius: 8px;
max-height: 300px;
margin: 0;
padding: 0;
overflow: hidden
}
.dropdown.dropdown-mobile {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-height: none;
border: none
}
.dropdown .close {
margin: 20px auto
}
.dropdown.open {
overflow: auto
}
.dropdown ul {
list-style: none;
margin: 0
}
.dropdown ul li {
border-bottom: 1px solid rgba(0, 0, 0, 0.07)
}
.dropdown ul li:last-child {
border-bottom: none
}
.dropdown ul a {
display: block;
padding: 8px 8px 7px 8px;
text-decoration: none;
color: #000
}
.dropdown ul a:hover {
background: rgba(0, 0, 0, 0.05)
}
.modal-box {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow-x: hidden;
overflow-y: auto;
z-index: 200
}
.modal {
position: relative;
margin: auto;
margin-top: 16px;
padding: 0;
background: #fff;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
border-radius: 8px;
color: #000
}
@media (max-width: 960px) {
.modal input[type="text"],
.modal input[type="password"],
.modal input[type="email"],
.modal input[type="url"],
.modal textarea {
font-size: 16px
}
}
.modal-header {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
padding: 24px 32px;
font-size: 18px;
font-weight: bold;
border-bottom: 1px solid rgba(0, 0, 0, 0.05)
}
.modal-header:empty {
display: none
}
.modal-body {
padding: 36px 56px
}
.modal .close {
line-height: 32.4px;
height: 36px;
width: 36px;
font-size: 36px;
position: absolute;
top: 18px;
right: 16px;
opacity: .3
}
.modal .close:hover {
opacity: 1
}
@media (max-width: 960px) {
.modal-header,
.modal-body {
padding: 24px
}
}
.group:after {
content: "";
display: table;
clear: both
}
.end {
margin-bottom: 0 !important
}
.centered {
margin-left: auto;
margin-right: auto
}
.float-right {
float: right
}
@media (max-width: 960px) {
.float-right {
float: none
}
}
.float-left {
float: left
}
@media (max-width: 960px) {
.float-left {
float: none
}
}
.text-right {
text-align: right
}
.text-center,
.text-centered {
text-align: center
}
.hide {
display: none
}
@media (max-width: 960px) {
.hide-on-small {
display: none !important
}
}
.show-on-small {
display: none !important
}
@media (max-width: 960px) {
.show-on-small {
display: block !important
}
}
@media print {
.hide-on-print {
display: none !important
}
.show-on-print {
display: block !important
}
}
.invisible {
visibility: hidden
}
.visible {
visibility: visible
}
.black {
color: #000
}
.muted {
color: rgba(0, 0, 0, 0.5) !important
}
.soft-muted {
color: rgba(0, 0, 0, 0.7) !important
}
a.muted:hover,
a.soft-muted:hover {
color: #000 !important
}
.error {
color: #f34248
}
.success {
color: #60ae4d
}
.upper {
text-transform: uppercase;
letter-spacing: .08em
}
.normal {
font-weight: normal !important
}
.light {
font-weight: 300 !important
}
.italic {
font-style: italic !important
}
.bold {
font-weight: bold !important
}
.highlight {
background-color: rgba(60, 116, 217, 0.075)
}
.round {
border-radius: 56px
}
input.round {
border-radius: 24px
}
.nowrap,
.nowrap td {
white-space: nowrap
}
.req {
font-weight: bold;
color: #f34248;
font-size: 1.1em;
text-transform: none
}
.close {
font-weight: normal;
text-align: center;
display: inline-block;
cursor: pointer;
color: #000;
text-decoration: none;
opacity: 0.5;
border: none;
line-height: 25.2px;
height: 28px;
width: 28px;
font-size: 28px
}
.close:before {
content: '\00D7'
}
.close:hover {
opacity: 1;
text-decoration: none !important
}
.close.inverted {
color: #fff
}
.close.small {
line-height: 18px;
height: 20px;
width: 20px;
font-size: 20px
}
.close.big {
line-height: 32.4px;
height: 36px;
width: 36px;
font-size: 36px
}
@media (min-width: 960px) {
.fullwidth {
-ms-flex: auto;
-webkit-flex: auto;
flex: auto
}
.fullwidth ul {
display: -ms-flexbox;
display: -webkit-flex;
display: flex
}
.fullwidth li {
-ms-flex: auto;
-webkit-flex: auto;
flex: auto;
text-align: center
}
.fullwidth li em,
.fullwidth li a {
display: block
}
}
.width-100 {
width: 100%
}
.width-50 {
width: 50%
}
@media (max-width: 960px) {
.width-50 {
width: 100% !important
}
}
.fixed {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%
}
.no-scroll {
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100% !important
}
.overlay {
position: fixed;
z-index: 200;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.9)
}
.scrollbar-measure {
position: absolute;
top: -9999px;
width: 50px;
height: 50px;
overflow: scroll
}
.search-icon {
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
font-size: 18px;
width: 16px;
line-height: 1;
font-style: normal;
color: #000;
position: relative;
top: -1px;
font-weight: bold;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg)
}
.search-icon:before {
content: "\26B2"
}
.search-icon.inverted {
color: #fff
}
button .search-icon {
top: 0
}
button:hover .search-icon {
opacity: .6
}
.menu-icon {
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
font-size: 15px;
width: 16px;
line-height: 1;
font-style: normal;
color: #000;
font-weight: normal
}
.menu-icon:before {
content: "\2630"
}
.menu-icon.inverted {
color: #fff
}
button:hover .menu-icon {
opacity: .6
}
.caret {
position: relative;
display: inline-block;
height: 0;
vertical-align: middle;
width: 0;
margin-left: 2px
}
.caret:before {
content: '';
position: absolute;
top: -2px;
left: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent
}
.caret.down:before {
border-top: 4px solid #000
}
.caret.up:before {
border-bottom: 4px solid #000
}
.caret.down.inverted:before {
border-top-color: #fff
}
.caret.up.inverted:before {
border-bottom-color: #fff
}
.button:hover .caret {
opacity: .6
}
.offcanvas {
background: #fff;
position: fixed;
padding: 24px;
height: 100%;
top: 0;
left: 0;
z-index: 300;
overflow-y: scroll
}
.offcanvas .close {
position: absolute;
top: 8px;
right: 8px
}
.offcanvas-left {
border-right: 1px solid rgba(0, 0, 0, 0.1)
}
.offcanvas-right {
left: auto;
right: 0;
border-left: 1px solid rgba(0, 0, 0, 0.1)
}
.offcanvas-push-body {
position: relative
}
@media print {
* {
background: transparent !important;
color: black !important;
box-shadow: none !important;
text-shadow: none !important
}
a,
a:visited {
text-decoration: underline
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid
}
p,
h2,
h3 {
orphans: 3;
widows: 3
}
thead {
display: table-header-group
}
tr,
img {
page-break-inside: avoid
}
img {
max-width: 100% !important
}
h2,
h3,
h4 {
page-break-after: avoid
}
@page {
margin: 0.5cm
}
}
.owl-carousel {
display: none;
width: 100%;
-webkit-tap-highlight-color: transparent;
position: relative;
z-index: 1
}
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y
}
.owl-carousel .owl-stage:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
.owl-carousel .owl-stage-outer {
position: relative;
overflow: hidden;
-webkit-transform: translate3d(0px, 0px, 0px)
}
.owl-carousel .owl-item {
position: relative;
min-height: 1px;
float: left;
-webkit-backface-visibility: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none
}
.owl-carousel .owl-item img {
display: block;
width: 100%;
-webkit-transform-style: preserve-3d
}
.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
display: none
}
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
cursor: pointer;
cursor: hand;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.owl-carousel.owl-loaded {
display: block
}
.owl-carousel.owl-loading {
opacity: 0;
display: block
}
.owl-carousel.owl-hidden {
opacity: 0
}
.owl-carousel.owl-refresh .owl-item {
display: none
}
.owl-carousel.owl-drag .owl-item {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.owl-carousel.owl-grab {
cursor: move;
cursor: grab
}
.owl-carousel.owl-rtl {
direction: rtl
}
.owl-carousel.owl-rtl .owl-item {
float: right
}
.no-js .owl-carousel {
display: block
}
.owl-carousel .animated {
animation-duration: 1000ms;
animation-fill-mode: both
}
.owl-carousel .owl-animated-in {
z-index: 0
}
.owl-carousel .owl-animated-out {
z-index: 1
}
.owl-carousel .fadeOut {
animation-name: fadeOut
}
@keyframes fadeOut {
0% {
opacity: 1
}
100% {
opacity: 0
}
}
.owl-height {
transition: height 500ms ease-in-out
}
.owl-carousel .owl-item .owl-lazy {
opacity: 0;
transition: opacity 400ms ease
}
.owl-carousel .owl-item img.owl-lazy {
transform-style: preserve-3d
}
.owl-carousel .owl-video-wrapper {
position: relative;
height: 100%;
background: #000
}
.owl-carousel .owl-video-play-icon {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
background: url("owl.video.play.png") no-repeat;
cursor: pointer;
z-index: 1;
-webkit-backface-visibility: hidden;
transition: transform 100ms ease
}
.owl-carousel .owl-video-play-icon:hover {
transform: scale(1.3, 1.3)
}
.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
display: none
}
.owl-carousel .owl-video-tn {
opacity: 0;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
transition: opacity 400ms ease
}
.owl-carousel .owl-video-frame {
position: relative;
z-index: 1;
height: 100%;
width: 100%
}
.owl-theme .owl-nav {
margin-top: 10px;
text-align: center;
-webkit-tap-highlight-color: transparent
}
.owl-theme .owl-nav [class*='owl-'] {
color: #FFF;
font-size: 14px;
margin: 5px;
padding: 4px 7px;
background: #D6D6D6;
display: inline-block;
cursor: pointer;
border-radius: 3px
}
.owl-theme .owl-nav [class*='owl-']:hover {
background: #71c7b0;
color: #FFF;
text-decoration: none
}
.owl-theme .owl-nav .disabled {
opacity: 0.5;
cursor: default
}
.owl-theme .owl-nav.disabled+.owl-dots {
margin-top: 10px
}
.owl-theme .owl-dots {
text-align: center;
-webkit-tap-highlight-color: transparent
}
.owl-theme .owl-dots .owl-dot {
display: inline-block;
zoom: 1;
*display: inline
}
.owl-theme .owl-dots .owl-dot span {
width: 12px;
height: 12px;
margin: 5px 7px;
background: transparent;
display: block;
-webkit-backface-visibility: visible;
transition: opacity 200ms ease;
border: 2px solid #71c7b0;
border-radius: 30px
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
background: #71c7b0
}
::-webkit-input-placeholder {
color: #002941;
text-transform: uppercase;
font-size: 1.15em
}
::-moz-placeholder {
color: #002941;
text-transform: uppercase;
font-size: 1.15em
}
:-ms-input-placeholder {
color: #002941;
text-transform: uppercase;
font-size: 1.15em
}
:-moz-placeholder {
color: #002941;
text-transform: uppercase;
font-size: 1.25em
}
@-webkit-keyframes fadeIn {
from {
opacity: 0
}
}
@-o-keyframes fadeIn {
from {
opacity: 0
}
}
@-moz-keyframes fadeIn {
from {
opacity: 0
}
}
@keyframes fadeIn {
from {
opacity: 0
}
}
.blink {
-webkit-animation: 1s linear .5s infinite fadeIn;
-moz-animation: 1s linear .5s infinite fadeIn;
-o-animation: 1s linear .5s infinite fadeIn;
animation: 1s linear .5s infinite fadeIn
}
@-webkit-keyframes fadeInCircle0 {
0% {
opacity: 0
}
25% {
opacity: 1
}
100% {
opacity: 0
}
}
@-o-keyframes fadeInCircle0 {
0% {
opacity: 0
}
25% {
opacity: 1
}
100% {
opacity: 0
}
}
@-moz-keyframes fadeInCircle0 {
0% {
opacity: 0
}
25% {
opacity: 1
}
100% {
opacity: 0
}
}
@keyframes fadeInCircle0 {
0% {
opacity: 0
}
25% {
opacity: 1
}
100% {
opacity: 0
}
}
@-webkit-keyframes fadeInCircle1 {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
@-o-keyframes fadeInCircle1 {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
@-moz-keyframes fadeInCircle1 {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
@keyframes fadeInCircle1 {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
@-webkit-keyframes fadeInCircle2 {
0% {
opacity: 0
}
75% {
opacity: 1
}
100% {
opacity: 0
}
}
@-o-keyframes fadeInCircle2 {
0% {
opacity: 0
}
75% {
opacity: 1
}
100% {
opacity: 0
}
}
@-moz-keyframes fadeInCircle2 {
0% {
opacity: 0
}
75% {
opacity: 1
}
100% {
opacity: 0
}
}
@keyframes fadeInCircle2 {
0% {
opacity: 0
}
75% {
opacity: 1
}
100% {
opacity: 0
}
}
@-webkit-keyframes fadeInCircle0red {
0% {
opacity: 0
}
2.5% {
opacity: 1
}
25% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-o-keyframes fadeInCircle0red {
0% {
opacity: 0
}
2.5% {
opacity: 1
}
25% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-moz-keyframes fadeInCircle0red {
0% {
opacity: 0
}
2.5% {
opacity: 1
}
25% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@keyframes fadeInCircle0red {
0% {
opacity: 0
}
2.5% {
opacity: 1
}
25% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-webkit-keyframes fadeInCircle1red {
0% {
opacity: 0
}
6.5% {
opacity: 1
}
21% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-o-keyframes fadeInCircle1red {
0% {
opacity: 0
}
6.5% {
opacity: 1
}
21% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-moz-keyframes fadeInCircle1red {
0% {
opacity: 0
}
6.5% {
opacity: 1
}
21% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@keyframes fadeInCircle1red {
0% {
opacity: 0
}
6.5% {
opacity: 1
}
21% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-webkit-keyframes fadeInCircle2red {
0% {
opacity: 0
}
12.5% {
opacity: 1
}
17% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-o-keyframes fadeInCircle2red {
0% {
opacity: 0
}
12.5% {
opacity: 1
}
17% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-moz-keyframes fadeInCircle2red {
0% {
opacity: 0
}
12.5% {
opacity: 1
}
17% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@keyframes fadeInCircle2red {
0% {
opacity: 0
}
12.5% {
opacity: 1
}
17% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-webkit-keyframes fadeInCircle0orange {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
26.5% {
opacity: 1
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-o-keyframes fadeInCircle0orange {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
26.5% {
opacity: 1
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-moz-keyframes fadeInCircle0orange {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
26.5% {
opacity: 1
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@keyframes fadeInCircle0orange {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
26.5% {
opacity: 1
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-webkit-keyframes fadeInCircle1orange {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
31.5% {
opacity: 1
}
46% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-o-keyframes fadeInCircle1orange {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
31.5% {
opacity: 1
}
46% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-moz-keyframes fadeInCircle1orange {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
31.5% {
opacity: 1
}
46% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@keyframes fadeInCircle1orange {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
31.5% {
opacity: 1
}
46% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-webkit-keyframes fadeInCircle2orange {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
37.5% {
opacity: 1
}
42% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-o-keyframes fadeInCircle2orange {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
37.5% {
opacity: 1
}
42% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-moz-keyframes fadeInCircle2orange {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
37.5% {
opacity: 1
}
42% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@keyframes fadeInCircle2orange {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
37.5% {
opacity: 1
}
42% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-webkit-keyframes fadeInCircle0green {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
27.5% {
opacity: 0
}
50% {
opacity: 0
}
51.5% {
opacity: 1
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-o-keyframes fadeInCircle0green {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
27.5% {
opacity: 0
}
50% {
opacity: 0
}
51.5% {
opacity: 1
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-moz-keyframes fadeInCircle0green {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
27.5% {
opacity: 0
}
50% {
opacity: 0
}
51.5% {
opacity: 1
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@keyframes fadeInCircle0green {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
27.5% {
opacity: 0
}
50% {
opacity: 0
}
51.5% {
opacity: 1
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-webkit-keyframes fadeInCircle1green {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
32.5% {
opacity: 0
}
50% {
opacity: 0
}
56.5% {
opacity: 1
}
81% {
opacity: 0
}
100% {
opacity: 0
}
}
@-o-keyframes fadeInCircle1green {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
32.5% {
opacity: 0
}
50% {
opacity: 0
}
56.5% {
opacity: 1
}
81% {
opacity: 0
}
100% {
opacity: 0
}
}
@-moz-keyframes fadeInCircle1green {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
32.5% {
opacity: 0
}
50% {
opacity: 0
}
56.5% {
opacity: 1
}
81% {
opacity: 0
}
100% {
opacity: 0
}
}
@keyframes fadeInCircle1green {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
32.5% {
opacity: 0
}
50% {
opacity: 0
}
56.5% {
opacity: 1
}
81% {
opacity: 0
}
100% {
opacity: 0
}
}
@-webkit-keyframes fadeInCircle2green {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 1
}
77% {
opacity: 0
}
100% {
opacity: 0
}
}
@-o-keyframes fadeInCircle2green {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 1
}
77% {
opacity: 0
}
100% {
opacity: 0
}
}
@-moz-keyframes fadeInCircle2green {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 1
}
77% {
opacity: 0
}
100% {
opacity: 0
}
}
@keyframes fadeInCircle2green {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 1
}
77% {
opacity: 0
}
100% {
opacity: 0
}
}
.blink-circle0 {
-webkit-animation: fadeInCircle0 1s infinite;
-moz-animation: fadeInCircle0 1s infinite;
-o-animation: fadeInCircle0 1s infinite;
animation: fadeInCircle0 1s infinite
}
.blink-circle1 {
-webkit-animation: fadeInCircle1 1s infinite;
-moz-animation: fadeInCircle1 1s infinite;
-o-animation: fadeInCircle1 1s infinite;
animation: fadeInCircle1 1s infinite
}
.blink-circle2 {
-webkit-animation: fadeInCircle2 1s infinite;
-moz-animation: fadeInCircle2 1s infinite;
-o-animation: fadeInCircle2 1s infinite;
animation: fadeInCircle2 1s infinite
}
.blink-red.blink-red-1 .blink-circle0,
.blink-red.blink-red-1 .blink-circle1,
.blink-red.blink-red-1 .blink-circle2 {
width: 1.35em !important;
height: 1.35em !important
}
.blink-red.blink-red-2 .blink-circle0,
.blink-red.blink-red-2 .blink-circle1,
.blink-red.blink-red-2 .blink-circle2 {
width: 1.25em !important;
height: 1.25em !important
}
.blink-red .blink-circle0 {
-webkit-animation: fadeInCircle0red 6s infinite;
-moz-animation: fadeInCircle0red 6s infinite;
-o-animation: fadeInCircle0red 6s infinite;
animation: fadeInCircle0red 6s infinite
}
.blink-red .blink-circle1 {
-webkit-animation: fadeInCircle1red 6s infinite;
-moz-animation: fadeInCircle1red 6s infinite;
-o-animation: fadeInCircle1red 6s infinite;
animation: fadeInCircle1red 6s infinite
}
.blink-red .blink-circle2 {
-webkit-animation: fadeInCircle2red 6s infinite;
-moz-animation: fadeInCircle2red 6s infinite;
-o-animation: fadeInCircle2red 6s infinite;
animation: fadeInCircle2red 6s infinite
}
.blink-orange.blink-orange-2 .blink-circle0,
.blink-orange.blink-orange-2 .blink-circle1,
.blink-orange.blink-orange-2 .blink-circle2 {
width: 1.25em !important;
height: 1.25em !important
}
.blink-orange .blink-circle0 {
-webkit-animation: fadeInCircle0orange 6s infinite;
-moz-animation: fadeInCircle0orange 6s infinite;
-o-animation: fadeInCircle0orange 6s infinite;
animation: fadeInCircle0orange 6s infinite
}
.blink-orange .blink-circle1 {
-webkit-animation: fadeInCircle1orange 6s infinite;
-moz-animation: fadeInCircle1orange 6s infinite;
-o-animation: fadeInCircle1orange 6s infinite;
animation: fadeInCircle1orange 6s infinite
}
.blink-orange .blink-circle2 {
-webkit-animation: fadeInCircle2orange 6s infinite;
-moz-animation: fadeInCircle2orange 6s infinite;
-o-animation: fadeInCircle2orange 6s infinite;
animation: fadeInCircle2orange 6s infinite
}
.blink-green.blink-green-1 .blink-circle0,
.blink-green.blink-green-1 .blink-circle1,
.blink-green.blink-green-1 .blink-circle2 {
width: 1.35em !important;
height: 1.35em !important
}
.blink-green.blink-green-2 .blink-circle0,
.blink-green.blink-green-2 .blink-circle1,
.blink-green.blink-green-2 .blink-circle2 {
width: 1.25em !important;
height: 1.25em !important
}
.blink-green .blink-circle0 {
-webkit-animation: fadeInCircle0green 6s infinite;
-moz-animation: fadeInCircle0green 6s infinite;
-o-animation: fadeInCircle0green 6s infinite;
animation: fadeInCircle0green 6s infinite
}
.blink-green .blink-circle1 {
-webkit-animation: fadeInCircle1green 6s infinite;
-moz-animation: fadeInCircle1green 6s infinite;
-o-animation: fadeInCircle1green 6s infinite;
animation: fadeInCircle1green 6s infinite
}
.blink-green .blink-circle2 {
-webkit-animation: fadeInCircle2green 6s infinite;
-moz-animation: fadeInCircle2green 6s infinite;
-o-animation: fadeInCircle2green 6s infinite;
animation: fadeInCircle2green 6s infinite
}
@-webkit-keyframes fadeInRed {
0% {
opacity: 0
}
12.5% {
opacity: 1
}
25% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-o-keyframes fadeInRed {
0% {
opacity: 0
}
12.5% {
opacity: 1
}
25% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-moz-keyframes fadeInRed {
0% {
opacity: 0
}
12.5% {
opacity: 1
}
25% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@keyframes fadeInRed {
0% {
opacity: 0
}
12.5% {
opacity: 1
}
25% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-webkit-keyframes fadeInOrange {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
37.5% {
opacity: 1
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-o-keyframes fadeInOrange {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
37.5% {
opacity: 1
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-moz-keyframes fadeInOrange {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
37.5% {
opacity: 1
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@keyframes fadeInOrange {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
37.5% {
opacity: 1
}
50% {
opacity: 0
}
62.5% {
opacity: 0
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-webkit-keyframes fadeInGreen {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 1
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-o-keyframes fadeInGreen {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 1
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@-moz-keyframes fadeInGreen {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 1
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
@keyframes fadeInGreen {
0% {
opacity: 0
}
12.5% {
opacity: 0
}
25% {
opacity: 0
}
37.5% {
opacity: 0
}
50% {
opacity: 0
}
62.5% {
opacity: 1
}
85% {
opacity: 0
}
100% {
opacity: 0
}
}
.blink-red {
-webkit-animation: fadeInRed 6s infinite;
-moz-animation: fadeInRed 6s infinite;
-o-animation: fadeInRed 6s infinite;
animation: fadeInRed 6s infinite
}
.blink-orange {
-webkit-animation: fadeInOrange 6s infinite;
-moz-animation: fadeInOrange 6s infinite;
-o-animation: fadeInOrange 6s infinite;
animation: fadeInOrange 6s infinite
}
.blink-green {
-webkit-animation: fadeInGreen 6s infinite;
-moz-animation: fadeInGreen 6s infinite;
-o-animation: fadeInGreen 6s infinite;
animation: fadeInGreen 6s infinite
}
.blink-square-group {
position: absolute;
width: 100%;
top: 0;
left: 0
}
.blink-square {
position: absolute
}
.blink-red-1 {
top: 172px;
left: 34%
}
.blink-red-2 {
top: 561px;
left: 32%
}
.blink-red-3 {
top: 366px;
left: 88%
}
.blink-orange-1 {
top: 371px;
left: 15%
}
.blink-orange-2 {
top: 526px;
left: 70%
}
.blink-green-1 {
top: 200px;
left: 71%
}
.blink-green-2 {
top: 580px;
left: 10%
}
.blink-green-3 {
top: 574px;
left: 90%
}
.menus-icon {
display: inline-block;
width: 1.75em;
height: 1.75em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
vertical-align: middle
}
.icon-outline {
display: block;
width: 99px;
height: 99px;
margin-bottom: 1em;
border: 3px solid #71c7b0;
border-radius: 128px;
text-align: center
}
@media screen and (max-width: 960px) {
.icon-outline {
margin: 0 auto 2em !important
}
}
.icon-outline .contents-icon {
width: 80%;
height: 100%;
fill: #002941
}
body {
font-family: "brandon_grotesquelight", "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: 1px;
color: #022a42
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "brandon_grotesque_regularRg", "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: 1px;
color: #022a42
}
h1.title {
font-family: "brandon_grotesquebold", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase
}
.headline.headline-one {
font-family: "brandon_grotesquethin", "Helvetica Neue", Helvetica, Arial, sans-serif
}
.headline.headline-two {
font-family: "brandon_grotesquebold", "Helvetica Neue", Helvetica, Arial, sans-serif
}
.wrapper {
max-width: 1052px;
min-width: 360px;
padding: 0 2em;
margin: 0 auto
}
.article {
clear: both;
padding: 5em 0;
background: #ffffff;
background: -moz-linear-gradient(top, #fff 0%, #eef0f3 100%);
background: -webkit-linear-gradient(top, #fff 0%, #eef0f3 100%);
background: linear-gradient(to bottom, #fff 0%, #eef0f3 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eef0f3', GradientType=0)
}
.article .title {
font-family: "brandon_grotesquelight", "Helvetica Neue", Helvetica, Arial, sans-serif;
/*font-size: 1.563em;*/
font-size: 1.3em;
color: #022a42;
text-transform: uppercase
}
@media screen and (max-width: 960px) {
.article .article-content {
text-align: center
}
}
@media screen and (max-width: 960px) {
.article .article-panel {
height: 100% !important;
padding: 2em;
box-shadow: 0px 0px 12px 6px rgba(0, 0, 0, 0.1);
background: #fff !important
}
}
@media screen and (max-width: 960px) {
.article .article-cta {
display: none !important
}
}
@media screen and (min-width: 960px) {
.article .mobile-cta {
display: none !important
}
}
@media screen and (max-width: 960px) {
.article .mobile-cta {
margin-top: 1em !important
}
}
@media screen and (min-width: 960px) {
.article .mobile-cta .button-group {
margin-top: 0 !important;
margin-bottom: 1em !important
}
}
.article .heading {
margin-bottom: 2em;
color: #002941
}
.article .heading:after {
content: "";
width: 78px;
display: block;
margin-top: 0.5em;
border-top: 2px solid #d8b26b
}
.article .heading.heading_is-light {
color: #fff
}
.article .heading.heading_is-light .title {
color: #fff
}
.article .heading.heading-is-dark {
color: #002941
}
.article .heading.heading-is-dark .title {
color: #002941
}
.article h3 {
font-size: 1.25em
}
.article .button-group .button {
margin-top: 2em
}
.article.active .blink {
opacity: 1;
-webkit-animation-name: fadeIn;
animation-name: fadeIn
}
.article .blink {
opacity: 0;
-webkit-animation-name: fadeIn;
animation-name: fadeIn
}
.article .blink .blink-icon {
display: block;
width: 1.75em;
height: 1.75em
}
@media screen and (min-width: 489px) {
.header-home {
height: 660px
}
}
@media screen and (min-width: 549px) {
.header-home {
height: 860px
}
}
@media screen and (min-width: 960px) {
.header-home {
height: 840px;
background-image: url(../images/hero_image_large.png);
background-repeat: repeat-x;
background-position: 50% 0;
background-size: cover;
}
}
@media screen and (max-width: 489px) {
.header-home {
height: 640px
}
}
.header-home .blink-icon {
position: absolute;
display: block;
width: 1.75em;
height: 1.75em
}
@media screen and (max-width: 960px) {
.header-home .blink-group {
display: none
}
}
.header-home .blink-group .blink-1 {
top: 200px;
left: 41%;
width: 1.35em;
height: 1.35em
}
.header-home .blink-group .blink-2 {
top: 160px;
left: 70%
}
.header-home .blink-group .blink-3 {
top: 360px;
left: 150px
}
.header-home .blink-group .blink-4 {
top: 330px;
left: 85%;
width: 1.15em;
height: 1.15em
}
.header-home .blink-group .blink-5 {
top: 550px;
left: 33%;
width: 1.25em;
height: 1.25em
}
.header-home .blink-group .blink-6 {
top: 530px;
left: 66%;
width: 1.15em;
height: 1.15em
}
.header-home .blink {
position: absolute;
top: 150px
}
@media screen and (min-width: 960px) {
.header-home .blink {
display: none
}
}
.header-home:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #002941;
z-index: -2
}
.header-home:after {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;
/* background-image: url(../images/hero_image_large.png);
background-repeat: repeat-x;
background-position: 50% 0;
background-size: cover;*/
z-index: -1
}
@media screen and (min-width: 489px) {
.header-home:before,
.header-home:after {
height: 660px
}
}
@media screen and (min-width: 549px) {
.header-home:before,
.header-home:after {
height: 860px
}
}
@media screen and (min-width: 960px) {
.header-home:before,
.header-home:after {
height: 840px
}
}
@media screen and (max-width: 489px) {
.header-home:before,
.header-home:after {
height: 640px
}
}
/* nav {
float: left;
width: 100%;
padding: 1.250em 0;
clear: both
} */
nav .logo {
float: left
}
nav .logo img {
width: 160px;
height: auto
}
@media screen and (max-width: 549px) {
nav .logo img {
width: 120px
}
.menus-icon {
display: inline-block;
width: 1.25em;
height: 1.25em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
vertical-align: middle
}
}
@media screen and (max-width: 549px) {
nav .logo img {
width: 120px
}
}
nav .navigation {
float: right;
display: inline-flex;
margin-top: 3.750em
}
@media screen and (max-width: 960px) {
nav .navigation {
margin-top: 2.25em
}
}
nav .navigation a {
font-family: "brandon_grotesque_regularRg", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 1px;
color: #fff
}
nav .navigation li {
display: inline;
padding: 0 0.75em
}
@media screen and (max-width: 960px) {
nav .navigation li.menu {
display: none
}
}
nav .navigation li.cart li {
padding: 0 0.3em
}
nav .navigation li.cart li.toggle-menu {
cursor: pointer;
color: #fff;
text-transform: uppercase
}
nav .navigation li.cart li.toggle-menu span {
margin-right: 0.5em
}
@media screen and (min-width: 960px) {
nav .navigation li.cart li.toggle-menu {
display: none
}
}
nav .navigation li.cart li:first-child {
padding-right: 0
}
@media screen and (max-width: 960px) {
nav .navigation li.cart li:first-child {
display: none
}
}
nav .navigation li.cart li:first-child:after {
content: "|";
margin-left: 0.3em;
color: #fff;
vertical-align: sub;
font-size: 28px
}
nav .navigation li.cart li:last-child:before {
content: "|";
margin-right: 0.3em;
color: #fff;
vertical-align: sub;
font-size: 28px;
opacity: .5
}
nav .navigation li.active.pressed {
display: block;
position: absolute;
width: 280px;
top: 6em;
right: 2.5em;
padding: 0
}
nav .navigation li.active.pressed li {
display: list-item;
width: 100%;
padding: 0
}
nav .navigation li.active.pressed li a {
display: block;
padding: 0.75em 2em;
background: #002941
}
nav .navigation li.active.pressed li a:hover {
background: #193e54
}
nav .navigation>li:last-child {
padding-right: 0
}
.hero {
float: left;
width: 100%;
padding: 8.250em 0;
text-align: center;
clear: both
}
@media screen and (max-width: 960px) {
.hero {
text-align: left
}
}
@media screen and (max-width: 549px) {
.hero {
padding-top: 6em;
padding-bottom: 0
}
}
.hero .heading,
.hero .subheading {
max-width: 800px;
margin: 0 auto;
color: #fff;
line-height: 1.25
}
.hero .heading {
font-family: "brandon_grotesquebold", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 3.2em;
text-transform: uppercase;
margin-bottom: 0.35em
}
@media screen and (max-width: 960px) {
.hero .heading {
margin-bottom: 1em;
font-size: 2em
}
}
@media screen and (max-width: 549px) {
.hero .heading {
font-size: 1.5em
}
}
.hero .subheading {
font-family: "brandon_grotesque_regularRg", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.363em
}
@media screen and (max-width: 549px) {
.hero .subheading {
font-size: 1em
}
}
.hero .playvid.button {
margin: 4.5em 0 0
}
.intro {
position: absolute;
width: 100%;
margin: 0 auto;
top: 760px
}
@media screen and (max-width: 960px) {
.intro {
display: none
}
}
.intro .col a {
display: block;
position: relative;
padding: 2em 1.5em 3em;
margin: 0 1em;
height: 300px;
text-align: center;
text-decoration: none;
color: #002941;
background: #fff;
border: 1px solid #e5e5e5;
box-shadow: 0px 6px 12px 6px rgba(0, 0, 0, 0.075)
}
@media screen and (max-width: 1150px) {
.intro .col a {
height: 320px
}
}
@media screen and (max-width: 1024px) {
.intro .col a {
padding: 2em 1em 2em
}
}
.intro .col a:hover {
background: #71c7b0;
color: #fff;
border: 1px solid #71c7b0
}
.intro .col a:hover .text.text-intro {
color: #fff !important
}
.intro .col a:hover span.icon-outline {
border-color: #fff
}
.intro .col a:hover span.icon-arrow {
background: #71c7b0;
box-shadow: 0px 8px 12px 0px rgba(0, 0, 0, 0.075)
}
.intro .col a .text.text-intro {
height: 64px;
overflow: hidden
}
.intro .col a span.icon-outline {
margin: 0 auto
}
.intro .col a span.icon-arrow {
display: block;
margin: 0 auto;
width: 62px;
height: 31px;
position: relative;
top: -15px;
margin-top: 90px;
background: white;
border-radius: 0 0 128px 128px;
box-shadow: 0px 8px 12px 3px rgba(0, 0, 0, 0.075)
}
@media screen and (min-width: 1150px) {
.intro .col a span.icon-arrow {
top: -50px
}
}
.intro .col a span.icon-arrow .menus-icon {
height: 100%;
width: 30%;
margin-top: -10px
}
.intro .col a h3,
.intro .col a p {
color: #022a42
}
.intro .col a h3 {
font-family: "brandon_grotesque_regularRg", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1.375em;
margin-top: 1em;
line-height: 1.25
}
.intro .col a p {
line-height: 1.35
}
.as-seen-in {
min-height: 465px;
background: #f4f4f4;
text-align: center
}
@media screen and (max-width: 960px) {
.as-seen-in {
display: none
}
}
.as-seen-in .wrapper {
padding-top: 17em
}
.as-seen-in .wrapper span.img {
display: block;
height: 100%;
line-height: 5;
vertical-align: middle
}
.as-seen-in .wrapper span.img img {
vertical-align: middle
}
.as-seen-in .title {
letter-spacing: 1px;
opacity: .25;
text-transform: uppercase;
font-size: 1.25em;
margin: 1em 0 0
}
.as-seen-in .logos {
border-bottom: 1px solid #dedede;
padding-bottom: 1em
}
@media screen and (min-width: 960px) {
.as-seen-in.mobile {
display: none
}
}
@media screen and (max-width: 960px) {
.as-seen-in.mobile {
display: block !important;
height: 100%;
min-height: 100px
}
.as-seen-in.mobile .wrapper {
padding: 2em 3em
}
.as-seen-in.mobile .logos {
border-bottom: 0
}
.as-seen-in.mobile .owl-nav {
position: absolute;
width: 100%;
top: 0;
font-size: 1.5em;
font-weight: bold;
opacity: .25
}
.as-seen-in.mobile .owl-nav .owl-prev {
float: left;
margin-left: -1em
}
.as-seen-in.mobile .owl-nav .owl-next {
float: right;
margin-right: -1em
}
}
.contents {
clear: both
}
.equio {
height: 900px
}
@media screen and (max-width: 960px) {
.equio {
height: 100%;
background-image: url(../images/macbook.png);
background-position: 50% 95%;
background-repeat: no-repeat;
background-size: contain
}
}
.equio .title {
margin-bottom: 1em
}
@media screen and (max-width: 960px) {
.equio .equio-heading img {
width: 120px
}
}
.equio .equio-content {
height: 620px;
background: url(../images/macbook-line.png) no-repeat center bottom
}
@media screen and (max-width: 960px) {
.equio .equio-content {
margin-top: 3em;
margin-bottom: 6em;
background: #fff !important
}
}
.equio .equio-content .item-content {
padding-left: 2em
}
@media screen and (max-width: 960px) {
.equio .equio-content .item-content {
padding-left: 0
}
}
@media screen and (max-width: 549px) {
.equio .equio-content .mobile-cta .button.big {
padding-left: 22px;
padding-right: 22px
}
}
.equio .equio-cta {
text-align: center;
padding: 2em 0
}
.analyst-reports {
background: #002941;
color: #fff
}
@media screen and (max-width: 960px) {
.analyst-reports .article-image {
display: none
}
}
.analyst-reports .article-content h3 {
color: #fff
}
@media screen and (min-width: 960px) {
.analyst-reports .article-content img {
display: none
}
}
@media screen and (max-width: 960px) {
.analyst-reports .button-group {
max-width: 360px;
margin: 0 auto;
text-align: center
}
}
.custom-research ul {
list-style: none
}
@media screen and (max-width: 960px) {
.custom-research ul {
margin-left: 0
}
}
.custom-research ul li {
display: block;
float: left;
width: 100%;
margin: 0 0 3em
}
.custom-research ul li p {
margin-left: 150px
}
@media screen and (max-width: 960px) {
.custom-research ul li {
margin-bottom: 0
}
.custom-research ul li p {
margin-left: 0
}
}
.custom-research .icon-outline {
float: left;
margin-right: 3em
}
@media screen and (max-width: 960px) {
.custom-research .icon-outline {
float: none;
display: block;
margin: 0 auto
}
}
.custom-research .button-group .button {
margin-right: 1em
}
@media screen and (max-width: 549px) {
.custom-research .button-group .button {
margin-top: 1em
}
}
.free-resources {
padding: 5em 0 6em;
text-align: center;
color: #fff;
background: #002941
}
.free-resources .heading {
margin-bottom: 4em
}
.free-resources .heading .title {
font-family: "brandon_grotesquebold", "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: 1px;
margin-bottom: 0
}
.free-resources .heading:after {
float: none;
text-align: center;
margin-left: auto;
margin-right: auto
}
.free-resources a {
display: block;
position: relative;
width: 100%;
height: 320px;
text-decoration: none;
color: #fff;
font-size: 1.5em;
letter-spacing: 1px;
text-align: center
}
@media screen and (max-width: 960px) {
.free-resources a {
height: 100%;
margin-bottom: 1em
}
}
.free-resources a span {
position: absolute;
display: block;
width: 100%;
top: 48%;
z-index: 1
}
.free-resources a img {
width: 100%;
height: auto;
opacity: 0.2
}
.free-resources a:hover img {
opacity: 0.5
}
.subscribe {
background: #71c7b0;
padding: 2em 0
}
.subscribe .title {
font-family: "brandon_grotesquebold", "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-bottom: 0;
line-height: 1.5;
color: #fff
}
.subscribe .title .first-word {
color: #002941
}
.subscribe form {
margin: 1em 0
}
.subscribe form .button.plain {
padding: 0;
margin: 0;
border: 0;
border-radius: 0;
border-bottom: 1px solid #002941;
color: #002941
}
.subscribe form .button.plain:hover {
background: transparent
}
.contact-us {
min-height: 600px;
padding-top: 0;
padding-bottom: 0;
clear: both;
background: none !important
}
@media screen and (max-width: 960px) {
.contact-us {
height: 100%;
min-height: 1160px
}
}
.contact-us:before {
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 804px;
background-image: url(../images/background-contactus.jpg);
background-repeat: repeat-x;
background-position: 50% 0;
background-size: cover;
opacity: 0.25;
z-index: -1
}
@media screen and (max-width: 960px) {
.contact-us:before {
height: 100%;
min-height: 1280px
}
}
.contact-us .wrapper {
padding-top: 5em;
padding-bottom: 5em
}
.contact-us h3 {
margin-bottom: 1em
}
.contact-us textarea {
margin-top: 1em
}
@media screen and (max-width: 960px) {
.contact-us .col {
margin-bottom: 1em
}
.contact-us .col input {
padding-top: 0
}
}
.footer {
clear: both;
min-height: 200px;
padding: 3.5em 0;
background: #002941
}
.footer .footer-logo {
text-align: left
}
.footer .footer-logo img {
width: 144px;
height: auto
}
.footer .company-address {
text-align: center;
color: #fff
}
.footer .company-address span {
display: block
}
.footer .social-icons {
text-align: right
}
.footer .social-icons a {
display: inline-block;
margin-top: 15%;
color: #fff
}
@media screen and (max-width: 960px) {
.footer .social-icons a {
margin-top: 0
}
}
.footer .social-icons .social-icon {
width: 2em;
height: 2em;
margin-left: 1.2em;
fill: #fff;
z-index: 2
}
.footer .social-icons .social-icon:hover {
fill: #71c7b0
}
@media screen and (max-width: 960px) {
.footer .social-icons .social-icon {
margin-left: 0;
margin-right: 1.2em
}
}
@media screen and (max-width: 960px) {
.footer .company-address,
.footer .social-icons {
text-align: left;
margin-top: 1.75em
}
}
@media only screen and (min-width:999px) and (max-width: 1199px) {
.intro .col a span.icon-arrow {
margin-top: 75px;
}
}
@media only screen and (min-width:1150px) and (max-width: 1174px) {
.intro .col a span.icon-arrow {
margin-top: 110px;
}
}
@media only screen and (min-width:1175px) and (max-width: 1199px) {
.intro .col a span.icon-arrow {
margin-top: 90px;
}
}
.header .logo a img {
margin-bottom: 0;
margin-top: -2px;
border: none;
vertical-align: middle;
width: 160px;
height: auto;
}
a {
text-decoration: none;
}
@media screen and (min-width: 1500px) {
.header {
padding-left: calc(15%);
}
}
@media screen and (max-width: 1500px) {
.header {
padding-left: calc(5%);
}
}
@media screen and (max-width: 1024px) {
/*.header {
margin-left: calc(5%);
}*/
.header-home {
/*height: 840px;*/
background-image: url(../images/hero_image_large.png);
background-repeat: repeat-x;
background-position: 50% 0;
background-size: cover;
}
}
@media screen and (max-width: 1024px) {
.logo {
margin-left: calc(5%);
}
.header {
padding-left: 0;
}
.hero {
/* padding-top: 6em; */
/* padding-bottom: 0; */
background-image: url(../images/hero_image_large.png);
background-repeat: repeat-x;
background-position: 50% 0;
background-size: cover;
background-size: cover;
padding-left: 15px;
padding-bottom: 50px;
}
}
.login-link.alt {
margin-top:1.25em;
}
.login-link.alt a {
color:#022A42;
text-decoration:underline;
}