html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden],
template {
display: none;
}
a {
background-color: transparent;
}
a:active,
a:hover {
outline: 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: 700;
}
dfn {
font-style: italic;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
mark {
background: #ff0;
color: #000;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 1em 40px;
}
hr {
box-sizing: content-box;
height: 0;
}
pre {
overflow: auto;
}
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
input[type="search"] {
-webkit-appearance: textfield;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
}
optgroup {
font-weight: 700;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.5em;
line-height: 1.6;
font-weight: 400;
font-family: "Montserrat", sans-serif;
color: #222;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 2rem;
font-weight: 300;
}
h1 {
font-size: 4rem;
line-height: 1.2;
letter-spacing: -0.1rem;
}
h2 {
font-size: 3.6rem;
line-height: 1.25;
letter-spacing: -0.1rem;
}
h3 {
font-size: 3rem;
line-height: 1.3;
letter-spacing: -0.1rem;
}
h4 {
font-size: 2.4rem;
line-height: 1.35;
letter-spacing: -0.08rem;
}
h5 {
font-size: 1.8rem;
line-height: 1.5;
letter-spacing: -0.05rem;
}
h6 {
font-size: 1.5rem;
line-height: 1.6;
letter-spacing: 0;
}
@media (min-width: 550px) {
h1 {
font-size: 5rem;
}
h2 {
font-size: 4.2rem;
}
h3 {
font-size: 3.6rem;
}
h4 {
font-size: 3rem;
}
h5 {
font-size: 2.4rem;
}
h6 {
font-size: 1.5rem;
}
}
p {
margin-top: 0;
}
a {
color: #646464;
}
a:hover {
color: #646464;
}
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
display: inline-block;
height: 38px;
padding: 0 30px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: 0.1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
color: #333;
border-color: #888;
outline: 0;
}
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
color: #fff;
background-color: #33c3f0;
border-color: #33c3f0;
}
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
color: #fff;
background-color: #1eaedb;
border-color: #1eaedb;
}
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
height: 38px;
padding: 6px 10px;
background-color: #fff;
border: 1px solid #d1d1d1;
border-radius: 4px;
box-shadow: none;
box-sizing: border-box;
}
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
appearance: none;
}
textarea {
min-height: 65px;
padding-top: 6px;
padding-bottom: 6px;
}
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
border: 1px solid #33c3f0;
outline: 0;
}
label,
legend {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
}
fieldset {
padding: 0;
border-width: 0;
}
input[type="checkbox"],
input[type="radio"] {
display: inline;
}
label > .label-body {
display: inline-block;
margin-left: 0.5rem;
font-weight: normal;
}
ul {
list-style: circle inside;
}
ol {
list-style: decimal inside;
}
ol,
ul {
padding-left: 0;
margin-top: 0;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin: 1.5rem 0 1.5rem 3rem;
font-size: 90%;
}
li {
margin-bottom: 1rem;
}
code {
padding: 0.2rem 0.5rem;
margin: 0 0.2rem;
font-size: 90%;
white-space: nowrap;
background: #f1f1f1;
border: 1px solid #e1e1e1;
border-radius: 4px;
}
pre > code {
display: block;
padding: 1rem 1.5rem;
white-space: pre;
}
th,
td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e1e1e1;
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
button,
.button {
margin-bottom: 1rem;
}
input,
textarea,
select,
fieldset {
margin-bottom: 1.5rem;
}
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
margin-bottom: 2.5rem;
}
.u-full-width {
width: 100%;
box-sizing: border-box;
}
.u-max-full-width {
max-width: 100%;
box-sizing: border-box;
}
.u-pull-right {
float: right;
}
.u-pull-left {
float: left;
}
hr {
margin-top: 3rem;
margin-bottom: 3.5rem;
border-width: 0;
border-top: 1px solid #e1e1e1;
}
.container:after,
.row:after,
.u-cf {
content: "";
display: table;
clear: both;
}
* {
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
html,
body {
color: #646464;
font-family: "Montserrat", sans-serif;
font-size: 16px;
font-weight: 300;
height: 100%;
line-height: 1.6em;
margin: 0;
padding: 0;
}
main {
height: 100%;
}
iframe {
border: 0 none;
display: block;
}
ol,
ul {
padding: 0;
margin: 0;
list-style: none;
}
p.condensed {
line-height: 1.2em;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
p.required:before {
content: "*";
color: red;
}
.note {
font-size: 0.8em;
text-align: center;
}
.required-text {
color: red;
}
.flex-container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-v-align-center {
-ms-flex-align: center;
align-items: center;
}
.flex-h-align-center {
-ms-flex-pack: center;
justify-content: center;
}
.container {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0 2%;
box-sizing: border-box;
}
@media (min-width: 550px) {
.container.container-small {
max-width: 720px;
}
}
@media (min-width: 550px) {
.container.container-large {
max-width: 1440px;
}
}
.column,
.columns {
width: 100%;
float: left;
box-sizing: border-box;
}
@media (min-width: 400px) {
/*
.container {
width: 85%;
padding: 0;
} */
.container {
width: 85%;
margin-bottom: 100px;
padding: 0;
}
}
@media (min-width: 550px) {
.container {
width: 80%; /*80%*/
max-width: 1100px;
}
.column,
.columns {
margin-left: 4%;
}
.column:first-child,
.columns:first-child {
margin-left: 0;
}
.one.column,
.one.columns {
width: 4.66666666667%;
}
.two.columns {
width: 13.3333333333%;
}
.three.columns {
width: 22%;
}
.four.columns {
width: 30.6666666667%;
}
.five.columns {
width: 39.3333333333%;
}
.six.columns {
width: 48%;
}
.seven.columns {
width: 56.6666666667%;
}
.eight.columns {
width: 65.3333333333%;
}
.nine.columns {
width: 74%;
}
.ten.columns {
width: 82.6666666667%;
}
.eleven.columns {
width: 91.3333333333%;
}
.twelve.columns {
width: 100%;
margin-left: 0;
}
.one-third.column {
width: 30.6666666667%;
}
.two-thirds.column {
width: 65.3333333333%;
}
.one-half.column {
width: 48%;
}
.offset-by-one.column,
.offset-by-one.columns {
margin-left: 8.66666666667%;
}
.offset-by-two.column,
.offset-by-two.columns {
margin-left: 17.3333333333%;
}
.offset-by-three.column,
.offset-by-three.columns {
margin-left: 26%;
}
.offset-by-four.column,
.offset-by-four.columns {
margin-left: 34.6666666667%;
}
.offset-by-five.column,
.offset-by-five.columns {
margin-left: 43.3333333333%;
}
.offset-by-six.column,
.offset-by-six.columns {
margin-left: 52%;
}
.offset-by-seven.column,
.offset-by-seven.columns {
margin-left: 60.6666666667%;
}
.offset-by-eight.column,
.offset-by-eight.columns {
margin-left: 69.3333333333%;
}
.offset-by-nine.column,
.offset-by-nine.columns {
margin-left: 78%;
}
.offset-by-ten.column,
.offset-by-ten.columns {
margin-left: 86.6666666667%;
}
.offset-by-eleven.column,
.offset-by-eleven.columns {
margin-left: 95.3333333333%;
}
.offset-by-one-third.column,
.offset-by-one-third.columns {
margin-left: 34.6666666667%;
}
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns {
margin-left: 69.3333333333%;
}
.offset-by-one-half.column,
.offset-by-one-half.columns {
margin-left: 52%;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
letter-spacing: 0;
}
h1 {
font-weight: 300;
font-size: 36px;
line-height: 1.2em;
text-align: center;
text-transform: uppercase;
}
h2 {
font-weight: 600;
font-size: 30px;
line-height: 1.2em;
text-transform: uppercase;
}
h3 {
border-bottom: 1px solid;
font-size: 26px;
font-weight: 300;
margin-bottom: 1.25em;
padding-bottom: 0.5em;
text-align: center;
}
h4 {
font-size: 22px;
font-weight: 600;
line-height: 1.4em;
}
/*
@font-face {
font-family: fontello;
src: url(http://localhost/virtual-experience/fonts/fontello/fontello.eot?62727467);
src: url(http://localhost/virtual-experience/fonts/fontello/fontello.eot?62727467#iefix) format('embedded-opentype'), url(http://localhost/virtual-experience/fonts/fontello/fontello.woff2?62727467) format('woff2'), url(http://localhost/virtual-experience/fonts/fontello/fontello.woff?62727467) format('woff'), url(http://localhost/virtual-experience/fonts/fontello/fontello.ttf?62727467) format('truetype'), url(http://localhost/virtual-experience/fonts/fontello/fontello.svg?62727467#fontello) format('svg');
font-weight: 400;
font-style: normal
}*/
@font-face {
font-family: 'fontello';
src: url('../fonts/fontello/fontello.eot');
src: url('../fonts/fontello/fontello.eot?#iefix') format('embedded-opentype'),
url('../fonts/fontello/fontello.woff2') format('woff2'),
url('../fonts/fontello/fontello.woff') format('woff'),
url('../fonts/fontello/fontello.ttf') format('truetype'),
url('../fonts/fontello/fontello.svg#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
[class*=" icon-"]:before,
[class^=icon-]:before {
font-family: fontello;
font-style: normal;
font-weight: 400;
speak: never;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
margin-left: .2em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.icon-search:before {
content: '\e800'
}
.icon-search-1:before {
content: '\e801'
}
.icon-cancel:before {
content: '\e802'
}
.icon-search-2:before {
content: '\e803'
}
.icon-cancel-1:before {
content: '\e804'
}
.icon-cancel-2:before {
content: '\e805'
}
.icon-left-open-1:before {
content: '\e806'
}
.icon-right-open-1:before {
content: '\e807'
}
.icon-search-3:before {
content: '\e808'
}
.icon-cancel-3:before {
content: '\e809'
}
.icon-right-open-2:before {
content: '\e80a'
}
.icon-right-open:before {
content: '\e80b'
}
.icon-left-open:before {
content: '\e80c'
}
.icon-left-open-2:before {
content: '\e80d'
}
.icon-left-open-big:before {
content: '\e80f'
}
.icon-right-open-big:before {
content: '\e810'
}
.btn {
background: transparent;
border: 1px solid transparent;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 400;
letter-spacing: normal;
line-height: 18px;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
text-decoration: none;
-ms-touch-action: manipulation;
touch-action: manipulation;
-ms-user-select: none;
user-select: none;
vertical-align: middle;
white-space: nowrap;
}
.btn.disabled,
.btn.disabled.is-hover,
.btn.disabled:hover,
.btn.disabled:hover:active,
.btn.disabled:active {
color: #cccccc;
}
body.is-main .btn.disabled,
body.is-main .btn.disabled.is-hover,
body.is-main .btn.disabled:hover,
body.is-main .btn.disabled:hover:active,
body.is-main .btn.disabled:active {
color: #cccccc;
}
body.is-main-2 .btn.disabled,
body.is-main-2 .btn.disabled.is-hover,
body.is-main-2 .btn.disabled:hover,
body.is-main-2 .btn.disabled:hover:active,
body.is-main-2 .btn.disabled:active {
color: #cccccc;
}
.btn-primary {
background-color: #84bd00;
border-radius: 50px 50px 50px 50px;
color: #fff;
height: auto;
padding: 20px 30px 22px;
border: 0;
font-weight: 600;
cursor: pointer;
}
.btn-primary:focus,
.btn-primary:hover,
.btn-primary:visited,
.btn-primary:active {
background-color: #63431e;
color: #fff;
cursor: pointer;
}
.btn-secondary {
background-color: #fff!important;
border-radius: 50px 50px 50px 50px!important;
color: #84bd00!important;
height: auto!important;
padding: 17px 40px 14px!important;
border: 0!important;
font-size: 16px!important;
font-weight: 600!important;
text-align: center!important;
}
.btn-tree {
background-color: #fff;
border-radius: 50px 50px 50px 50px;
color: #84bd00;
height: auto;
padding: 17px 40px 14px;
border: 0;
font-size: 16px;
font-weight: 600;
text-align: center
}
.btn-secondary:focus,
.btn-secondary:hover {
background-color: #fff;
color: #84bd00
}
.btn-close,
.btn-close-sub-section {
border: 0;
color: #fff;
font-size: 28px;
text-shadow: 0 0 2px rgba(0, 0, 0, .2)
}
.btn-close-sub-section:focus,
.btn-close-sub-section:hover,
.btn-close:focus,
.btn-close:hover {
color: #fff;
transform: scale(1.1)
}
.btn-main-booth,
.btn-main-booth-xt,
.btn-secondary-booth {
background-color: #ee7203;
border: 2px solid #fff;
border-radius: 50%;
color: #fff;
display: block;
font-size: 16px;
font-weight: 600;
height: 60px;
margin: 1em auto;
max-width: 400px;
text-align: left;
text-transform: uppercase;
width: 80%;
position: relative;
left: 50%;
transform: translateX(-50%);
margin: 10px
}
.btn-home {
background-color: #ee7203;
border: 2px solid #fff;
border-radius: 50px 50px 50px 50px;
color: #fff;
display: block;
font-size: 16px;
font-weight: 600;
height: 60px;
margin: 1em auto;
max-width: 400px;
text-align: left;
text-transform: uppercase;
width: 80%;
position: relative;
left: 100%;
transform: translateX(-50%);
margin: 10px
}
.btn-home .btn-main-booth-icon,
.btn-home .btn-secondary-booth-icon,
.btn-main-booth .btn-main-booth-icon,
.btn-main-booth .btn-secondary-booth-icon,
.btn-main-booth-xt .btn-main-booth-icon,
.btn-secondary-booth .btn-main-booth-icon,
.btn-secondary-booth .btn-secondary-booth-icon {
font-size: 24px;
vertical-align: middle
}
.btn-home .btn-main-booth-text,
.btn-home .btn-secondary-booth-text,
.btn-main-booth .btn-main-booth-text,
.btn-main-booth .btn-secondary-booth-text,
.btn-main-booth-xt .btn-main-booth-text,
.btn-secondary-booth .btn-main-booth-text,
.btn-secondary-booth .btn-secondary-booth-text {
display: inline-block;
padding-left: 1em;
vertical-align: middle
}
.btn-home:focus,
.btn-home:hover,
.btn-main-booth-xt:focus,
.btn-main-booth-xt:hover,
.btn-main-booth:focus,
.btn-main-booth:hover,
.btn-secondary-booth:focus,
.btn-secondary-booth:hover {
background-color: #84bd00;
border-color: #fff;
border-radius: 50px 50px 50px 50px;
color: #fff
}
@media (min-width: 1000px) {
.btn-home,
.btn-main-booth,
.btn-main-booth-xt,
.btn-secondary-booth {
opacity: .9;
width: auto
}
.btn-home .btn-main-booth-text,
.btn-home .btn-secondary-booth-text,
.btn-main-booth .btn-main-booth-text,
.btn-main-booth .btn-secondary-booth-text,
.btn-main-booth-xt .btn-main-booth-text,
.btn-secondary-booth .btn-main-booth-text,
.btn-secondary-booth .btn-secondary-booth-text {
overflow: hidden;
padding-left: 0;
max-width: 0
}
.btn-home:hover .btn-main-booth-text,
.btn-home:hover .btn-secondary-booth-text,
.btn-main-booth-xt:hover .btn-main-booth-text,
.btn-main-booth:hover .btn-main-booth-text,
.btn-main-booth:hover .btn-secondary-booth-text,
.btn-secondary-booth:hover .btn-main-booth-text,
.btn-secondary-booth:hover .btn-secondary-booth-text {
max-width: 30em;
transition-timing-function: ease-in
}
}
.btn-resource {
color: #fff;
padding: 0;
border: 0;
border-radius: 10px 10px 10px 10px;
display: table;
height: auto;
margin: 0 auto 1em;
text-transform: none;
white-space: normal;
width: 80%
}
.btn-resource .btn-resource-image {
border-radius: 10px;
display: table-cell;
overflow: hidden
}
.btn-resource .btn-resource-image img {
display: block;
}
.icon-min img {
width: 43px;
height: auto
}
.btn-resource .btn-resource-content {
display: table-cell;
padding: 8px 32px 8px 16px;
text-align: left;
vertical-align: middle;
width: 100%;
}
.btn-resource .btn-resource-title {
display: block;
font-weight: 700;
}
.btn-resource:focus,
.btn-resource:hover {
color: #6e4d1e;
text-decoration: underline
}
@media (min-width: 1000px) {
.btn-resource {
width: 100%;
max-width: 360px;
}
}
.btn-prototype {
background: 0 0;
border: none;
cursor: pointer;
font-size: 14px;
font-weight: 400;
letter-spacing: normal;
line-height: 18px;
margin-bottom: 0;
text-decoration: none;
text-transform: none;
-ms-touch-action: manipulation;
touch-action: manipulation;
-ms-user-select: none;
user-select: none;
white-space: nowrap
}
.btn-prototype .btn-prototype-content {
display: table-cell;
padding: 8px 32px 8px 16px;
text-align: left;
vertical-align: middle;
width: 100%;
}
.btn-prototype .btn-prototype-content .prototype-section:before {
content: "";
display: inline-block;
width: 9px;
height: 9px;
margin-right: 15px;
background-color: #fff;
border-radius: 50%
}
.btn-prototype .btn-prototype-title {
display: block;
font-weight: 700;
}
.btn-prototype .btn-prototype-title.prototype-section {
font-weight: 400;
}
.btn-prototype.prototype-section {
background-color: transparent;
color: #fff;
border-radius: 0;
margin: 0;
}
.btn-prototype:focus,
.btn-prototype:hover {
color: #115850;
}
@media (min-width: 1000px) {
.btn-prototype {
width: 100%;
max-width: 360px;
}
}
.btn-group {
text-align: center;
}
.btn-rotate {
border: 0;
border-radius: 0 24px 24px 0;
background: rgba(0,0,0,0.0);
color: #ee7203;
display: none;
font-size: 90px;
height: 240px;
left: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
width: 300px /* 60px */
}
.btn-rotate .icon {
width: auto;
}
.btn-rotate .icon:before {
margin: 0;
width: auto;
}
.btn-rotate.btn-rotate-left .icon:before {
transform: scaleX(-1);
}
.btn-rotate.btn-rotate-right {
border-radius: 0px;
left: auto;
right: 0;
}
.btn-rotate:focus,
.btn-rotate:hover {
background: rgba(0,0,0,0.0);
border: 0;
color: #84bd00;
}
@media (min-width: 1000px) {
.btn-rotate.is-visible {
display: block;
}
}
.btn-mobile-rotate {
border: 0;
border-radius: 0;
background-color: #84bd00;
color: #fff;
font-size: 30px;
height: 60px;
position: relative;
width: 100%;
}
.btn-mobile-rotate:focus,
.btn-mobile-rotate:hover {
background-color: #63431e;
border: 0;
color: #fff;
}
.td:first-child .btn-mobile-rotate:after {
background: white;
content: " ";
height: 40px;
position: absolute;
right: 0;
top: 10px;
width: 1px;
}
.btn-small {
border-radius: 10px 10px 10px 10px;
font-size: 12px;
padding: 8px 16px 4px;
}
.btn-link {
border: 0;
color: #646464;
text-decoration: none;
text-transform: none;
}
.btn-link:active,
.btn-link:hover {
border: 0;
color: #646464;
}
.link {
color: #646464;
font-weight: 700;
text-decoration: none;
-ms-user-select: auto;
user-select: auto;
}
.link:hover {
color: #ed1a23;
}
body.is-main .link:hover {
color: #ed1a23;
}
body.is-main .link:hover {
color: #ed1a23;
}
body.is-main .link {
color: #ed1a23;
}
body.is-main-2 .link {
color: #ed1a23;
}
.input-full-width {
width: 100%;
}
.table {
display: table;
height: 100%;
width: 100%;
}
.table td,
.table th {
border-top: 1px solid #b7bbc5;
line-height: 1.42857143;
padding: 8px;
vertical-align: top;
}
.table th {
background-color: #b7bbc5;
border-top: 0;
text-align: left;
}
.table-bp-large {
display: block;
height: auto;
}
.table-bp-large .td,
.table-bp-large .tr {
display: block;
}
@media (min-width: 1000px) {
.table-bp-large {
display: table;
height: 100%;
}
.table-bp-large .tr {
display: table-row;
}
.table-bp-large .td {
display: table-cell;
}
}
.tr {
display: table-row;
}
.td {
display: table-cell;
}
@media (min-width: 750px) {
.td-divider {
border-right: 2px solid;
}
}
.td-divider:last-child {
border-right: 0 none;
}
.v-align {
vertical-align: middle;
}
.v-align-top {
vertical-align: top;
}
.v-align-bottom {
vertical-align: bottom;
}
.align-left {
text-align: left;
}
@media (min-width: 750px) {
.align-left {
text-align: left;
}
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
@media (min-width: 750px) {
.align-right {
text-align: right;
}
}
.list {
margin: 2rem 0;
list-style: disc;
}
.list li {
margin-left: 2.5rem;
margin-bottom: 0.5rem;
display: list-item;
}
.u-center-vertically {
position: relative;
width: 100%;
height: 100%;
display: table;
}
.u-center-vertically > div {
display: table-cell;
vertical-align: middle;
padding-bottom: 25px;
}
.u-table-cell {
display: table-cell;
vertical-align: middle;
}
.u-no-height {
height: 0;
}
.u-auto-height {
height: auto;
}
.u-full-height {
height: 100%;
}
.u-auto-width {
width: auto;
}
.u-auto-width.table {
margin: auto;
}
.u-full-width {
width: 100%;
}
.u-pull-left {
float: left;
}
.u-pull-right {
float: right;
}
.u-clearfix {
overflow: auto;
}
.u-relative {
position: relative;
}
.u-text-center {
text-align: center;
}
.u-text-justify {
text-align: justify
}
.u-display-none {
display: none;
}
.header {
background-color: #fff;
}
@media (min-width: 1000px) {
.header {
display: table;
height: 110px;
width: 100%;
}
}
.header .nav-toggle {
border: 0;
border-radius: 0;
height: 27px;
margin: 0;
padding: 0;
position: absolute;
right: 30px;
top: 28px;
width: 34px;
}
@media (min-width: 1000px) {
.header .nav-toggle {
display: none;
}
}
.header .header-logo .logo {
display: block;
margin: 16px auto 10px;
width: 96px;
}
.header .header-logo .logo img {
width: 100%;
}
@media (min-width: 1000px) {
.header .header-logo {
display: table-cell;
text-align: right;
vertical-align: middle;
width: 15%;
}
.header .header-logo .logo {
display: inline-block;
margin: 0 30px;
width: 128px;
}
}
.header .main-nav {
max-height: 0;
transition: all 0.3s ease-out;
}
.header .main-nav ul {
background-color: #658c1b;
padding-bottom: 10px;
}
.header .main-nav ul li {
display: block;
margin: 0 auto;
width: 75%;
}
.header .main-nav ul li .btn {
border: 0;
color: #fff;
display: block;
font-size: 16px;
font-weight: 600;
padding: 12px 20px;
text-align: center;
text-transform: uppercase;
margin: 0 auto;
}
@media (min-width: 1000px) {
.header .main-nav ul li .btn {
text-align: left;
}
}
.header .main-nav ul li .btn-main-nav.is-selected {
color: #fff;
text-align: center;
}
@media (min-width: 1000px) {
.header .main-nav ul li .btn-main-nav.is-selected {
color: #84bd00;
}
}
@media (min-width: 1000px) {
.header .main-nav ul li .btn-modal-nav[data-name="contact-us"] {
width: 80px;
height: auto;
}
}
@media (min-width: 1100px) {
.header .main-nav ul li .btn-modal-nav[data-name="contact-us"] {
width: 120px;
height: initial;
}
}
@media (min-width: 1400px) {
.header .main-nav ul li .btn-modal-nav[data-name="contact-us"] {
width: auto;
}
}
.header .main-nav .secondary-nav {
background-color: #84bd00;
}
.header .main-nav .secondary-nav li .btn {
color: #fff;
font-size: 16px;
font-weight: 600;
}
@media (min-width: 1000px) {
.header .main-nav {
display: table-cell;
height: auto;
vertical-align: middle;
}
.header .main-nav ul {
background-color: transparent;
padding-bottom: 0;
}
.header .main-nav ul li {
display: inline-block;
margin: 0;
width: auto;
}
.header .main-nav ul li .btn {
color: #646464;
font-size: 12px;
transition: all 0.2s;
padding: 8px 0.5vw;
width: 115px;
display: inline-block;
text-align: center;
white-space: normal;
}
}
@media (min-width: 1000px) and (min-width: 1200px) {
.header .main-nav ul li .btn {
padding: 8px 0.1vw;
font-size: 14px;
width: 140px;
}
}
@media (min-width: 1000px) and (min-width: 1200px) and (min-width: 1400px) {
.header .main-nav ul li .btn {
padding: 8px 1.6vw;
width: auto;
}
}
@media (min-width: 1000px) {
.header .main-nav ul li .btn .icon {
display: none;
}
.header .main-nav ul li .btn:after {
background-color: #84bd00;
bottom: -3px;
content: " ";
height: 5px;
left: 50%;
position: absolute;
transform: translateX(0);
transition: all 0.2s;
width: 0;
}
.header .main-nav ul li .btn:hover,
.header .main-nav ul li .btn.is-selected {
color: #84bd00;
position: relative;
}
.header .main-nav ul li .btn.is-selected:after {
transform: translateX(-0.5em);
width: 1em;
}
}
.header.is-opened .main-nav {
max-height: 320px;
transition-timing-function: ease-in;
}
.hamburger-menu {
display: block;
position: relative;
width: 100%;
height: 100%;
}
.hamburger-menu .line {
position: absolute;
width: 100%;
height: 3px;
left: 0;
background-color: #646464;
display: block;
transition: all 0.3s;
}
.hamburger-menu .line.first {
top: 0;
}
.is-opened .hamburger-menu .line.first {
top: 50%;
transform: rotate(45deg);
}
.hamburger-menu .line.second {
top: 33%;
}
.is-opened .hamburger-menu .line.second {
left: 50%;
top: 50%;
width: 0;
}
.hamburger-menu .line.third {
top: 67%;
}
.is-opened .hamburger-menu .line.third {
transform: rotate(-45deg);
top: 50%;
}
.sub-navigation {
background: #84bd00;
margin: 0 auto;
vertical-align: middle;
padding-left: 200px;
color: #fff;
text-transform: uppercase;
display: none;
position: absolute;
top: 110px;
z-index: 2;
width: 100%;
}
.sub-navigation li {
display: inline;
color: #fff;
}
.sub-navigation a {
color: #fff;
}
.sub-navigation .indicator {
position: relative;
left: 50%;
transform: translateX(-50%);
height: 5px;
width: 10px;
background: #fff;
opacity: 0;
}
.sub-navigation .is-selected .indicator {
opacity: 1;
}
@media (min-width: 1000px) {
.sub-navigation.is-visible {
display: block;
}
.sub-navigation ul {
background-color: transparent;
padding-bottom: 0;
}
.sub-navigation ul li {
display: inline-block;
margin: 0;
width: auto;
}
.sub-navigation ul li .btn {
color: #fff;
font-size: 14px;
padding: 8px 1.6vw;
padding-bottom: 5px;
transition: all 0.2s;
}
.sub-navigation ul li .btn .icon {
display: none;
}
.sub-navigation ul li .btn:after {
background-color: #fff;
bottom: -3px;
content: " ";
height: 5px;
left: 50%;
position: absolute;
transform: translateX(0);
transition: all 0.2s;
width: 0;
}
.sub-navigation ul li .btn:hover,
.sub-navigation ul li .btn.current {
color: white;
position: relative;
background-color: #63431e;
}
.sub-navigation ul li .btn.current:after {
transform: translateX(-0.5em);
width: 1em;
}
}
.loading-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.loading-screen-overlay {
z-index: 3;
}
.loading-screen-form {
z-index: 10;
}
.loading-screen-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.loading-screen-inner img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100%;
min-height: 300px;
background: transparent url("https://alexiodigital.com/proyectos/virtual-experience/virtual-experience/images/loader.png") 32% 50%/0%
100% no-repeat;
transition: background 0.3s linear;
display: block;
z-index: 1;
}
.loading-screen-inner .loading-screen-background {
position: absolute;
height: 100%;
width: 100%;
background: #DDD;
}
@media (min-width: 1000px) {
.btn-main-booth,
.btn-main-booth-xt,
.btn-secondary-booth {
position: absolute;
top: 50%;
}
}
@media (min-width:1000px) {
.btn-main-booth[data-name=about-us] {
margin-top: 2vh;
margin-left: 22vw
}
.btn-main-booth[data-name=our-products] {
margin-top: -17vh;
margin-left: 7vw
}
.btn-main-booth[data-name=bean-to-bar] {
margin-top: 18vh;
margin-left: -3vw
}
.btn-main-booth[data-name=private-label] {
margin-top: -16vh;
margin-left: -3vw
}
.btn-main-booth[data-name=specialty] {
margin-top: 5vh;
margin-left: 24vw
}
.btn-main-booth[data-name=sustainability] {
margin-top: 0;
margin-left: -25vw
}
.btn-main-booth-xt[data-name=discovery] {
margin-top: 18vh;
margin-left: -12vw
}
}
@media (min-width:1000px) {
.btn-home[data-name=front],
.btn-secondary-booth[data-name=front] {
margin-top: 20vh;
margin-left: -420px
}
.btn-home[data-name=who-we-are],
.btn-secondary-booth[data-name=who-we-are] {
margin-top: -30vh;
margin-left: 60px
}
.btn-home[data-name=values-principles],
.btn-secondary-booth[data-name=values-principles] {
margin-top: -15vh;
margin-left: -175px
}
.btn-home[data-name=ingredient-portfolio],
.btn-secondary-booth[data-name=ingredient-portfolio] {
margin-top: 10vh;
margin-left: 10px
}
.btn-home[data-name=our-strategy],
.btn-secondary-booth[data-name=our-strategy] {
margin-top: -4vh;
margin-left: 70px
}
}
.btn-downloads {
width: 100%;
margin-bottom: 15px;
color: #fff;
text-align: center;
white-space: normal;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-line-pack: end;
align-content: flex-end;
}
@media (min-width: 550px) {
.btn-downloads {
width: 50%;
}
.btn-downloads:nth-last-of-type(-n + 2):first-child,
.btn-downloads:nth-last-of-type(-n + 2):first-child ~ * {
max-width: 300px;
-ms-flex-positive: 1;
flex-grow: 1;
}
}
@media (min-width: 750px) {
.btn-downloads {
width: 33.33333%;
}
.btn-downloads:nth-last-of-type(-n + 3):first-child,
.btn-downloads:nth-last-of-type(-n + 3):first-child ~ * {
max-width: 300px;
-ms-flex-positive: 1;
flex-grow: 1;
}
}
.btn-downloads:hover .icon-container,
.btn-downloads:hover .box {
display: block;
}
.btn-downloads:hover .play {
animation: arrow-hint 3s 1s linear infinite;
}
body.is-main .btn-downloads:active,
body.is-main .btn-downloads:hover:active {
color: #f14950;
}
.is-us-only .btn-downloads[data-us-only="true"] {
display: none;
}
.btn-downloads img {
width: 100%;
display: block;
opacity: 0.2;
}
.btn-downloads .text {
position: absolute;
z-index: 1;
color: #000;
display: block;
width: 100%;
margin: 25px 2px 0px 2px;
font-size: 1.1em;
}
.btn-downloads .image {
position: relative;
width: 100%;
height: 100%;
background: #fff;
display: block;
}
.btn-downloads .box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
body.is-main .btn-downloads .box {
background: rgba(255, 255, 255, 0.85);
}
.btn-downloads .icon-container {
position: absolute;
bottom: 20px;
left: 50%;
transform: translate(-50%);
width: 50%;
margin-top: -20px;
display: none;
}
.btn-downloads .icon {
position: relative;
width: 60px;
height: 60px;
}
.btn-downloads .icon span {
position: absolute;
top: 12px;
left: 12px;
}
.btn-downloads .background {
width: 36px;
height: 36px;
border-radius: 100%;
/* background: #fff url("../svgs/hotspot-bg.svg") 0 0 no-repeat; */
box-shadow: 0 0 13px 8px rgba(255, 255, 255, 0.85);
}
.btn-downloads .play {
width: 36px;
height: 36px;
border-radius: 100%;
background: transparent url("../svgs/hotspot-hover.svg") 0 0 no-repeat;
}
.btn-downloads .view-text {
width: 100%;
font-weight: 700;
display: block;
}
body.is-main .btn-downloads .view-text {
color: #ed1a23;
}
@keyframes arrow-hint {
0% {
transform: translate(0);
}
4% {
transform: translate(3px);
}
8% {
transform: translate(0);
}
12% {
transform: translate(1.5px);
}
16% {
transform: translate(0);
}
}
.btn-product {
width: 100%;
margin-bottom: 15px;
text-align: center;
white-space: normal;
display: block;
letter-spacing: normal;
}
@media (min-width: 550px) {
.btn-product {
width: 50%;
}
.btn-product:nth-last-of-type(-n + 2):first-child,
.btn-product:nth-last-of-type(-n + 2):first-child ~ * {
max-width: 300px;
-ms-flex-positive: 1;
flex-grow: 1;
}
}
@media (min-width: 750px) {
.btn-product {
width: 33.33333%;
}
.btn-product:nth-last-of-type(-n + 3):first-child,
.btn-product:nth-last-of-type(-n + 3):first-child ~ * {
max-width: 300px;
-ms-flex-positive: 1;
flex-grow: 1;
}
}
.btn-product .btn-product-background {
position: relative;
width: 100%;
height: 160px;
border-radius: 20px;
background: white;
color: #000;
display: table;
}
.btn-product .btn-product-background .btn-product-text {
position: absolute;
width: 100%;
display: table;
font-weight: bold;
padding: 10px;
top: 0;
}
@media (min-width: 1000px) {
.btn-product .btn-product-background .btn-product-text {
padding-top: 20px;
}
}
.btn-product .btn-product-background .btn-view-container {
position: absolute;
display: table;
margin-left: 10%;
width: 80%;
height: 20%;
bottom: 20%;
box-shadow: 0px 2px 1px 2px #ed1a23;
border-radius: 20px;
text-align: center;
}
.btn-product .btn-product-background .btn-view-container .view-text {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn-product .btn-product-background .btn-view-container .view-button-arrow {
color: #ed1a23;
position: absolute;
font-size: 0.7em;
margin: 0;
top: 50%;
right: 10px;
transform: translate(-50%, -50%);
}
.btn-product:hover .btn-view-container,
.btn-product:active .btn-view-container,
.btn-product:hover:active .btn-view-container {
transition: all 0.2s;
color: #fff;
}
body.is-main .btn-product:hover .btn-view-container,
body.is-main .btn-product:active .btn-view-container,
body.is-main .btn-product:hover:active .btn-view-container {
background: #ed1a23;
box-shadow: 0px 2px 1px 2px #66080c;
}
.btn-product:hover .btn-view-container .view-button-arrow,
.btn-product:active .btn-view-container .view-button-arrow,
.btn-product:hover:active .btn-view-container .view-button-arrow {
color: #fff;
}
.overlay-elements-container,
.sub-section {
height: 100%;
left: 0;
opacity: 0;
overflow: auto;
padding-bottom: 20px;
padding-top: 20px;
position: absolute;
top: 0;
text-align: left;
transition: all 0.3s;
width: 100%;
z-index: 2;
}
@media (min-width: 1000px) {
.overlay-elements-container,
.sub-section {
padding-top: 60px;
}
}
.overlay-elements-container.is-visible,
.sub-section.is-visible {
opacity: 1;
}
.overlay-elements-container .container,
.sub-section .container {
position: relative;
top: 0;
left: 0;
}
@media (min-width: 1000px) {
.overlay-elements-container .container,
.sub-section .container {
/* max-width: 1500px; */
max-width: 1250px;
}
}
.overlay-elements-container .table,
.sub-section .table {
overflow-x: hidden;
}
.overlay-elements-container-inner {
border-radius: 0;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
overflow: hidden;
position: relative;
}
@media (min-width: 1000px) {
.overlay-elements-container-inner {
border-radius: 0;
height: 100%;
box-shadow: 0 0 8px 1px #fff;
width: 80%;
margin: 0 auto; /* zp-1000 */
}
}
.overlay-elements-container-inner .prototypes-container {
width: 280px;
margin: 0 auto;
}
.overlay-elements-content {
background: #fff;
padding: 20px;
}
.overlay-elements-content h2 {
color: #646464;
}
.overlay-elements-content .header-image {
border-radius: 0px;
margin-bottom: 20px;
width: 100%;
}
@media (min-width: 1000px) {
.overlay-elements-content {
padding: 40px;
vertical-align: top;
width: 62.667%;
}
.overlay-elements-content .header-image {
/*
border-radius: 60px 0 60px 0;
margin-bottom: 40px;
*/
border-radius: 0;
margin-bottom: 40px
}
}
.overlay-elements-aside {
background: #dfc3aa;
color: #fff;
padding: 20px;
}
.overlay-elements-aside .prototype-list-item {
margin-bottom: 0;
}
@media (min-width: 1000px) {
.overlay-elements-aside {
padding: 80px 20px;
vertical-align: top;
width: 30%; /* 30% */ /* width: 37.334%;*/
}
}
.overlay-elements-close {
padding: 20px 10px;
position: absolute;
right: 0;
top: 0;
}
.sub-section {
pointer-events: none;
z-index: 2;
}
.sub-section.is-visible {
pointer-events: all;
}
.pdf-viewer .pdf-container {
height: 100%;
position: relative;
width: 100%;
}
.pdf-viewer .pdf-container iframe {
height: 100%;
position: relative;
width: 100%;
}
.video-viewer .video-container {
background: rgba(0, 0, 0, 0.67);
position: relative;
width: 100%;
}
.video-viewer .video-container iframe {
height: 100%;
position: relative;
width: 100%;
}
.video-viewer .video-container .user-playable-video {
width: 100%;
display: block;
}
.video-viewer .video-container .video-placeholder-image {
height: 300px;
margin: auto;
}
.video-viewer .video-container .video-placeholder-image img {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
}
.live-viewer {
clip-path: polygon(0 80px, 100% 80px, 100% 100%, 0% 100%);
display: none;
z-index: 1;
}
@media (min-width: 1000px) {
.live-viewer {
clip-path: none;
}
}
.live-viewer.is-opened {
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
}
.live-viewer.is-visible {
display: block;
}
.live-viewer p {
margin: 0 auto 1rem;
width: 100%;
}
@media (min-width: 550px) {
.live-viewer p {
width: 80%;
}
}
@media (min-width: 750px) {
.live-viewer p {
width: 60%;
}
}
@media (min-width: 1000px) {
.live-viewer p {
width: 40%;
}
}
.live-viewer iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.live-viewer .live-video {
margin-bottom: 20px;
}
.live-viewer .live-video-inner {
position: relative;
padding: 56.25% 0 0 0;
}
.live-viewer #temporary-speaker-video {
width: 99%;
}
label {
color: #939598;
font-size: 16px;
font-weight: 600;
}
label.required:after {
content: "*";
color: #f00;
}
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
background: #fff;
border: 1px solid #ced4da;
font-family: "Monserrat", sans-serif;
font-size: 16px;
height: 32px;
line-height: 1.6em;
padding: 6px 10px 0;
}
.column.has-error input[type="email"],
.columns.has-error input[type="email"],
input[type="email"].has-error,
.column.has-error input[type="number"],
.columns.has-error input[type="number"],
input[type="number"].has-error,
.column.has-error input[type="search"],
.columns.has-error input[type="search"],
input[type="search"].has-error,
.column.has-error input[type="text"],
.columns.has-error input[type="text"],
input[type="text"].has-error,
.column.has-error input[type="tel"],
.columns.has-error input[type="tel"],
input[type="tel"].has-error,
.column.has-error input[type="url"],
.columns.has-error input[type="url"],
input[type="url"].has-error,
.column.has-error input[type="password"],
.columns.has-error input[type="password"],
input[type="password"].has-error,
.column.has-error textarea,
.columns.has-error textarea,
textarea.has-error,
.column.has-error select,
.columns.has-error select,
select.has-error {
border-color: red;
}
input[type="email"] + .error-text,
input[type="number"] + .error-text,
input[type="search"] + .error-text,
input[type="text"] + .error-text,
input[type="tel"] + .error-text,
input[type="url"] + .error-text,
input[type="password"] + .error-text,
textarea + .error-text,
select + .error-text {
margin-top: -20px;
}
.form-inline label {
margin-bottom: 0;
padding: 6px 0;
}
.error-message {
background: rgba(255, 0, 0, 0.1);
border: 1px solid red;
border-radius: 2px;
color: red;
padding: 0.5em;
}
.error-text {
color: red;
}
.helper-text {
font-size: 0.8em;
line-height: 1.6em;
margin-bottom: 10px;
}
#home-page .video,
#home-page .video-node {
background-color: #ffffff;
display: none;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
@media (min-width: 1200px) {
#home-page .video,
#home-page .video-node {
overflow: hidden;
}
}
#home-page .video > .placeholder,
#home-page .video > .background,
#home-page .video-node > .placeholder,
#home-page .video-node > .background {
background-color: #FFFFFF;
height: 100%;
left: 50%;
min-height: 300px;
outline: none;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
-ms-user-select: none;
user-select: none;
}
#home-page .btn-view-panel,
#home-page .btn-view-video {
padding: 0;
margin-bottom: 15px;
border: 0;
}
@media (min-width: 1000px) {
#home-page .btn-view-panel,
#home-page .btn-view-video {
width: 100%;
}
}
#home-page .btn-view-panel img,
#home-page .btn-view-video img {
display: block;
width: 100%;
}
#home-page .overlay-elements-container {
z-index: 1;
}
#home-page .continue-exploring-content-container {
display: table;
table-layout: fixed;
width: 100%;
}
#home-page .continue-exploring-content-container .continue-exploring-content {
padding-left: 10px;
}
#home-page
.continue-exploring-content-container
.continue-exploring-content:first-child {
padding-left: 0;
padding-right: 10px;
}
@media (min-width: 750px) {
#home-page .continue-exploring-content-container .continue-exploring-content {
width: 50%;
display: table-cell;
}
}
#home-page
.continue-exploring-content-container
.continue-exploring-content
h3 {
margin-bottom: 1rem;
}
#home-page
.continue-exploring-content-container
.continue-exploring-content
.continue-exploring-content-video,
#home-page
.continue-exploring-content-container
.continue-exploring-content
.continue-exploring-content-lit {
background: rgba(255, 255, 255, 0.3);
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.3),
rgba(255, 255, 255, 0)
);
padding: 20px 20px 0;
}
#home-page .continue-exploring-footer {
padding: 0 20px;
}
#home-page .btn-double-lined {
display: block;
margin: 30px auto;
height: 54px;
}
#home-page .btn-double-lined .text {
padding: 3px 12px;
}
#home-page [data-name="speaker"] .view-video,
#home-page .btn-live-video {
width: auto;
min-width: 360px;
height: 54px;
}
.copyright {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7));
font-size: 11px;
line-height: 1.2em;
padding: 10px 30px 20px;
text-align: center;
}
.copyright .copyright-intended-for {
font-size: 14px;
line-height: 1.2em;
margin-bottom: 10px;
}
#content > .copyright {
display: none;
}
@media (min-width: 1000px) {
#content > .copyright {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 5;
}
}
.overlay-modal {
background: rgba(255, 255, 255, 0.5);
display: none;
height: 100%;
left: 0;
/* overflow: auto; */
padding: 20px;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
overflow: hidden;
}
.overlay-modal > .container {
height: 100%;
}
.overlay-modal .btn-close {
color: #646464;
text-shadow: none;
}
.overlay-modal .btn-close:focus,
.overlay-modal .btn-close:hover {
color: #646464;
}
@media (min-width: 1000px) {
.overlay-modal {
padding: 40px;
}
}
.overlay-modal-inner {
background: #fff;
border-radius: 0;
min-height: 300px;
overflow: hidden;
position: relative;
}
@media (min-width: 1000px) {
.overlay-modal-inner iframe {
height: 100%;
background-color: #fff;
}
}
@media (min-width: 1000px) {
.overlay-modal-inner {
border-radius: 0;
height: 100%;
}
}
.leads-form-overlay-container {
height: 100%;
left: 0;
padding: 0;
position: absolute;
top: 0;
transition: all 0.2s;
width: 100%;
z-index: 5;
}
.overlay-welcome {
height: 100%;
left: 0;
opacity: 0;
overflow: auto;
padding: 40px 20px;
pointer-events: none;
position: absolute;
top: 0;
transition: all 0.3s;
width: 100%;
z-index: 10;
}
.overlay-welcome > .container {
min-height: 100%;
max-width: 960px;
}
@media (min-width: 750px) {
.overlay-welcome > .container.container-small {
max-width: 720px;
}
}
.overlay-welcome .btn-close {
color: #646464;
text-shadow: none;
}
.overlay-welcome .btn-close:focus,
.overlay-welcome .btn-close:hover {
color: #646464;
}
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
}
@media (min-width: 1000px) {
.overlay-welcome {
padding: 60px;
}
}
@media (min-width: 1400px) {
.overlay-welcome {
padding: 80px;
}
}
.overlay-welcome-inner {
background: #fff;
border-radius: 40px 0 40px 0;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
min-height: 300px;
overflow: hidden;
position: relative;
}
@media (min-width: 1000px) {
.overlay-welcome-inner {
border-radius: 80px 0 80px 0;
height: 100%;
}
}
.overlay-modal-content {
padding: 20px;
/*
padding: 50px;
cursor: pointer;
*/
}
@media (min-width: 1000px) {
.overlay-modal-content {
padding: 40px; /* padding: 50px */
}
}
.welcome-page {
display: none;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 80%;
}
.welcome-page-registration .btn-primary {
margin-bottom: 1em;
}
.welcome-page-welcome {
display: block;
}
.overlay-viewer {
background: rgba(0, 0, 0, 0.67);
color: #fff;
height: 100%;
left: 0;
overflow: auto;
padding: 20px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
transition: all 0.3s;
width: 100%;
z-index: 10;
}
.overlay-viewer > .container {
height: 100%;
}
.overlay-viewer h3 {
background: rgba(0, 0, 0, 0.67);
border: 0;
margin: 0;
padding: 10px 40px 6px;
padding-left: 90px;
}
@media (min-width: 750px) {
.overlay-viewer h3 {
padding: 10px 40px 6px;
}
}
.overlay-viewer .btn-close-pdf,
.overlay-viewer .btn-close-video {
position: absolute;
left: 20px;
top: 10px;
}
.overlay-viewer.is-visible {
opacity: 1;
pointer-events: all;
}
@media (min-width: 1000px) {
.overlay-viewer {
padding: 40px;
}
}
.mobile-rotate-buttons {
height: 0;
overflow: hidden;
transition: all 0.5s;
}
.mobile-rotate-buttons .td {
background-color: #658c1b;
border-bottom: 1px solid #fff;
}
.mobile-rotate-buttons.is-visible {
height: 61px;
}
@media (min-width: 1000px) {
.mobile-rotate-buttons {
display: none !important;
}
}
.page {
position: relative;
table-layout: fixed;
}
.main-full-height {
width: 100%;
height: 100%;
overflow-x: hidden;
}
.form-overlay {
display: none;
}
.form-overlay .container {
background: #ed1a23;
}
body.is-main .form-overlay .container {
background: #ed1a23;
}
body.is-main-2 .form-overlay .container {
background: #ed1a23;
}
/*************** CUSTOMIZED *******************/
/*
.poligono {
clip-path: polygon(0 0, 20% 0, 50% 100%, 0 100%)
} */
.table-bp-large {
background-color: #fff;
}
p {
font-size: 16px;
line-height: 22px;
margin-bottom: 16px;
text-align: justify-all
}
.welcome-page h4 {
text-align: center;
margin-top: 22px;
margin-bottom: 12px
}
.welcome-page-instructions h4 {
text-align: center;
margin-top: 22px;
margin-bottom: 12px;
text-transform: uppercase
}
.text-center {
text-align: center
}
.text-justify {
text-align: justify
}
.btn-get-started {
margin-bottom: 15px;
font-size: calc(0.8em + 0.8vw)
}
.btn-welcome-next {
margin-bottom: 15px;
font-size: calc(0.8em + 0.8vw)
}
.container-form {
padding-top: 25px;
padding-bottom: 25px
}
.link-our-products-title {
display: block;
font-weight: 700
}
.link-our-products-title:focus,
.link-our-products-title:hover {
color: #6e4d1e;
text-decoration: underline
}
.icon-min img {
width: 43px;
height: auto
}
a {
text-decoration: none
}
.copyright{
background: #ffffff;
font-size:12px;
line-height:1.2em;
padding:13px 30px 20px;
text-align:center;
position: absolute;
bottom: 0!important;
z-index: 99999;
margin: 0 auto;
width: 100%;
height: 40px;
}
.content-popup {
width: 320px;
height: 100px;
position: absolute;
left: 350px;
padding-top: 70px
}
.blank-space-1 {
margin-top: 10px
}
.blank-space-2 {
margin-top: 20px
}
.blank-space-3 {
margin-top: 30px
}
.blank-space-4 {
margin-top: 40px
}
.blank-space-5 {
margin-top: 50px
}
.blank-space-6 {
margin-top: 60px
}
.blank-space-7 {
margin-top: 70px
}
.spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://alexiodigital.com/proyectos/virtual-experience/virtual-experience/images/spinner.gif')
50% 50% no-repeat rgb(249,249,249, .5);
}
/*************** Pantallas pequeñas (móviles en landscape de más de 576px) *******************/
@media (min-width: 576px) {
.btn-close {
color: #84bd00;
}
.sdesk {
display: none
}
.smov {
display: block
}
.table .table-bp-large .mvv {
display: none
}
.btn-main-booth, .btn-main-booth-xt, .btn-secondary-booth {
background-color: #ee7203;
border: 2px solid #fff;
border-radius: 10px 10px 10px 10px
}
.btn-home {
left: 50%
}
.container {
width: 100%;
margin-bottom: 100px;
padding: 0;
}
}
@media only screen and (min-width:600px) { /* mq */
.btn-close {
color: #84bd00;
}
.sdesk {
display: none
}
.smov {
display: block
}
.btn-main-booth,
.btn-main-booth-xt,
.btn-secondary-booth {
background-color: #ee7203;
border: 2px solid #fff;
border-radius: 10px 10px 10px 10px
}
}
@media only screen and (max-width:600px) { /* mq */
.btn-close {
color: #84bd00;
}
.sdesk {
display: none
}
.smov {
display: block
}
.table .table-bp-large .mvv {
display: none
}
.btn-main-booth,
.btn-main-booth-xt,
.btn-secondary-booth {
background-color: #ee7203;
border: 2px solid #fff;
border-radius: 10px 10px 10px 10px
}
.btn-home {
left: 50%
}
/*
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 40%!important;
} */
}
@media only screen and (max-width:768px) {
.table .table-bp-large .mvv {
display: none
}
.btn-close {
color: #84bd00;
}
.content-popup {
width: 320px;
height: 100px;
position: absolute;
left: 270px;
padding-top: 70px;
top: 0px; /* zp*/
}
.poligono {
clip-path: polygon(0 0, 22% 0, 44% 100%, 0 100%)
}
}
/*************** Pantallas medianas (tablets de más de 768px) *******************/
@media (min-width: 768px) {
.btn-close {
color: #84bd00;
}
.sdesk {
display: none
}
.smov {
display: block
}
.table .table-bp-large .mvv {
display: none
}
.btn-main-booth, .btn-main-booth-xt, .btn-secondary-booth {
background-color: #ee7203;
border: 2px solid #fff;
border-radius: 10px 10px 10px 10px
}
.btn-home {
left: 50%
}
.container {
width: 85%;
margin-bottom: 100px;
padding: 0;
}
.content-popup {
width: 320px;
height: 100px;
position: absolute;
left: 270px;
padding-top: 70px;
top: 0px; /* zp*/
}
.poligono {
clip-path: polygon(0 0, 22% 0, 44% 100%, 0 100%)
}
}
/*************** Pantallas grandes (desktops de más de 992px) *******************/
@media (min-width: 992px) {
.btn-close {
color: #fff;
}
.sdesk {
display: block
}
.smov {
display: none
}
.table .table-bp-large .mvv {
display: block
}
.btn-main-booth, .btn-main-booth-xt, .btn-secondary-booth {
background-color: #ee7203;
border: 2px solid #fff;
border-radius: 50%!important
}
.btn-main-booth-xt:hover, .btn-main-booth:hover, .btn-secondary-booth:hover {
width: auto;
background-color: #ee7203;
border: 2px solid #fff;
border-radius: 10px 10px 10px 10px!important
}
.btn-home {
left: 50%
}
.container {
width: 85%;
margin-bottom: 100px;
padding: 0;
}
}
/*************** Pantallas muy grandes (desktops de más de 1200px) *******************/
@media (min-width: 1200px) {
.btn-close {
color: #fff;
}
.sdesk {
display: block
}
.smov {
display: none
}
.btn-main-booth, .btn-main-booth-xt, .btn-secondary-booth {
background-color: #ee7203;
border: 2px solid #fff;
border-radius: 50%!important
}
.btn-main-booth-xt:hover, .btn-main-booth:hover, .btn-secondary-booth:hover {
width: auto;
background-color: #ee7203;
border: 2px solid #fff;
border-radius: 10px 10px 10px 10px!important
}
.btn-home {
left: 50%
}
.container {
width: 85%;
margin-bottom: 100px;
padding: 0;
}
}
.content-popup {
width: 310px;
height: 100px;
position: absolute;
left: 310px;
padding-top: 70px;
top: 0px; /* zp*/
}
.poligono {
clip-path: polygon(0 0, 22% 0, 44% 100%, 0 100%)
}
.table-bp-large {
background-color: #fff
}
p {
font-size: 15px;
line-height: 22px;
margin-bottom: 16px;
text-align: justify-all
}
.welcome-page h4 {
text-align: center;
margin-top: 22px;
margin-bottom: 12px
}
.welcome-page-instructions h4 {
text-align: center;
margin-top: 22px;
margin-bottom: 12px;
text-transform: uppercase
}
.text-center {
text-align: center
}
.text-justify {
text-align: justify
}
.btn-get-started {
margin-bottom: 15px;
font-size: calc(0.8em + 0.8vw)
}
.btn-welcome-next {
margin-bottom: 15px;
font-size: calc(0.8em + 0.8vw)
}
.container-form {
padding-top: 25px;
padding-bottom: 25px
}
.link-our-products-title {
display: block;
font-weight: 700
}
.link-our-products-title:focus,
.link-our-products-title:hover {
color: #6e4d1e;
text-decoration: underline
}
.blank-space-2 {
margin-top: 20px
}
.blank-space-3 {
margin-top: 30px
}
.blank-space-4 {
margin-top: 40px
}
.blank-space-5 {
margin-top: 50px
}
.blank-space-6 {
margin-top: 60px
}
.blank-space-7 {
margin-top: 70px
}
/*
loading */
/*.spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://www.mpf.com.pe/virtual-experience/images/spinner.gif')
50% 50% no-repeat rgb(249,249,249);
}*/
/*.container {
-webkit-overflow-scrolling: touch;
}
.container::-webkit-scrollbar {
display: none;
height: 0;
width: 0;
}*/
.opacity-modal-content-8 {
background-color:#84bd00; background-color: rgba(255, 255, 255, .8);
}
.opacity-modal-content-0 {
background-color:#84bd00; background-color: rgba(255, 255, 255, .0);
}
.output_message {
display: none;
color: #84BD00;
text-transform: uppercase;
font-weight: 700;
}
/*
.information_message {
display: block!important;
}*/
/* iphone */
/* 2340x1080 pixels at 476ppi - iPhone 12 Mini */
@media only screen
and (device-width: 375px)
and (device-height: 812px)
and (-webkit-device-pixel-ratio: 3) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
height: fit-content;
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}
/* 2532x1170 pixels at 460ppi - iPhone 12 and iPhone 12 Pro */
@media only screen
and (device-width: 390px)
and (device-height: 844px)
and (-webkit-device-pixel-ratio: 3) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
height: fit-content;
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}
/* 2778x1284 pixels at 458ppi - iPhone 12 Pro Max */
@media only screen
and (device-width: 428px)
and (device-height: 926px)
and (-webkit-device-pixel-ratio: 3) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
height: fit-content;
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}
/* 1792x828px at 326ppi - iPhone 11 */
@media only screen
and (device-width: 414px)
and (device-height: 896px)
and (-webkit-device-pixel-ratio: 2) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
height: fit-content;
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}
/* 2436x1125px at 458ppi - iPhone 11 Pro */
@media only screen
and (device-width: 375px)
and (device-height: 812px)
and (-webkit-device-pixel-ratio: 3) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
height: fit-content;
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}
/* 2688x1242px at 458ppi - iPhone 11 Pro Max */
@media only screen
and (device-width: 414px)
and (device-height: 896px)
and (-webkit-device-pixel-ratio: 3) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
height: 100%; /* height: fit-content; - zp */
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}
/* 2436x1125px at 458ppi - Apple iPhone X */
@media only screen
and (device-width: 375px)
and (device-height: 812px)
and (-webkit-device-pixel-ratio: 3) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
height: 100%; /* height: fit-content; - zp */
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}
/* 1920x1080px at 401ppi - Apple iPhone 8 Plus */
@media only screen
and (device-width: 414px)
and (device-height: 736px)
and (-webkit-device-pixel-ratio: 3) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
height: 100%; /* height: fit-content; - zp */
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}
/* 1920x1080px at 401ppi - Apple iPhone 7 Plus */
@media only screen
and (device-width: 414px)
and (device-height: 736px)
and (-webkit-device-pixel-ratio: 3) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
hheight: 100%; /* height: fit-content; - zp */
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}
/* 1920x1080px at 326ppi - Apple iPhone 6s Plus */
@media only screen
and (device-width: 414px)
and (device-height: 736px)
and (-webkit-device-pixel-ratio: 3) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
height: 100%; /* height: fit-content; - zp */
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}
/* 1334x750px at 326ppi - Apple iPhone SE (2020) */
@media only screen
and (device-width: 735px)
and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
height: 100%; /* height: fit-content; - zp */
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}
/* 1792x828px at 326ppi - Apple iPhone 11 */
@media only screen
and (device-width: 414px)
and (device-height: 896px)
and (-webkit-device-pixel-ratio: 2) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
height: 100%; /* height: fit-content; - zp */
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}
/* 1792x828px at 326ppi - Apple iPhone XR */
@media only screen
and (device-width: 414px)
and (device-height: 896px)
and (-webkit-device-pixel-ratio: 2) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
height: 100%; /* height: fit-content; - zp */
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}
/* 1334x750px at 326ppi - Apple iPhone 8 */
@media only screen
and (device-width: 375px)
and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
height: 100%; /* height: fit-content; - zp */
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}
/* 1334x750px at 326ppi - Apple iPhone 7 */
@media only screen
and (device-width: 375px)
and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
height: 100%; /* height: fit-content; - zp */
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}
/* 1336x640px at 326ppi - Apple iPhone SE */
@media only screen
and (device-width: 320px)
and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
height: 100%; /* height: fit-content; - zp */
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}
/* 1334x750px at 326ppi - Apple iPhone 6s */
@media only screen
and (device-width: 375px)
and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
height: 100%; /* height: fit-content; - zp */
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}
/* 1334x750px at 326ppi - Apple iPhone 6 */
@media only screen
and (device-width: 375px)
and (device-height: 667px)
and (-webkit-device-pixel-ratio: 2) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
height: 100%; /* height: fit-content; - zp */
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}
/* 1136x640px at 326ppi - Apple iPhone 5s */
@media only screen
and (device-width: 320px)
and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
height: 100%; /* height: fit-content; - zp */
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}
/* 1136x640px at 326ppi - Apple iPhone 5c */
@media only screen
and (device-width: 320px)
and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
height: 100%; /* height: fit-content; - zp */
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}
/* 1136x640px at 326ppi - Apple iPhone 5 */
@media only screen
and (device-width: 320px)
and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2) {
.overlay-welcome.is-visible {
opacity: 1;
pointer-events: all;
height: 100%; /* height: fit-content; - zp */
}
.table-bp-large {
display: block;
height: 1024px;
}
main {
height: 1024px;
}
.welcome-page-instructions img {
display: block;
margin: 0 auto 1em;
max-width: 208px;
width: 30%!important;
}
}