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,
img {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
}
html {
height: 101%;
font-size: 62.5%;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section,
img,
ol,
ul {
list-style: none;
}
video {
display: block;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
strong {
font-weight: bold;
}
input {
outline: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
text-decoration: none;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
content: '';
display: table;
}
.clearfix:after {
clear: both;
}
a[href^=tel] {
color: inherit;
text-decoration: none;
}
html,
body {
height: 100%;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-size: 1.6rem;
line-height: 24px;
line-height: 2.4rem;
color: #666;
background: #fff;
}
.no-max-width {
width: 100%;
float: left;
position: relative;
overflow: hidden;
}
.max-width {
width: 100%;
max-width: 1600px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
a,
a:visited {
color: #d04b8f;
}
a:hover,
a:active,
a.active {
color: #47596d;
}
h1,
h2,
h3,
h4,
h5,
h6 {
width: 100%;
float: left;
font-weight: 700;
color: #47596d;
padding: 15px 0 10px 0;
}
h1 {
font-size: 36px;
font-size: 3.6rem;
line-height: 48px;
line-height: 4.8rem;
padding: 15px 0;
}
h2 {
font-size: 24px;
font-size: 2.4rem;
line-height: 28px;
line-height: 2.8rem;
color: #47596d;
padding: 15px 0 15px 0;
}
h3 {
font-size: 20px;
font-size: 2rem;
line-height: 28px;
line-height: 2.8rem;
color: #d04b8f;
}
@media (min-width: 500px) {
h3 {
font-size: 24px;
font-size: 2.4rem;
line-height: 28px;
line-height: 2.8rem;
}
}
h4 {
font-size: 20px;
font-size: 2rem;
line-height: 26px;
line-height: 2.6rem;
color: #d04b8f;
}
h5 {
font-size: 20px;
font-size: 2rem;
line-height: 26px;
line-height: 2.6rem;
color: #d04b8f;
}
h6 {
font-size: 16px;
font-size: 1.6rem;
line-height: 26px;
line-height: 2.6rem;
font-weight: 600;
}
p {
width: 100%;
float: left;
padding: 0 0 15px 0;
}
img {
width: 100%;
max-width: 100%;
height: auto;
float: left;
}
sup {
vertical-align: super;
font-size: smaller;
}
.button {
width: 100%;
float: left;
text-align: center;
margin: 30px 0;
}
.button a,
.button a:visited {
display: inline-block;
margin: 0 auto;
float: none;
min-width: 100px;
font-size: 13px;
font-size: 1.3rem;
line-height: 20px;
line-height: 2rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
background: #d04b8f;
border-radius: 5px;
padding: 11px 17px;
}
.button a:hover {
background: #47596d;
}
.small p {
font-size: 12px;
font-size: 1.2rem;
line-height: 18px;
line-height: 1.8rem;
}
/*--- HEADER ---*/
.header {
width: 100%;
position: fixed;
top: 0;
left: 0;
background: #fff;
height: 60px;
z-index: 100;
border-bottom: 1px solid #E6E6E6;
}
a.branding,
a.branding:visited {
position: absolute;
top: 17px;
left: 30px;
width: 170px;
height: 27px;
background: url(../svg/fallback/monidor-logo.png) left center no-repeat;
background-image: url(../svg/monidor-logo.svg), none;
z-index: 2;
opacity: 1;
text-indent: -9999px;
}
a.branding:hover {
opacity: 0.9;
}
.menu {
width: 100%;
float: right;
background: #fff;
padding: 0 0 10px 0;
border-bottom: 1px solid #E6E6E6;
}
@media (min-width: 500px) {
.menu {
width: 260px;
border-left: 1px solid #E6E6E6;
}
}
@media (min-width: 1120px) {
.menu {
width: auto;
float: right;
background: none;
padding: 0 15px 0 0;
border: none;
}
}
.menu li {
display: inline;
float: left;
width: 100%;
text-align: right;
border-bottom: 1px solid #F2f2f2;
}
@media (min-width: 1120px) {
.menu li {
width: auto;
text-align: left;
padding: 20px 15px;
border: none;
}
}
.menu a,
.menu a:visited,
.menu li.dropdown span {
display: block;
width: 100%;
font-size: 13px;
font-size: 1.3rem;
line-height: 20px;
line-height: 2rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #111;
padding: 10px 30px;
}
@media (min-width: 1120px) {
.menu a,
.menu a:visited,
.menu li.dropdown span {
width: auto;
padding: 0 0;
}
}
.menu li.dropdown span {
color: #111;
font-weight: 700;
border-bottom: 1px solid #f1f1f1;
}
@media (min-width: 1120px) {
.menu li.dropdown span {
font-weight: 700;
cursor: pointer;
border-bottom: none;
}
.menu li.dropdown span:hover,
.menu li.dropdown:hover span {
color: #d04b8f;
}
}
.menu a:hover {
color: #d04b8f;
}
.menu li.lang {
padding: 0 30px;
text-align: right;
border: none;
}
@media (min-width: 1120px) {
.menu li.lang {
display: none;
}
}
.menu li.lang a,
.menu li.lang a:visited {
width: auto;
float: right;
text-align: right;
padding: 10px 5px;
}
.menu li.lang a:hover {
color: #333;
}
.menu li.lang a.active {
opacity: 0.5;
}
.menu .active a {
color: #d04b8f;
}
@media (min-width: 1120px) {
.menu .active a {
color: #111;
border-bottom: 3px solid #d04b8f;
}
}
.menu .button {
display: inline;
float: right;
width: auto;
text-align: center;
margin: 0 30px 0 0;
padding: 13px 0;
border: none;
}
@media (min-width: 1120px) {
.menu .button {
width: auto;
margin: 0 0 0 10px;
}
}
.menu .button a,
.menu .button a:visited {
display: block;
min-width: 0;
font-size: 13px;
font-size: 1.3rem;
line-height: 20px;
line-height: 2rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
background: #d04b8f;
border-radius: 3px;
padding: 6px 20px;
}
.menu .button a:hover {
background: #47596d;
}
.menu .dropdown {
position: relative;
background: #fff;
}
@media (min-width: 1120px) {
.menu .dropdown {
background: url(../svg/fallback/arrow-down.png) right 10px no-repeat;
background-image: url(../svg/arrow-down.svg), none;
padding-right: 30px;
}
}
.menu .dropdown-content {
overflow: hidden;
width: 100%;
/*
li:first-child {padding-top: 10px;}
li:last-child {padding-bottom: 10px;}
*/
}
@media (min-width: 1120px) {
.menu .dropdown-content {
display: none;
position: fixed;
top: 60px;
width: 280px;
margin: 0 0 0 -20px;
border-radius: 0 0 5px 5px;
}
}
.menu .dropdown-content li {
display: inline-block;
width: 100%;
padding: 0px;
cursor: pointer;
border: none;
background: #f9f9f9;
}
@media (min-width: 1120px) {
.menu .dropdown-content li {
border-bottom: 1px solid #f1f1f1;
background: #fff;
/* padding: 5px 0px; */
border: none;
}
}
.menu .dropdown-content a,
.menu .dropdown-content a:visited {
display: inline-block;
width: 100%;
text-transform: none;
padding: 10px 30px;
color: #47596d;
font-size: 14px;
font-size: 1.4rem;
line-height: 22px;
line-height: 2.2rem;
letter-spacing: normal;
}
@media (min-width: 1120px) {
.menu .dropdown-content a,
.menu .dropdown-content a:visited {
padding: 10px 20px;
font-weight: 700;
}
}
@media (min-width: 1120px) {
.menu .dropdown-content li:first-child a {
border-radius: 5px 5px 0 0;
}
.menu .dropdown-content li:last-child a {
border-radius: 0 0 5px 5px;
}
}
.menu .dropdown-content a:hover {
color: #d04b8f;
/* background: #f1f1f1; */
}
.menu .dropdown-content li.active a {
color: #d04b8f;
border: none;
}
.dropdown:hover .dropdown-content {
display: block;
}
/*--- BANNER ---*/
.header-wrap {
width: 100%;
position: fixed;
top: 60px;
left: 0;
z-index: 10;
}
.banner {
width: 100%;
float: left;
padding: 20px;
background: #83e5d7;
}
.banner p {
width: 100%;
font-weight: 500;
text-align: center;
color: #293c52;
padding: 0;
}
.banner a,
.banner a:visited {
font-weight: 700;
color: #293c52;
}
/*muista nostaa kielivalikko korkeammalle kun banneri ei ole käytössä*/
.menu-lang {
display: none;
}
@media (min-width: 1120px) {
.menu-lang {
display: block;
float: right;
padding-right: 20px;
/* display: block; position: absolute; top: 60px; right: 20px; z-index: 100; */
}
}
.menu-lang p {
font-size: 14px;
font-size: 1.4rem;
line-height: 42px;
line-height: 4.2rem;
font-weight: 700;
color: #333;
}
@media (min-width: 900px) {
.menu-lang p {
color: #fff;
}
}
.menu-lang a,
.menu-lang a:visited {
font-size: 14px;
font-size: 1.4rem;
line-height: 42px;
line-height: 4.2rem;
font-weight: 700;
color: #333;
padding: 0 5px;
}
@media (min-width: 1120px) {
.menu-lang a,
.menu-lang a:visited {
color: #fff;
}
}
.menu-lang a:hover,
.menu-lang a.active {
opacity: 0.5;
}
.menu-sub {
width: 100%;
float: left;
max-width: 400px;
}
.menu-sub li {
display: inline-block;
width: 100%;
}
.menu-sub a,
.menu-sub a:visited {
width: 100%;
display: inline-block;
font-size: 16px;
font-size: 1.6rem;
line-height: 20px;
line-height: 2rem;
font-weight: 700;
color: #47596d;
padding: 12px 0;
border-bottom: 1px solid #E6E6E6;
}
.menu-sub li ul li a,
.menu-sub li ul li a:visited {
width: 100%;
display: inline-block;
font-size: 16px;
font-size: 1.6rem;
line-height: 30px;
line-height: 3rem;
font-weight: 700;
color: #47596d;
padding: 7px 0 7px 10px;
border-bottom: 1px solid #E6E6E6;
}
.menu-sub li ul li a:hover {
color: #d04b8f;
}
.menu-sub li ul {
padding: 0;
}
.menu-sub li ul li.active a {
color: #ccc;
}
.menu-sub .active a {
color: #ccc;
}
.menu-sub a:hover {
color: #d04b8f;
}
/*--- FULL SCREEN IFRAME ---*/
iframe.full {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 999999;
}
/*--- MONIDOR ACADEMY ---*/
.academy {
width: 100%;
float: left;
text-align: center;
/*
.max-width {
@media (min-width: 900px) {padding: 0 40px;}
}
*/
}
.academy h2 {
font-size: 32px;
font-size: 3.2rem;
line-height: 40px;
line-height: 4rem;
}
.academy .container {
text-align: left;
}
.a-menu-lang {
position: absolute;
top: 0;
left: 0;
padding: 0 20px;
text-align: center;
width: 100%;
background: #f2f2f2;
z-index: 2;
}
@media (min-width: 1120px) {
.a-menu-lang {
width: auto;
background: none;
padding: 0 30px;
}
}
.a-menu-lang li {
display: inline-block;
width: auto;
float: none;
padding: 10px 10px;
}
@media (min-width: 1120px) {
.a-menu-lang li {
padding: 20px 10px;
}
}
.a-menu-lang a,
.a-menu-lang a:visited {
display: block;
font-size: 13px;
font-size: 1.3rem;
line-height: 20px;
line-height: 2rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #111;
}
.a-menu-lang a:hover {
color: #d04b8f;
}
.a-menu-lang .active a {
color: #d04b8f;
}
@media (min-width: 1120px) {
.a-menu-lang .active a {
color: #111;
border-bottom: 3px solid #d04b8f;
}
}
.a-menu-lang2 {
width: 100%;
float: left;
padding: 0 20px 10px 20px;
text-align: center;
z-index: 2;
}
@media (min-width: 1120px) {
.a-menu-lang2 {
padding: 0 30px;
}
}
.a-menu-lang2 li {
display: inline-block;
width: auto;
float: none;
padding: 10px 10px;
}
@media (min-width: 1120px) {
.a-menu-lang2 li {
padding: 20px 10px;
}
}
.a-menu-lang2 a,
.a-menu-lang2 a:visited {
display: block;
font-size: 13px;
font-size: 1.3rem;
line-height: 20px;
line-height: 2rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #111;
}
.a-menu-lang2 a:hover {
color: #d04b8f;
}
.a-menu-lang2 .active a {
border-bottom: 3px solid #d04b8f;
}
@media (min-width: 1120px) {
.a-menu-lang2 .active a {
color: #111;
}
}
.a-header {
width: 100%;
float: left;
text-align: center;
padding: 90px 20px 20px 20px;
}
@media (min-width: 900px) {
.a-header {
padding: 100px 25px 10px 25px;
}
}
.a-header a,
.a-header a:visited {
display: inline-block;
width: 100%;
margin: 0 auto;
height: 60px;
float: none;
background: url(../svg/fallback/monidor-academy.png) center center no-repeat;
background-image: url(../svg/monidor-academy.svg), none;
text-indent: -9999px;
}
@media (min-width: 500px) {
.a-header a,
.a-header a:visited {
height: 80px;
}
}
@media (min-width: 1120px) {
.a-header a,
.a-header a:visited {
height: 90px;
}
}
.a-hero {
width: 100%;
float: left;
position: relative;
background: #47596d;
text-align: center;
padding: 20px;
}
.a-hero p {
max-width: 700px;
margin: 0 auto;
float: none;
color: #fff;
padding: 0 0 40px 0;
}
.a-hero h1 {
padding-bottom: 0px;
margin-bottom: 0;
line-height: 1;
}
.a-hero h2 {
font-size: 24px;
font-size: 2.4rem;
color: #fff;
font-weight: 400;
}
.a-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-size: cover;
background-position: center center;
}
.a-icon {
position: absolute;
top: 40px;
left: 0;
width: 100%;
height: 60px;
background-position: center top;
background-repeat: no-repeat;
}
.a-title {
width: 100%;
float: left;
text-align: center;
color: #fff;
padding: 100px 0 0px 0;
}
.a-container {
padding: 0 0 100px 0;
}
.accordion {
width: 100%;
height: 100%;
float: left;
position: relative;
-webkit-transition: 0.4s;
transition: 0.4s;
cursor: pointer;
}
.accordion .max-width {
max-width: 700px;
padding: 50px 30px 10px 30px;
}
.accordion p {
padding: 0;
}
.time {
position: absolute;
top: 20px;
right: 20px;
padding: 0 0 0 24px;
background: url(../svg/fallback/clock.png) left center no-repeat;
background-image: url(../svg/clock.svg), none;
background-size: 18px 18px;
color: #47596d;
}
/*
.watch-screen1 {width: 100%; max-width: 400px; float: left position: relative;
a, a:visited {width: 100%; display: block;}
a, a:visited {
img {width: 100%; position: absolute; bottom: 0; left: 0; }
.img2 {opacity: 0; transition: 0.2s;}
.img1 {opacity: 1; transition: 0.2s;}
}
a:hover > .img1 {opacity: 0.5;}
a:hover > .img2 {opacity: 1;}
}
*/
.arrow {
width: 100%;
height: 62px;
float: left;
}
.arrow-in {
width: 62px;
height: 62px;
position: absolute;
bottom: -31px;
left: 50%;
margin: 0 0 0 -31px;
background: url(../svg/fallback/arrow-d.png) center center no-repeat;
background-image: url(../svg/arrow-d.svg), none;
z-index: 11;
}
.accordion.active > .arrow > .arrow-in {
background: url(../svg/fallback/arrow-u.png) center center no-repeat;
background-image: url(../svg/arrow-u.svg), none;
}
.a-line {
width: 100%;
height: 1px;
position: absolute;
bottom: 0;
background: #47596d;
/* margin: 0 0 -31px 0; */
}
.panel {
width: 100%;
float: left;
position: relative;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.2s ease-out;
transition: max-height 0.2s ease-out;
background: url(../images/accordion-panel-bg.jpg) center top no-repeat #F6F6F7;
}
.panel .max-width {
max-width: 700px;
padding: 70px 30px 80px 30px;
z-index: 10;
}
.panel iframe {
margin: 20px 0;
}
.panel ul {
width: 100%;
float: left;
list-style: none;
padding: 0 0 15px 0;
}
.panel ul li {
width: 100%;
float: left;
color: #666;
padding-left: 16px;
text-indent: -12px;
}
.panel ul li::before {
content: "• ";
font-size: 20px;
color: #d04b8f;
}
.panel a,
.panel a:visited {
color: #d04b8f;
}
.panel a:hover {
color: #111;
}
.panel h6 {
padding-top: 0;
}
.panel img {
width: auto;
padding: 10px 0 25px 0;
}
.panel ol {
list-style: decimal;
padding: 0 0 15px 20px;
}
.panel h3,
.panel h4,
.panel h5,
.panel h6 {
color: #47596d;
}
.panel p {
padding: 0 0 15px 0;
}
.a-video {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%;
/* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
margin: 20px 0;
}
.a-video iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.palaute {
width: 100%;
float: left;
padding: 70px 30px 50px 30px;
}
.palaute h3 {
font-weight: 400;
text-align: center;
font-size: 24px;
font-size: 2.4rem;
line-height: 32px;
line-height: 3.2rem;
padding: 0;
color: #47596d;
}
/*---index - TOP 2024 slider --*/
#slider-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
/* Fullscreen slider elements */
.slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
-webkit-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
opacity: 0;
/* Start fully transparent */
}
/* The first slider is initially visible */
.slider.visible {
opacity: 1;
}
#slider2 {
background-position: 20% center;
}
@media (min-width: 800px) {
#slider2 {
background-position: center;
}
}
/*--- index - TOP -v2 ---*/
.highlight-v2 {
width: 100%;
float: left;
min-height: 480px;
height: 100%;
background: #666;
position: relative;
overflow: hidden;
}
.highlight-v2 .max-width {
margin: 50px 0 0 0;
max-width: 3000px;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.highlight-v2 h1 {
color: #fff;
font-size: 26px;
font-size: 2.6rem;
line-height: 38px;
line-height: 3.8rem;
text-shadow: 1px 1px 20px #666;
}
@media (min-width: 550px) and (min-height: 400px) {
.highlight-v2 h1 {
font-size: 36px;
font-size: 3.6rem;
line-height: 48px;
line-height: 4.8rem;
}
}
@media (min-width: 700px) and (min-height: 700px) {
.highlight-v2 h1 {
font-size: 56px;
font-size: 5.6rem;
line-height: 70px;
line-height: 7rem;
}
}
.highlight-v2 .button a,
.highlight-v2 .button a:visited {
background: url(../svg/fallback/icon-play.png) 15px center no-repeat #d04b8f;
background-image: url(../svg/icon-play.svg), none;
padding: 15px 20px 15px 55px;
}
.highlight-v2 .button a:hover {
background: url(../svg/fallback/icon-play.png) 15px center no-repeat #47596d;
background-image: url(../svg/icon-play.svg), none;
}
.bg-woman {
background: url(../images/night-infusion-monidor.jpg) center center no-repeat;
background-size: cover;
}
.bg-hands {
background: url(../images/infusion-monitor-monidrop.jpg) center center no-repeat;
background-size: cover;
}
.bg-iv {
background: url(../images/bg-iv.jpg) center center no-repeat;
background-size: cover;
}
.bg-vitals {
background: url(../images/bg-vitals-tukiasema.jpg) center center no-repeat;
background-size: cover;
}
.hero {
width: 100%;
max-width: 1000px;
float: none;
margin: 0 auto;
text-align: center;
padding: 0 20px;
}
@media (min-width: 600px) {
.hero {
padding: 0 40px;
}
}
.hero h2,
.hero p {
color: #fff;
}
.hero h2 {
line-height: 62px;
line-height: 3.6rem;
}
.hero h1 {
font-size: 36px;
font-size: 3.6rem;
line-height: 48px;
line-height: 4.8rem;
padding: 15px 0;
}
@media (min-width: 600px) {
.hero h1 {
font-size: 56px;
font-size: 5.6rem;
line-height: 64px;
line-height: 6.4rem;
}
}
@media (min-width: 1400px) {
.hero h1 {
font-size: 64px;
font-size: 6.4rem;
line-height: 72px;
line-height: 7.2rem;
}
}
.section {
width: 100%;
float: left;
position: relative;
z-index: 1;
}
.section .line {
border-bottom: 6px solid #47596d;
}
.section h2 {
font-size: 30px;
font-size: 3rem;
line-height: 40px;
line-height: 4rem;
text-align: center;
font-weight: 700;
}
@media (min-width: 500px) {
.section h2 {
font-size: 36px;
font-size: 3.6rem;
line-height: 52px;
line-height: 5.2rem;
}
}
@media (min-width: 1000px) {
.section h2 {
font-size: 48px;
font-size: 4.8rem;
line-height: 62px;
line-height: 6.2rem;
color: #47596d;
}
}
.section-head {
width: 100%;
float: left;
padding: 30px 20px 30px 20px;
}
@media (min-width: 550px) {
.section-head {
padding: 50px 20px 30px 20px;
}
}
.video-buttons {
width: 100%;
float: left;
text-align: center;
margin: 10px 0 30px 0;
}
.video-buttons a,
.video-buttons a:visited {
display: inline-block;
/* border: 1px solid transparent; border: 1px solid rgba(255,255,255,0.7); */
}
.video-button {
width: 250px;
height: 161px;
float: none;
margin: 0 auto;
background: url(../images/videobutton-v2.png) no-repeat;
background-size: cover;
}
.video-button-fi {
width: 250px;
height: 161px;
float: none;
margin: 0 auto;
background: url(../images/videobutton-v2-fi.png) no-repeat;
background-size: cover;
}
/*--- index - benefits -v2 ---*/
.benefits {
max-width: 1200px;
text-align: center;
padding-bottom: 60px;
}
@media (min-width: 800px) {
.benefits {
padding-bottom: 80px;
}
}
.benefits .col-3 {
width: 100%;
float: left;
text-align: left;
padding: 15px;
max-width: 450px;
margin: 0 auto;
float: none;
overflow: hidden;
}
@media (min-width: 800px) {
.benefits .col-3 {
width: 33%;
float: left;
}
}
.benefits h3 {
text-align: center;
color: #47596d;
padding: 0 30px 10px 30px;
}
.benefits p {
text-align: center;
padding-bottom: 0;
}
.benefit1,
.benefit2,
.benefit3 {
width: 100%;
float: left;
}
.benefit1 {
background: url(../svg/fallback/benefit1.png) center top no-repeat;
background-image: url(../svg/benefit1.svg), none;
background-size: 100px auto;
padding-top: 150px;
}
.benefit2 {
background: url(../svg/fallback/benefit2.png) center top no-repeat;
background-image: url(../svg/benefit2.svg), none;
background-size: 100px auto;
padding-top: 150px;
margin: 20px 0;
}
@media (min-width: 800px) {
.benefit2 {
margin: 0;
}
}
.benefit3 {
background: url(../svg/fallback/benefit3.png) center top no-repeat;
background-image: url(../svg/benefit3.svg), none;
background-size: 100px auto;
padding-top: 150px;
}
/*2024*/
.benefit1-24 {
background: url(../svg/fallback/benefit1-24.png) center top no-repeat;
background-image: url(../svg/benefit1-24.svg), none;
}
.benefit2-24 {
background: url(../svg/fallback/benefit2-24.png) center top no-repeat;
background-image: url(../svg/benefit2-24.svg), none;
}
.benefit3-24 {
background: url(../svg/fallback/benefit3-24.png) center top no-repeat;
background-image: url(../svg/benefit3-24.svg), none;
}
.benefit1-24,
.benefit2-24,
.benefit3-24 {
background-size: 80px auto;
padding-top: 100px;
}
@media (min-width: 800px) {
.benefit1-24,
.benefit2-24,
.benefit3-24 {
background-size: 140px auto;
padding-top: 160px;
}
}
/*benefits/results 2026*/
.results {
text-align: center;
}
.results h2,
.results h3 {
color: #47596d;
}
.results .section-head {
padding-bottom: 0;
}
.results .section-head h2 {
padding-bottom: 0;
}
.results .section-head h3 {
font-weight: 400;
}
.stats-section {
width: 100%;
float: left;
padding: 40px 20px 40px 20px;
text-align: center;
}
.section-head {
width: 100%;
float: left;
padding: 30px 20px 30px 20px;
}
@media (min-width: 550px) {
.section-head {
padding: 50px 20px 30px 20px;
}
}
.stats-grid {
max-width: 1200px;
margin: 0 auto 20px auto;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 32px 1fr 32px 1fr;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.stat-card {
background: rgba(236, 248, 246);
border-radius: 10px;
padding: 34px 28px 30px;
color: #4f627c;
min-height: 235px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.result1,
.result2,
.result3 {
/*width: 100%; float: left; */
}
.result1 h3,
.result2 h3,
.result3 h3 {
font-size: 24px;
line-height: 32px;
}
.result1 h3 span,
.result2 h3 span,
.result3 h3 span {
font-size: 56px;
line-height: 60px;
}
.result1 h3 span.outcomes,
.result2 h3 span.outcomes,
.result3 h3 span.outcomes {
font-size: 32px;
line-height: 32px;
}
@media (min-width: 800px) {
.result1 h3 span.outcomes,
.result2 h3 span.outcomes,
.result3 h3 span.outcomes {
font-size: 38px;
line-height: 38px;
}
}
.result2 h3 {
margin-top: 10px;
}
.stats-note {
margin-top: 24px;
font-size: 14px;
color: #b3bcc8;
}
@media (max-width: 980px) {
.stats-grid {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
.stat-card {
min-height: auto;
}
}
.virtual {
background: rgba(236, 248, 246);
overflow: visible;
float: left;
width: 100%;
text-align: center;
margin: 200px 0 0 0;
}
.virtual .max-width {
overflow: visible;
text-align: center;
}
.virtual img {
margin: -200px auto 0 auto;
max-width: 1200px;
float: none;
padding: 20px;
}
.virtual .section-head {
max-width: 1000px;
float: none;
margin: 0 auto;
padding-top: 0;
}
.virtual .section-head h2 {
padding-bottom: 0;
}
.virtual h3 {
color: #47596d;
font-weight: 400;
line-height: 36px;
line-height: 3.6rem;
}
.process {
width: 100%;
float: left;
margin: 50px 0 150px 0;
padding: 0 30px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 28px;
text-align: center;
}
.process-step {
max-width: 220px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.icon-circle {
width: 110px;
height: 110px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 18px;
}
.icon-1,
.icon-2,
.icon-3,
.icon-4 {
width: 100%;
float: left;
height: 110px;
}
.icon-1 {
background: url(../svg/icon-1.svg) center top no-repeat;
}
.icon-2 {
background: url(../svg/icon-2.svg) center top no-repeat;
}
.icon-3 {
background: url(../svg/icon-3.svg) center top no-repeat;
}
.icon-4 {
background: url(../svg/icon-4.svg) center top no-repeat;
}
.icon {
font-size: 32px;
color: #8fb9ad;
}
.process-step h3 {
margin: 0;
padding: 0 0 5px 0;
font-size: 24px;
font-weight: 700;
color: #5f6f82;
}
.process-step p {
margin: 0;
font-size: 16px;
line-height: 1.5;
color: #6c7d8f;
}
.process-arrow {
width: 40px;
height: 2px;
background: #8fb9ad;
position: relative;
}
.process-arrow::after {
content: "";
position: absolute;
right: -6px;
top: -4px;
border-left: 8px solid #8fb9ad;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
/* RESPONSIVE */
@media (max-width: 900px) {
.process {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.process-arrow {
width: 2px;
height: 40px;
}
.process-arrow::after {
top: auto;
bottom: -6px;
left: -4px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid #8fb9ad;
}
}
.bg-comment {
position: relative;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
background: url(../images/monidor-care-case-bed.jpg) center center no-repeat #333;
background-size: cover;
text-align: center;
}
.bg-comment .max-width {
max-width: 1000px;
text-align: center;
}
.bg-comment h3 {
font-size: 36px;
line-height: 46px;
font-weight: 700;
padding: 70px 20px 80px 20px;
color: #fff;
}
.layer2 {
width: 100%;
height: 100%;
position: absolute;
background: rgba(29, 41, 58, 0.5);
}
.better-care,
.ask-more {
background: #47596d;
padding: 50px 0 40px 0;
}
.better-care .max-width,
.ask-more .max-width {
max-width: 1200px;
}
.better-care .col-50,
.ask-more .col-50 {
padding: 20px 30px;
float: left;
}
@media (min-width: 800px) {
.better-care .col-50,
.ask-more .col-50 {
padding: 20px 40px;
}
}
@media (min-width: 1220px) {
.better-care .col-50,
.ask-more .col-50 {
padding: 20px 20px;
}
}
.better-care h2,
.ask-more h2,
.better-care p,
.ask-more p {
color: #fff;
}
.better-care h2,
.ask-more h2 {
margin-bottom: 20px;
text-align: left;
padding: 0 30px;
float: left;
}
@media (min-width: 800px) {
.better-care h2,
.ask-more h2 {
padding: 0 40px;
text-align: center;
}
}
@media (min-width: 1220px) {
.better-care h2,
.ask-more h2 {
padding: 0 20px;
}
}
.better-care strong,
.ask-more strong {
color: #00b3cc;
}
.ask-more {
text-align: center;
padding: 50px 30px 30px 30px;
margin-top: 30px;
}
.ask-more .max-width {
max-width: 800px;
}
.ask-more h2 {
text-align: center;
}
.ask-more p {
padding-bottom: 0;
}
.usage {
width: 100%;
float: left;
position: relative;
margin-top: 40px;
}
@media (min-width: 800px) {
.usage {
margin-top: 10px;
}
}
.usage img {
width: 100px;
float: left;
position: absolute;
top: 5px;
left: 0;
}
.usage p {
width: 100%;
float: left;
padding-left: 120px;
}
/*--- index - hero video - 2024 ---*/
.video-container {
position: relative;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
background: url(../materiaalit/bg-monidor-vitals.jpg) top center no-repeat #333;
background-size: cover;
text-align: center;
}
.highlight-v3 {
width: 100%;
float: left;
min-height: 480px;
height: 100%;
background: #666;
position: relative;
overflow: hidden;
max-height: 400px;
/*
.button {
a, a:visited {background: url(../svg/fallback/icon-play.png) 15px center no-repeat @color2; background-image: url(../svg/icon-play.svg), none; padding: 15px 20px 15px 55px;}
a:hover {background: url(../svg/fallback/icon-play.png) 15px center no-repeat @color3; background-image: url(../svg/icon-play.svg), none;}
}
*/
}
@media (min-width: 700px) {
.highlight-v3 {
max-height: 100%;
}
}
@media (min-width: 2000px) {
.highlight-v3 {
max-height: 60%;
}
}
.highlight-v3 h1 {
color: #fff;
font-size: 26px;
font-size: 2.6rem;
line-height: 38px;
line-height: 3.8rem;
text-shadow: 1px 1px 20px #666;
}
@media (min-width: 400px) {
.highlight-v3 h1 {
font-size: 36px;
font-size: 3.6rem;
line-height: 48px;
line-height: 4.8rem;
}
}
@media (min-width: 700px) {
.highlight-v3 h1 {
font-size: 56px;
font-size: 5.6rem;
line-height: 70px;
line-height: 7rem;
}
}
.video2 {
position: absolute;
right: 0;
bottom: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 100% 100%;
background-color: black;
background-position: top center;
background-size: contain;
-o-object-fit: cover;
object-fit: cover;
z-index: 1;
}
@media (min-width: 700px) {
.video2 {
max-height: 100%;
}
}
.curtain {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background: rgba(29, 41, 58, 0.5);
z-index: 3;
}
.vertical-center {
text-align: center;
width: 100%;
z-index: 3;
margin: 0;
margin: 30px 0 0 0;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
@media (min-width: 900px) {
.vertical-center {
margin: 30px 0 0 0;
}
}
/*--- index - messut news - 2024 ---*/
.news-up {
background: #deebee;
text-align: center;
padding: 20px;
}
.news-up h4 {
color: #47596d;
padding-bottom: 5px;
}
/*--- index - remotely - 2024 ---*/
.remotely {
background: #47596d;
}
@media (min-width: 1200px) {
.remotely {
padding: 40px 0 0 0;
margin: 30px 0 0 0;
}
}
.remotely .max-width {
overflow: visible;
}
.remotely .col-50 {
width: 100%;
float: left;
overflow: hidden;
}
@media (min-width: 1200px) {
.remotely .col-50 {
width: 50%;
padding-top: 0;
padding-bottom: 0;
margin-top: -30px;
}
}
.remotely .remotely-img {
position: relative;
height: 300px;
overflow: visible;
}
@media (min-width: 600px) {
.remotely .remotely-img {
height: 500px;
}
}
.remotely .remotely-img img {
position: absolute;
bottom: 0;
left: 0;
width: auto;
height: 300px;
}
@media (min-width: 500px) {
.remotely .remotely-img img {
left: 20px;
}
}
@media (min-width: 600px) {
.remotely .remotely-img img {
height: 500px;
width: auto;
left: 30px;
}
}
@media (min-width: 1200px) {
.remotely .remotely-img img {
height: 550px;
left: 50px;
}
}
@media (min-width: 1400px) {
.remotely .remotely-img img {
left: 100px;
}
}
.remotely .hyodyt {
padding-top: 30px;
position: relative;
float: left;
}
@media (min-width: 1200px) {
.remotely .hyodyt {
height: 500px;
float: right;
}
}
.remotely h2,
.remotely p {
text-align: left;
color: #fff;
}
.remotely .hyodyt-content {
width: 100%;
float: left;
padding: 20px 0;
}
@media (min-width: 1200px) {
.remotely .hyodyt-content {
width: 50%;
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
@media (min-width: 1400px) {
.remotely .hyodyt-content {
left: 40%;
}
}
.remotely .hyodyt-content h3 {
font-size: 30px;
font-size: 3rem;
line-height: 42px;
line-height: 4.2rem;
color: #fff;
padding: 10px 0 15px 0;
}
@media (min-width: 500px) {
.remotely .hyodyt-content h3 {
font-size: 36px;
font-size: 3.6rem;
line-height: 48px;
line-height: 4.8rem;
}
}
@media (min-width: 1000px) {
.remotely .hyodyt-content h3 {
font-size: 40px;
font-size: 4rem;
line-height: 52px;
line-height: 5.2rem;
padding: 10px 0 20px 0;
}
}
/*--- products up - 2024 ---*/
.products {
padding: 40px 20px;
}
.products .max-width {
max-width: 1200px;
}
.products img {
border-radius: 15px;
}
.products .video {
width: 100%;
max-width: 600px;
}
.products a,
.products a:visited {
font-weight: 700;
}
.products a:hover {
text-decoration: underline;
color: #47596d;
}
.products a img:hover {
opacity: 0.9;
}
.products .col-50 {
padding: 10px;
}
@media (min-width: 800px) {
.products .col-50 {
padding: 20px;
}
}
.products h3 {
color: #47596d;
padding: 10px 0 0 0;
}
@media (min-width: 1200px) {
.products h3 {
font-size: 30px;
font-size: 3rem;
line-height: 38px;
line-height: 3.8rem;
}
}
.products h4 {
font-size: 18px;
font-size: 1.8rem;
font-weight: 700;
padding: 10px 0 0 0;
color: #47596d;
}
@media (min-width: 1200px) {
.products h4 {
font-size: 18px;
font-size: 1.8rem;
}
}
.products .button {
text-align: left;
margin-top: 10px;
}
.products .button a,
.products .button a:visited {
color: fff;
background: #d04b8f;
font-weight: 400;
}
.products .button a:hover {
opacity: 0.8;
color: #fff;
text-decoration: none;
}
.products p {
padding: 10px 0 15px 0;
}
.index .products h3 {
padding: 25px 0 0 0;
}
/*--- reviews up - 2024 ---*/
.reviews {
text-align: center;
border-top: 1px solid #deebee;
padding-top: 0px;
}
@media (min-width: 1000px) {
.reviews {
padding-top: 30px;
}
}
.reviews h2 {
font-size: 30px;
font-size: 3rem;
line-height: 40px;
line-height: 4rem;
text-align: center;
font-weight: 700;
}
@media (min-width: 500px) {
.reviews h2 {
font-size: 36px;
font-size: 3.6rem;
line-height: 52px;
line-height: 5.2rem;
}
}
@media (min-width: 1000px) {
.reviews h2 {
font-size: 40px;
font-size: 4rem;
line-height: 52px;
line-height: 5.2rem;
color: #47596d;
}
}
/*--- index - graphics -v2 ---*/
.rooms {
padding-top: 20px;
padding-bottom: 20px;
}
.graphics,
.video-tutorial,
.intro {
background: #00b3cc;
color: #fff;
padding: 80px 20px;
overflow: visible;
}
.graphics .max-width,
.video-tutorial .max-width,
.intro .max-width {
max-width: 600px;
overflow: visible;
text-align: center;
}
.graphics h2,
.video-tutorial h2,
.intro h2 {
max-width: 450px;
float: none;
margin: 0 auto;
font-size: 36px;
font-size: 3.6rem;
line-height: 44px;
line-height: 4.4rem;
color: #fff;
padding: 0;
}
@media (min-width: 700px) {
.graphics h2,
.video-tutorial h2,
.intro h2 {
font-size: 48px;
font-size: 4.8rem;
line-height: 56px;
line-height: 5.6rem;
}
}
.graphics img,
.video-tutorial img,
.intro img {
width: 100%;
max-width: 400px;
margin: 0 auto;
float: none;
}
.graphics .watch-screen,
.video-tutorial .watch-screen,
.intro .watch-screen {
width: 100%;
max-width: 400px;
position: relative;
margin: 0 auto;
float: none;
}
.graphics .watch-screen a,
.video-tutorial .watch-screen a,
.intro .watch-screen a,
.graphics .watch-screen a:visited,
.video-tutorial .watch-screen a:visited,
.intro .watch-screen a:visited {
width: 100%;
display: block;
}
.graphics .watch-screen a img,
.video-tutorial .watch-screen a img,
.intro .watch-screen a img,
.graphics .watch-screen a:visited img,
.video-tutorial .watch-screen a:visited img,
.intro .watch-screen a:visited img {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.graphics .watch-screen a .img2,
.video-tutorial .watch-screen a .img2,
.intro .watch-screen a .img2,
.graphics .watch-screen a:visited .img2,
.video-tutorial .watch-screen a:visited .img2,
.intro .watch-screen a:visited .img2 {
opacity: 0;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.graphics .watch-screen a .img1,
.video-tutorial .watch-screen a .img1,
.intro .watch-screen a .img1,
.graphics .watch-screen a:visited .img1,
.video-tutorial .watch-screen a:visited .img1,
.intro .watch-screen a:visited .img1 {
opacity: 1;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.graphics .watch-screen a:hover > .img1,
.video-tutorial .watch-screen a:hover > .img1,
.intro .watch-screen a:hover > .img1 {
opacity: 0.5;
}
.graphics .watch-screen a:hover > .img2,
.video-tutorial .watch-screen a:hover > .img2,
.intro .watch-screen a:hover > .img2 {
opacity: 1;
}
.graphics a.read-more,
.video-tutorial a.read-more,
.intro a.read-more,
.graphics a.read-more:visited,
.video-tutorial a.read-more:visited,
.intro a.read-more:visited {
color: #fff;
}
.graphics a.read-more:hover,
.video-tutorial a.read-more:hover,
.intro a.read-more:hover {
color: #d04b8f;
}
.video-tutorial {
background: #fff;
padding: 20px 20px 80px 20px;
}
.video-tutorial h2 {
max-width: 1200px;
color: #47596d;
}
.video-tutorial .video {
width: 100%;
margin-bottom: 0px;
}
@media (min-width: 800px) {
.video-tutorial .video {
margin-top: 40px;
}
}
/*--- monidrop - graphics -v2 ---*/
.intro {
background: #00b3cc;
color: #fff;
padding: 50px 20px 80px 20px;
overflow: visible;
}
.intro .max-width {
max-width: 450px;
overflow: visible;
text-align: center;
}
.intro h2 {
max-width: 450px;
float: none;
margin: 0 auto;
font-size: 36px;
font-size: 3.6rem;
line-height: 44px;
line-height: 4.4rem;
color: #fff;
padding: 0;
}
@media (min-width: 700px) {
.intro h2 {
font-size: 48px;
font-size: 4.8rem;
line-height: 56px;
line-height: 5.6rem;
}
}
.intro img {
width: 100%;
max-width: 300px;
margin: 30px auto;
float: none;
}
.intro a.read-more,
.intro a.read-more:visited {
color: #fff;
}
.intro a.read-more:hover {
color: #d04b8f;
}
/*--- index - reasons -v2 (ei käytössä) ---*/
.reasons {
background: #47596d;
color: #fff;
padding: 0;
overflow: visible;
}
.reasons .max-width {
max-width: 1200px;
overflow: visible;
}
.reasons h2 {
max-width: 450px;
font-size: 36px;
font-size: 3.6rem;
line-height: 44px;
line-height: 4.4rem;
color: #fff;
padding: 0;
}
@media (min-width: 500px) {
.reasons h2 {
text-align: left;
}
}
@media (min-width: 700px) {
.reasons h2 {
font-size: 48px;
font-size: 4.8rem;
line-height: 56px;
line-height: 5.6rem;
}
}
.reasons img {
max-width: 200px;
margin: 0 auto;
float: none;
}
@media (min-width: 500px) {
.reasons img {
float: right;
width: auto;
max-width: 280px;
padding: 0 20px 0 40px;
}
}
@media (min-width: 800px) {
.reasons img {
padding: 0 40px 0 0;
height: auto;
max-width: 250px;
}
}
.reasons .col-4 {
width: 100%;
float: left;
margin: -80px 0 0 0;
text-align: center;
padding: 0;
}
@media (min-width: 500px) {
.reasons .col-4 {
width: 40%;
}
}
.reasons .col-6 {
width: 100%;
float: left;
padding: 0px 30px 70px 30px;
text-align: center;
margin: -80px 0 0 0;
background: #47596d;
}
@media (min-width: 500px) {
.reasons .col-6 {
width: 60%;
padding: 50px 30px 70px 20px;
text-align: left;
margin: 0;
background: none;
}
}
@media (min-width: 800px) {
.reasons .col-6 {
padding: 90px 60px 120px 30px;
}
}
.reasons .col-6 p {
max-width: 450px;
}
.reasons a.read-more,
.reasons a.read-more:visited {
color: #fff;
}
.reasons a.read-more:hover {
color: #d04b8f;
}
/*--- index - recommend -v2 ---*/
.recommend {
text-align: center;
overflow: hidden;
}
.recommend h3 {
font-weight: 400;
color: #47596d;
}
.recommend img {
height: auto;
width: 100%;
}
@media (min-width: 800px) {
.recommend img {
position: absolute;
top: 0;
left: 0;
height: 400px;
width: auto;
max-width: none;
}
}
@media (min-width: 1200px) {
.recommend img {
height: 600px;
}
}
.recommend .vertical {
width: 100%;
float: left;
}
@media (min-width: 800px) {
.recommend .vertical {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
}
.recommend .col-5:last-child {
background: #ededed;
float: right;
padding: 0;
}
.recommend .col-5 {
width: 100%;
float: left;
position: relative;
padding: 50px 0 60px 0;
}
@media (min-width: 800px) {
.recommend .col-5 {
width: 50%;
height: 400px;
padding: 30px 0 40px 0;
}
}
@media (min-width: 1200px) {
.recommend .col-5 {
height: 600px;
}
}
.show-m {
display: block;
}
@media (min-width: 800px) {
.show-m {
display: none;
}
}
.show-d {
display: none;
}
@media (min-width: 800px) {
.show-d {
display: block;
}
}
.col-5 {
width: 100%;
float: left;
position: relative;
}
@media (min-width: 800px) {
.col-5 {
width: 50%;
}
}
.percent1 {
width: 100%;
float: left;
font-size: 80px;
font-size: 8rem;
line-height: 80px;
line-height: 8rem;
font-weight: 700;
}
@media (min-width: 1200px) {
.percent1 {
font-size: 140px;
font-size: 14rem;
line-height: 140px;
line-height: 14rem;
}
}
.percent2 {
width: 100%;
float: left;
font-size: 28px;
font-size: 2.8rem;
line-height: 36px;
line-height: 3.6rem;
}
@media (min-width: 1200px) {
.percent2 {
font-size: 38px;
font-size: 3.8rem;
line-height: 50px;
line-height: 5rem;
}
}
.percent3 {
width: 100%;
float: left;
font-size: 20px;
font-size: 2rem;
line-height: 26px;
line-height: 2.6rem;
padding: 0 10px;
}
@media (min-width: 1200px) {
.percent3 {
font-size: 26px;
font-size: 2.6rem;
line-height: 40px;
line-height: 4rem;
}
}
/*--- index - refe videos -v2 ---*/
.refe-up {
width: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
margin: -50px 0 0 0;
z-index: 2;
padding: 0 0 30px 0;
}
ul.refe-videos {
width: 100%;
max-width: 1200px;
display: inline-block;
overflow: hidden;
padding: 0 10px;
}
ul.refe-videos li {
width: 100%;
display: inline-block;
text-align: left;
position: relative;
padding: 20px;
max-width: 300px;
}
@media (min-width: 520px) {
ul.refe-videos li {
width: 50%;
}
}
@media (min-width: 1000px) {
ul.refe-videos li {
width: 25%;
float: left;
}
}
ul.refe-videos img,
ul.refe-videos p {
width: 100%;
float: left;
}
ul.refe-videos p {
padding: 10px 5px;
}
ul.refe-videos .img-wrap {
width: 100%;
float: left;
position: relative;
}
ul.refe-videos .hover-play-off {
opacity: 1;
-webkit-transition: 0.2s;
transition: 0.2s;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
ul.refe-videos .hover-play-on {
opacity: 0;
-webkit-transition: 0.2s;
transition: 0.2s;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
ul.refe-videos a:hover > .hover-play-on {
opacity: 1;
}
/*--- index - company -v2 ---*/
.company,
.how-it-works {
background: #47596d;
padding: 50px 0 40px 0;
}
@media (min-width: 800px) {
.company,
.how-it-works {
padding: 80px 20px;
}
}
.company .max-width,
.how-it-works .max-width {
max-width: 1200px;
}
.company h2,
.how-it-works h2,
.company h3,
.how-it-works h3,
.company p,
.how-it-works p,
.company a.read-more,
.how-it-works a.read-more,
.company a.read-more:visited,
.how-it-works a.read-more:visited {
color: #fff;
text-align: left;
}
.company a.read-more:hover,
.how-it-works a.read-more:hover {
color: #d04b8f;
}
@media (min-width: 800px) {
.company h3,
.how-it-works h3 {
font-size: 36px;
font-size: 3.6rem;
line-height: 48px;
line-height: 4.8rem;
}
}
.company img,
.how-it-works img {
border-radius: 15px;
padding-bottom: 0;
}
@media (min-width: 800px) {
.company .col-50:first-child,
.how-it-works .col-50:first-child {
padding: 0 15px;
}
}
.company h4,
.how-it-works h4 {
font-size: 18px;
font-size: 1.8rem;
font-weight: 700;
padding: 10px 0 0 0;
color: #47596d;
}
@media (min-width: 1200px) {
.company h4,
.how-it-works h4 {
font-size: 18px;
font-size: 1.8rem;
}
}
.how-it-works.green {
background: #e1edec;
}
.how-it-works.integrated {
padding: 0 0 20px 0;
}
@media (min-width: 800px) {
.how-it-works.integrated {
padding: 0px 20px 40px 20px;
}
}
.how-it-works.integrated p {
padding: 10px 0 15px 0;
}
.how-it-works.integrated a,
.how-it-works.integrated a:visited {
font-weight: 700;
}
.how-it-works.integrated a:hover {
text-decoration: underline;
color: #47596d;
}
.col-4 {
width: 100%;
float: left;
padding: 30px 30px 0 30px;
}
@media (min-width: 700px) {
.col-4 {
width: 40%;
padding: 30px;
}
}
.col-6 {
width: 100%;
float: left;
padding: 30px 30px 0 30px;
}
@media (min-width: 700px) {
.col-6 {
width: 60%;
padding: 30px;
}
}
/*--- how it works - 2024 ---*/
.how-it-works {
background: #fff;
}
.how-it-works h2,
.how-it-works h3,
.how-it-works p,
.how-it-works a.read-more,
.how-it-works a.read-more:visited {
color: #47596d;
}
.how-it-works .download {
padding: 20px 0 10px 0px;
}
a.tutorial,
a.tutorial:visited {
width: auto;
float: left;
display: block;
color: #fff;
line-height: 20px;
line-height: 2rem;
font-weight: 700;
text-transform: uppercase;
background: url(../svg/fallback/switch-blue.png) left 15px no-repeat;
background-image: url(../svg/switch-blue.svg), none;
background-size: 40px auto;
padding: 15px 10px 0 50px;
border-top: 6px solid #00b3cc;
margin-bottom: 15px;
margin-right: 10px;
}
a.tutorial:hover {
color: #00b3cc;
}
.how-it-works a.tutorial,
.easy-vitals a.tutorial,
.how-it-works a.tutorial:visited,
.easy-vitals a.tutorial:visited {
width: auto;
float: left;
display: block;
color: #3fbfad;
line-height: 20px;
line-height: 2rem;
font-weight: 700;
text-transform: uppercase;
background: url(../svg/fallback/switch.png) left 15px no-repeat;
background-image: url(../svg/switch.svg), none;
background-size: 40px auto;
padding: 15px 10px 0 50px;
border-top: 6px solid #3fbfad;
margin-bottom: 15px;
margin-right: 10px;
}
.how-it-works a.tutorial:hover,
.easy-vitals a.tutorial:hover {
opacity: 0.8;
}
.how-it-works a.manual,
.easy-vitals a.manual,
.how-it-works a.manual:visited,
.easy-vitals a.manual:visited,
.how-it-works a.play-big,
.easy-vitals a.play-big,
.how-it-works a.play-big:visited,
.easy-vitals a.play-big:visited {
color: #3fbfad;
border-top: 6px solid #3fbfad;
margin-right: 10px;
}
.how-it-works a.manual:hover,
.easy-vitals a.manual:hover,
.how-it-works a.play-big:hover,
.easy-vitals a.play-big:hover {
color: #3fbfad;
opacity: 0.8;
}
.how-it-works a.play-big,
.easy-vitals a.play-big,
.how-it-works a.play-big:visited,
.easy-vitals a.play-big:visited {
background: url(../svg/fallback/icon-play-big-green.png) left 15px no-repeat;
background-image: url(../svg/icon-play-big-green.svg), none;
background-size: 40px auto;
}
.how-it-works a.manual,
.easy-vitals a.manual,
.how-it-works a.manual:visited,
.easy-vitals a.manual:visited {
background: url(../svg/fallback/icon-pdf-green.png) left 15px no-repeat;
background-image: url(../svg/icon-pdf-green.svg), none;
background-size: 40px auto;
}
.how-it-works h3,
.easy-vitals h3 {
color: #47596d;
text-align: left;
padding-bottom: 20px;
}
@media (min-width: 800px) {
.how-it-works h3,
.easy-vitals h3 {
font-size: 36px;
font-size: 3.6rem;
line-height: 48px;
line-height: 4.8rem;
}
}
/*--- integrations - 2024 ---*/
.content-up {
text-align: center;
padding: 20px 20px 60px 20px;
}
.content-up h2 {
margin: 40px 0 15px 0;
}
.content-up .max-width {
max-width: 800px;
}
.integrated a,
.integrated a:visited {
color: #d04b8f;
font-weight: 700;
}
.integrated a:hover {
text-decoration: underline;
}
/*----- profiles -----*/
.content-in .profiles {
width: 100%;
float: left;
padding: 30px 0;
}
.content-in .profiles .col-profile {
width: 100%;
float: left;
padding: 0 30px 30px 30px;
text-align: center;
}
@media (min-width: 700px) {
.content-in .profiles .col-profile {
width: 50%;
min-height: 170px;
padding: 0 10px 20px 10px;
}
}
.content-in .profiles .col-profile div {
width: 100%;
float: left;
text-align: center;
}
@media (min-width: 700px) {
.content-in .profiles .col-profile div {
min-height: 150px;
}
}
.content-in .profiles h1 {
padding: 0 0 30px 0;
}
.content-in .profiles p {
font-size: 16px;
font-size: 1.6rem;
line-height: 24px;
line-height: 2.4rem;
}
.content-in .profiles img {
width: 160px;
height: 160px;
border-radius: 80px;
margin: 0 auto;
float: none;
padding: 5px;
}
@media (min-width: 750px) {
.content-in .profiles img {
width: 200px;
height: 200px;
border-radius: 100px;
}
}
/*--- index - benefits -v2 ---*/
.some-line {
max-width: 1200px;
text-align: center;
padding: 30px 30px 20px 30px;
}
.some-line h3 {
width: 100%;
float: left;
font-weight: 400;
color: #00b3cc;
font-size: 28px;
font-size: 2.8rem;
line-height: 36px;
line-height: 3.6rem;
padding-bottom: 30px;
}
@media (min-width: 1200px) {
.some-line h3 {
font-size: 38px;
font-size: 3.8rem;
line-height: 50px;
line-height: 5rem;
padding-bottom: 30px;
}
}
.some-line h3 a {
color: #00b3cc;
}
/*--- monidrop - benefits-in -v2 ---*/
.benefits-in {
margin-bottom: 60px;
}
.benefits-in .max-width {
width: 100%;
float: none;
max-width: 400px;
margin: 60px auto 0px auto;
padding: 0;
}
@media (min-width: 650px) {
.benefits-in .max-width {
max-width: 1000px;
background: url(../svg/fallback/roadmap-line.png) center top repeat-y;
background-image: url(../svg/roadmap-line.svg), none;
}
}
.benefits-in .max-width.second {
background: none;
margin: 0 auto 60px auto;
overflow: visible;
}
.benefits-in h3 {
margin: 0 0 15px 0;
color: #47596d;
border-bottom: 1px solid #47596d;
padding-bottom: 15px;
}
.benefits-in .col {
width: 100%;
float: left;
}
@media (min-width: 650px) {
.benefits-in .col {
width: 50%;
}
}
.stop {
width: 100%;
float: left;
position: relative;
padding: 0 0 10px 0;
overflow: visible;
}
@media (min-width: 650px) {
.stop {
padding: 0;
}
}
.stop .col {
float: right;
position: relative;
text-align: center;
padding: 130px 20px 20px 20px;
}
@media (min-width: 650px) {
.stop .col {
padding: 0 0 0 120px;
margin: 0 50px 0 0;
text-align: left;
}
}
.benefit1-in {
background: url(../svg/fallback/benefit1.png) center 0 no-repeat;
background-image: url(../svg/benefit1.svg), none;
background-size: 100px auto;
}
.benefit2-in {
background: url(../svg/fallback/benefit2.png) center top no-repeat;
background-image: url(../svg/benefit2.svg), none;
background-size: 100px auto;
}
.benefit3-in {
background: url(../svg/fallback/benefit3.png) center 10px no-repeat;
background-image: url(../svg/benefit3.svg), none;
background-size: 100px auto;
}
@media (min-width: 650px) {
.stop:nth-child(even) .col {
float: left;
}
.benefit1-in {
background: url(../svg/fallback/benefit1-in.png) 0px -5px no-repeat;
background-image: url(../svg/benefit1-in.svg), none;
background-size: 100px auto;
}
.benefit2-in {
background: url(../svg/fallback/benefit2-in.png) right top no-repeat;
background-image: url(../svg/benefit2-in.svg), none;
background-size: 100px auto;
}
.benefit3-in {
background: url(../svg/fallback/benefit3-in.png) 0px -6px no-repeat;
background-image: url(../svg/benefit3-in.svg), none;
background-size: 100px auto;
}
}
@media (min-width: 650px) and (min-width: 650px) {
.stop:nth-child(even) .col {
padding: 0 120px 0 0;
text-align: right;
margin: 0 0 0 50px;
}
.stop:nth-child(even) .col h3 {
text-align: right;
}
}
@media (min-width: 650px) {
.stop {
margin-top: -90px;
}
}
.stop:first-child {
margin-top: 0;
}
@media (min-width: 650px) {
.max-width.second .stop:first-child {
margin-top: -90px;
z-index: 100;
}
}
/*--- monidrop - easy -v2 ---*/
.easy {
background: #47596d;
}
.easy .max-width {
max-width: 1200px;
padding: 0 30px;
overflow: hidden;
}
.easy .col-5 {
height: auto;
padding: 50px 0 0 0;
}
@media (min-width: 550px) {
.easy .col-5 {
padding: 60px 30px 0px 30px;
}
}
@media (min-width: 800px) {
.easy .col-5 {
width: 100%;
padding: 60px 250px 0px 30px;
}
}
@media (min-width: 1000px) {
.easy .col-5 {
width: 50%;
padding: 60px 170px 60px 30px;
}
}
.easy .col-5:last-child {
padding: 0 0 80px 0;
}
@media (min-width: 550px) {
.easy .col-5:last-child {
padding: 0 30px 60px 30px;
}
}
@media (min-width: 800px) {
.easy .col-5:last-child {
width: 100%;
padding: 0px 250px 60px 30px;
}
}
@media (min-width: 1000px) {
.easy .col-5:last-child {
width: 50%;
padding: 70px 0 60px 170px;
}
}
.easy h2,
.easy li {
color: #fff;
}
.easy h2 {
text-align: left;
padding: 0 0 20px 0;
}
.easy h4 {
width: 100%;
float: left;
font-size: 20px;
font-size: 2rem;
line-height: 28px;
line-height: 2.8rem;
color: #00b3cc;
text-transform: none;
font-weight: 700;
padding: 0 0 0 35px;
background: url(../svg/fallback/icon-check.png) left 5px no-repeat;
background-image: url(../svg/icon-check.svg), none;
background-size: 24px;
}
.easy p {
padding: 0 0 0 35px;
}
.easy ul {
width: 100%;
float: left;
}
.easy li {
width: 100%;
float: left;
padding: 0 0 15px 0;
}
.img-center {
display: none;
}
@media (min-width: 800px) {
.img-center {
display: block;
position: absolute;
bottom: 0;
right: 10%;
width: 300px;
margin: 0 0 0 -150px;
z-index: 2;
}
}
@media (min-width: 1000px) {
.img-center {
right: auto;
left: 50%;
width: 250px;
margin: 0 0 0 -125px;
z-index: 2;
}
}
.download {
width: 100%;
float: left;
padding: 10px 0 10px 35px;
}
a.manual,
a.manual:visited {
width: auto;
float: left;
display: block;
color: #fff;
line-height: 20px;
line-height: 2rem;
font-weight: 700;
text-transform: uppercase;
background: url(../svg/fallback/icon-pdf.png) left 15px no-repeat;
background-image: url(../svg/icon-pdf.svg), none;
background-size: 40px auto;
padding: 15px 10px 0 50px;
border-top: 6px solid #00b3cc;
margin-bottom: 15px;
}
a.manual:hover {
color: #00b3cc;
}
a.play-big,
a.play-big:visited {
width: auto;
float: left;
display: block;
color: #fff;
line-height: 20px;
line-height: 2rem;
font-weight: 700;
text-transform: uppercase;
background: url(../svg/fallback/icon-play-big.png) left 15px no-repeat;
background-image: url(../svg/icon-play-big.svg), none;
background-size: 40px auto;
padding: 15px 10px 0 50px;
border-top: 6px solid #00b3cc;
margin-bottom: 15px;
}
a.play-big:hover {
color: #00b3cc;
}
.easy-vitals {
background: #e1edec;
overflow: visible;
padding: 0;
text-align: center;
/*
.col-5 {height: auto; padding: 0px 0 0 0;
@media (min-width: 550px) {padding: 60px 30px 0px 30px;}
@media (min-width: 800px) {width: 70%; padding: 30px 130px 0px 30px;}
}
.col-5:last-child {padding: 0 0 80px 0;
@media (min-width: 550px) {padding: 60px 30px 0px 30px;}
@media (min-width: 800px) {width: 70%; padding: 30px 130px 0px 30px;}
@media (min-width: 1000px) {width: 50%; padding: 70px 0 60px 170px; }
}
*/
}
@media (min-width: 800px) {
.easy-vitals {
padding: 20px 0 0 0;
}
}
@media (min-width: 1000px) {
.easy-vitals {
margin-top: 30px;
}
}
.easy-vitals .max-width {
overflow: visible;
padding: 30px 30px 0 30px;
}
@media (min-width: 550px) {
.easy-vitals .max-width {
padding: 0 20px 0 0;
}
}
.easy-vitals .col-5 {
width: 100%;
height: auto;
padding: 0px;
text-align: left;
}
@media (min-width: 550px) {
.easy-vitals .col-5 {
width: 100%;
padding: 50px 300px 0px 30px;
}
}
@media (min-width: 800px) {
.easy-vitals .col-5 {
padding: 30px 300px 0px 30px;
}
}
@media (min-width: 1000px) {
.easy-vitals .col-5 {
width: 50%;
padding: 20px 170px 60px 30px;
}
}
.easy-vitals .col-5:last-child {
width: 100%;
padding: 0 0 30px 0;
text-align: left;
}
@media (min-width: 550px) {
.easy-vitals .col-5:last-child {
width: 100%;
padding: 0px 300px 60px 30px;
}
}
@media (min-width: 800px) {
.easy-vitals .col-5:last-child {
padding: 0px 300px 60px 30px;
}
}
@media (min-width: 1000px) {
.easy-vitals .col-5:last-child {
width: 50%;
padding: 90px 0 60px 170px;
}
}
@media (min-width: 800px) {
.easy-vitals h2 {
font-size: 36px;
font-size: 3.6rem;
line-height: 48px;
line-height: 4.8rem;
}
}
.easy-vitals h4 {
background: url(../svg/fallback/icon-check-green.png) left 5px no-repeat;
background-image: url(../svg/icon-check-green.svg), none;
background-size: 24px;
}
.easy-vitals h2,
.easy-vitals li {
color: #47596d;
}
.easy-vitals h4 {
color: #47596d;
}
.easy-vitals .img-center {
display: block;
width: 100%;
margin: -50px auto 10px auto;
max-width: 300px;
float: none;
}
@media (min-width: 550px) {
.easy-vitals .img-center {
display: block;
position: absolute;
top: 50px;
right: 5%;
width: 220px;
margin: 0 0 0 -110px;
z-index: 2;
}
}
@media (min-width: 1000px) {
.easy-vitals .img-center {
top: -60px;
right: auto;
left: 50%;
width: 220px;
margin: 0 0 0 -110px;
z-index: 100;
}
}
/*--- related iv-screen -v2 ---*/
.related {
padding: 0;
}
.related .max-width {
max-width: 1000px;
padding: 0 30px 40px 30px;
}
@media (min-width: 550px) {
.related .max-width {
padding: 0px 30px 60px 30px;
}
}
.related .col-5 {
height: auto;
background: none;
padding: 30px 0 0 0;
}
@media (min-width: 550px) {
.related .col-5 {
padding: 30px 30px 0 30px;
}
}
@media (min-width: 800px) {
.related .col-5 {
padding: 60px 30px 0 30px;
}
}
@media (min-width: 1000px) {
.related .col-5 {
padding: 60px 20px 0 20px;
}
}
.related h3 {
font-size: 20px;
font-size: 2rem;
}
/*--- recommend - subpage -v2 ---*/
.recommend-in {
text-align: center;
overflow: hidden;
}
.recommend-in .col-10 {
position: relative;
}
.recommend-in .col-5 {
width: 100%;
float: left;
position: relative;
height: auto;
background: #47596d;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
padding: 30px 0;
}
@media (min-width: 800px) {
.recommend-in .col-5 {
width: 50%;
min-height: 400px;
}
}
.recommend-in .col-5.img-height {
min-height: 300px;
}
@media (min-width: 800px) {
.recommend-in .col-5.img-height {
min-height: 400px;
}
}
.recommend-in h4 {
font-size: 20px;
font-size: 2rem;
line-height: 32px;
line-height: 3.2rem;
font-weight: 700;
color: #fff;
text-transform: none;
padding: 30px 30px 0 30px;
}
@media (min-width: 550px) {
.recommend-in h4 {
font-size: 28px;
font-size: 2.8rem;
line-height: 42px;
line-height: 4.2rem;
}
}
@media (min-width: 800px) {
.recommend-in h4 {
font-size: 24px;
font-size: 2.4rem;
line-height: 36px;
line-height: 3.6rem;
}
}
@media (min-width: 1200px) {
.recommend-in h4 {
font-size: 28px;
font-size: 2.8rem;
line-height: 42px;
line-height: 4.2rem;
}
}
.recommend-in h5 {
font-size: 16px;
font-size: 1.6rem;
line-height: 22px;
line-height: 2.2rem;
font-weight: 700;
color: #00b3cc;
padding: 20px 30px 30px 30px;
}
.recommend-in h5 span {
font-weight: 400;
font-size: 14px;
font-size: 1.4rem;
line-height: 18px;
line-height: 1.8rem;
}
.recommend-in img {
width: auto;
height: 300px;
}
@media (min-width: 800px) {
.recommend-in img {
height: 100%;
}
}
@media (min-width: 800px) {
.recommend-in .vertical {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
}
.recommend-in .col-5.align-m {
float: right;
}
/*--- get monidrop -v2 ---*/
.get-monidrop {
padding: 40px 0 30px 0;
overflow: visible;
}
.get-monidrop .max-width {
max-width: 1000px;
overflow: visible;
padding: 0 20px;
}
.get-monidrop h2 {
font-size: 30px;
font-size: 3rem;
line-height: 38px;
line-height: 3.8rem;
color: #47596d;
padding: 20px 0 20px 0;
}
@media (min-width: 700px) {
.get-monidrop h2 {
font-size: 36px;
font-size: 3.6rem;
line-height: 44px;
line-height: 4.4rem;
}
}
@media (min-width: 700px) {
.get-monidrop h2 {
/* font-size: 40px; font-size: 4rem; line-height: 56px; line-height: 5.6rem; */
padding: 0 0 20px 0;
}
}
.get-monidrop h3 {
font-size: 20px;
font-size: 2rem;
color: #47596d;
padding: 0 0 10px 0;
}
.get-monidrop img {
max-width: 200px;
margin: 0 auto;
float: none;
}
@media (min-width: 500px) {
.get-monidrop img {
float: right;
max-width: none;
width: auto;
height: 100%;
padding: 0 20px 0 40px;
}
}
@media (min-width: 800px) {
.get-monidrop img {
padding: 0 40px 0 0;
}
}
.get-monidrop .col-4 {
width: 100%;
float: left;
margin: -50px 0 0 0;
text-align: center;
padding: 0;
}
@media (min-width: 500px) {
.get-monidrop .col-4 {
width: 40%;
}
}
@media (min-width: 1000px) {
.get-monidrop .col-4 {
margin: -100px 0 0 0;
}
}
.get-monidrop .col-6 {
width: 100%;
float: left;
padding: 0px 30px 70px 30px;
text-align: center;
margin: -80px 0 0 0;
background: #fff;
}
@media (min-width: 500px) {
.get-monidrop .col-6 {
width: 60%;
padding: 20px 30px 40px 20px;
text-align: left;
margin: 0;
background: none;
}
}
@media (min-width: 800px) {
.get-monidrop .col-6 {
padding: 90px 60px 100px 30px;
}
}
.get-monidrop .col-5 {
width: 100%;
text-align: center;
padding: 0 20px;
}
@media (min-width: 500px) {
.get-monidrop .col-5 {
width: 50%;
text-align: left;
}
.get-monidrop .col-5 p {
max-width: 300px;
}
}
@media (min-width: 700px) {
.get-monidrop .col-5 {
padding: 0 30px;
}
}
.get-monidrop .align-r h3 {
color: #47596d;
}
@media (min-width: 500px) {
.get-monidrop .align-r h3,
.get-monidrop .align-r p {
text-align: right;
float: right;
}
.get-monidrop .align-r .button {
float: right;
}
.get-monidrop .align-r .button a,
.get-monidrop .align-r .button a:visited {
float: right;
}
}
.get-monidrop .button {
margin: 10px 0 40px 0;
}
.get-monidrop .button a,
.get-monidrop .button a:visited {
min-width: 180px;
}
@media (min-width: 1000px) {
.get-monidrop .button a,
.get-monidrop .button a:visited {
min-width: 240px;
}
}
@media (min-width: 500px) {
.get-monidrop .button {
text-align: left;
}
.get-monidrop .button a,
.get-monidrop .button a:visited {
text-align: center;
}
}
.button.dark a,
.button.dark a:visited {
background: #47596d;
}
.button.dark a:hover {
opacity: 0.8;
}
.button.green a,
.button.green a:visited {
background: #3fbfad;
}
.button.green a:hover {
opacity: 0.8;
}
.button.blue a,
.button.blue a:visited {
background: #00b3cc;
}
.button.blue a:hover {
opacity: 0.8;
}
/*--- TOP ---*/
.highlight {
width: 100%;
float: left;
min-height: 280px;
margin: 60px 0 0 0;
background: #666;
position: relative;
overflow: hidden;
}
.highlight .max-width {
max-width: 1000px;
z-index: 2;
}
.highlight h2 {
font-size: 20px;
font-size: 2rem;
line-height: 26px;
line-height: 2.6rem;
font-weight: 400;
padding: 5px 0 10px 0;
}
@media (min-width: 800px) {
.highlight h2 {
max-width: 400px;
font-size: 24px;
font-size: 2.4rem;
line-height: 28px;
line-height: 2.8rem;
}
}
.highlight .button {
margin: 10px 0 10px 0;
}
.highlight .button a,
.highlight .button a:visited {
margin: 0 10px 5px 0;
float: left;
}
.highlight .button span {
display: none;
}
@media (min-width: 400px) {
.highlight .button span {
display: inline;
}
}
.highlight .menu-lang {
top: 0px;
}
.index .highlight {
min-height: 0;
}
.monidrops {
display: none;
position: absolute;
top: 0px;
left: 0;
width: 40%;
z-index: 2;
}
@media (min-width: 500px) {
.monidrops {
display: block;
margin: -30px 0 0 0;
}
}
@media (min-width: 800px) {
.monidrops {
margin: -70px 0 0 0;
}
}
.monidrops img {
max-width: 250px;
float: right;
}
@media (min-width: 800px) {
.monidrops img {
max-width: 300px;
}
}
.no-max-width.bg-light {
padding: 40px 30px 30px 30px;
position: relative;
z-index: 99;
overflow: visible;
}
@media (min-width: 500px) {
.no-max-width.bg-light {
padding: 70px 30px 70px 70px;
}
}
@media (min-width: 600px) {
.no-max-width.bg-light {
padding: 100px 30px 70px 70px;
}
}
@media (min-width: 800px) {
.no-max-width.bg-light {
background: rgba(255, 255, 255, 0.5);
margin: 100px 0;
padding: 50px 50px 30px 100px;
z-index: 1;
}
}
.monidrop-logo {
width: 100%;
float: left;
}
.monidrop-logo img {
height: 36px;
width: auto;
}
.col2 {
width: 100%;
float: right;
position: relative;
z-index: 4;
padding: 0 0 0 0;
}
@media (min-width: 500px) {
.col2 {
width: 60%;
}
}
.video-wrap {
width: 100%;
float: left;
}
.video {
height: auto;
width: 100%;
float: left;
margin: 15px 0 10px 0;
}
@media (min-width: 1000px) {
.video {
width: 500px;
}
}
/*
.video {display: none; height: auto; float: left; margin: 15px 0 10px 0;
@media (min-width: 500px) {display: block; width: 200px;}
@media (min-width: 600px) {width: 280px; }
}
*/
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bg1 {
background: url(../images/infusion-hands-monidor.jpg) center bottom no-repeat;
background-size: cover;
}
.bg2 {
background: url(../images/infusion-hands-monidor.jpg) center center no-repeat;
background-size: cover;
}
.bg3 {
background: url(../images/infusion-hands-monidor.jpg) center center no-repeat;
background-size: cover;
}
/*--- CONTENT ---*/
.container {
width: 100%;
float: left;
position: relative;
background: #fff;
overflow: visible;
}
.aside {
width: 100%;
float: left;
max-width: 400px;
padding: 60px 30px 0 30px;
margin: 0 0 20px 0;
}
@media (min-width: 800px) {
.aside {
width: 30%;
padding: 70px 30px 0 30px;
}
}
.aside h2 {
text-align: center;
color: #d04b8f;
border-top: 3px solid #d04b8f;
border-bottom: 3px solid #d04b8f;
padding: 10px 0;
margin: 0 0 20px 0;
}
.content {
width: 100%;
float: left;
padding: 30px 0 100px 0;
}
@media (min-width: 800px) {
.content {
width: 70%;
padding: 60px 0 200px 0;
min-height: 800px;
}
}
.content-in {
width: 100%;
float: none;
margin: 0 auto;
max-width: 800px;
padding: 0 30px;
}
.content-in ul {
width: 100%;
float: left;
list-style: none;
padding: 0 0 15px 0;
}
.content-in ul li {
width: 100%;
float: left;
color: #666;
padding-left: 16px;
text-indent: -12px;
}
.content-in ul li::before {
content: "• ";
font-size: 20px;
color: #d04b8f;
}
.content-in a,
.content-in a:visited {
color: #d04b8f;
}
.content-in a:hover {
color: #111;
}
.content-in h6 {
padding-top: 0;
}
.content-in img {
width: auto;
padding: 10px 0 25px 0;
}
/*--- INDEX ---*/
.index .content {
width: 100%;
float: left;
min-height: 0;
padding-bottom: 0px;
text-align: center;
}
.index .content-in {
max-width: 600px;
}
.news {
width: 100%;
float: left;
text-align: center;
padding: 50px 30px;
}
.news h3,
.news p,
.news a {
color: #fff;
}
.news h3 {
font-weight: 500;
}
.news h3 a,
.news h3 a:visited {
color: #fff;
}
.news h3 a:hover {
opacity: 0.7;
}
.col-33 {
width: 100%;
float: left;
text-align: left;
padding: 30px;
margin: 0 0 10px 0;
}
@media (min-width: 900px) {
.col-33 {
width: 33%;
min-height: 360px;
margin: 0 0.33% 0 0;
}
}
@media (min-width: 1200px) {
.col-33 {
min-height: 300px;
}
}
.box-bg {
background: #d04b8f;
}
a.read-more,
a.read-more:visited {
font-size: 14px;
font-size: 1.4rem;
line-height: 30px;
line-height: 3rem;
font-weight: 600;
text-transform: uppercase;
color: #d04b8f;
}
a.read-more:hover {
color: #47596d;
}
/*--- NEWS ---*/
.news-post {
width: 100%;
float: left;
padding: 30px 0;
border-bottom: 1px solid #e6e6e6;
}
.news-post a.read-more,
.news-post a.read-more:visited {
color: #d04b8f;
}
.news-post a.read-more:hover {
color: #111;
}
/*--- NEWS ---*/
.partners {
width: 100%;
float: left;
padding: 20px 0;
}
.partners img {
width: auto;
float: left;
max-height: 70px;
margin: 0 10px 0 0;
}
.partners a:hover {
opacity: 0.7;
}
/*--- MONIDROP ---*/
.monidrop-start {
position: relative;
z-index: 2;
}
.monidrop-start .max-width {
overflow: visible;
}
.monidrop-start .content {
min-height: 0;
padding-bottom: 50px;
}
.highlight2 {
width: 100%;
float: left;
height: 400px;
}
.circles {
width: 100%;
float: left;
position: relative;
text-align: center;
margin: 50px 0 -95px 0;
}
.highlight-dark {
width: 160px;
height: 160px;
display: inline-block;
float: none;
border-radius: 80px;
background: #d04b8f;
padding: 55px 0;
margin: 0 20px 10px 20px;
}
.highlight-dark p {
font-family: "futura-pt", sans-serif;
font-size: 20px;
font-size: 2rem;
line-height: 25px;
line-height: 2.5rem;
color: #fff;
font-weight: 400;
text-transform: uppercase;
text-align: center;
}
.check {
padding: 0 30px;
}
@media (min-width: 1000px) {
.check {
overflow: visible;
}
}
.check .max-width {
background: #fff;
margin-top: -150px;
padding: 50px;
}
.check h2 {
padding: 0 0 30px 0;
}
.check h3,
.check h4 {
font-size: 20px;
font-size: 2rem;
line-height: 24px;
line-height: 2.4rem;
padding: 0;
}
.check ul {
width: 100%;
float: left;
text-align: left;
}
@media (min-width: 700px) {
.check ul {
width: 60%;
padding: 0 30px 15px 0;
}
}
@media (min-width: 850px) {
.check ul {
width: 40%;
}
}
.check li {
width: 100%;
float: left;
padding: 0 0 20px 35px;
background: url(../svg/fallback/icon-check.png) left 5px no-repeat;
background-image: url(../svg/icon-check.svg), none;
}
.check a {
font-weight: 700;
}
.check p {
font-size: 14px;
font-size: 1.4rem;
padding: 0;
}
.check .img {
display: none;
overflow: visible;
position: relative;
z-index: 2;
background: none;
}
@media (min-width: 700px) {
.check .img {
display: block;
}
}
.check .img img {
width: 40%;
max-width: 240px;
float: right;
margin: -400px 0 0 0;
}
@media (min-width: 850px) {
.check .img img {
width: 30%;
}
}
.boxes {
padding: 0 0 50px 0;
}
.col-50 {
width: 100%;
float: left;
padding: 0 30px 30px 30px;
}
@media (min-width: 800px) {
.col-50 {
width: 50%;
}
}
.box1 {
position: relative;
}
.box1 img {
display: none;
}
@media (min-width: 800px) {
.box1 img {
display: block;
background: #d04b8f;
}
}
.align-wrap {
width: 100%;
float: left;
}
@media (min-width: 800px) {
.align-wrap {
display: table;
position: absolute;
height: 100%;
width: 100%;
z-index: 2;
padding: 0 60px 0 0;
}
}
.align {
display: table-cell;
vertical-align: middle;
padding: 20px;
background: #d04b8f;
}
.box-in {
width: 100%;
float: left;
overflow: hidden;
text-align: center;
background: #d04b8f;
padding-top: 15px;
}
@media (min-width: 800px) {
.box-in {
width: 100%;
height: 100%;
position: absolute;
background: none;
padding: 0;
}
}
.box-in h3,
.box-in h4,
.box-in p {
color: #fff;
}
.box-in h3,
.box-in h4 {
padding: 0 0 10px 0;
}
.box-in h4 {
font-size: 16px;
font-size: 1.6rem;
}
/*--- SMALL IMAGES ---*/
.content-in.small-images img {
float: left;
width: auto;
height: 130px;
margin: 0 20px 20px 0;
}
/*--- EXTRANET ---*/
.sign-in {
width: 100%;
float: left;
max-width: 300px;
}
.sign-in .col-100 {
width: 100%;
float: left;
padding: 10px 0 0 0;
}
.sign-in label {
font-size: 16px;
font-size: 1.6rem;
line-height: 2rem;
padding: 10px 0 10px 0;
text-transform: uppercase;
color: #151f6d;
padding: 0 5px 5px 0;
line-height: 20px;
}
.sign-in input[type="text"],
.sign-in input[type="password"] {
width: 100%;
float: left;
font-size: 12px;
font-size: 1.2rem;
line-height: 32px;
line-height: 3.2rem;
border: none;
margin: 5px 0 0 0;
padding: 0 5px;
background: #f2f2f2;
border: 1px solid #ccc;
}
.sign-in .submit-button {
font-family: "futura-pt", sans-serif;
font-size: 13px;
font-size: 1.3rem;
line-height: 20px;
line-height: 2rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
background: #d04b8f;
border-radius: 3px;
padding: 10px 17px;
border: none;
margin: 25px 0 0 0;
-webkit-appearance: none;
}
.sign-in .submit-button:hover {
background: #111;
}
.sign-in h6 {
padding-bottom: 5px;
}
.logout {
width: 100%;
float: left;
padding: 20px 0;
}
.logout a,
.logout a:visited {
display: block;
width: auto;
float: none;
margin: 0 auto 0 auto;
max-width: 180px;
height: 40px;
line-height: 40px;
font-size: 14px;
font-size: 1.4rem;
color: #fff;
border: none;
text-align: center;
cursor: pointer;
padding: 0 17px;
background: #151f6d;
text-transform: uppercase;
}
@media (min-width: 800px) {
.logout a,
.logout a:visited {
width: 100%;
max-width: 300px;
}
}
.logout a:hover {
background: #000;
}
/*--- subscribe - campaigns v2-sivu ---*/
.col50 {
width: 100%;
float: right;
background: #fff;
margin-top: 50px;
position: relative;
z-index: 2;
}
@media (min-width: 1000px) {
.col50 {
min-height: 100vh;
width: 60%;
margin: 0;
}
}
.fix50 {
position: fixed;
left: 0;
top: 0;
height: 50px;
min-height: 0;
margin-top: 0;
background: #47596d;
}
@media (min-width: 1000px) {
.fix50 {
width: 40%;
height: auto;
min-height: 100vh;
}
}
@media (min-width: 1000px) {
.bg-subscribe-1 {
background: url(../images/bg-campaign.jpg) center top no-repeat;
background-size: cover;
}
.bg-subscribe-2 {
background: url(../images/bg-campaign-monidrop.jpg) center top no-repeat;
background-size: cover;
}
}
.contact-info2 {
float: left;
width: 90%;
margin: 0 5%;
background: url(../images/bubble-m.png) center center no-repeat;
background-size: 100% 100%;
padding: 20px 20px 30px 20px;
z-index: 100;
}
.contact-info2 p {
color: #fff;
text-align: center;
}
.contact-info2 a,
.contact-info2 a:visited {
color: #fff;
font-weight: 700;
}
.contact-info2 a:hover {
color: #47596d;
}
@media (min-width: 1000px) {
.contact-info2 {
display: none;
}
}
.contact-info {
display: none;
}
@media (min-width: 1000px) {
.contact-info {
display: block;
position: absolute;
width: 90%;
bottom: 25px;
left: 5%;
background: url(../images/bubble.png) center center no-repeat;
background-size: 100% 100%;
padding: 20px 20px 30px 20px;
z-index: 100;
}
.contact-info p {
color: #fff;
text-align: center;
}
.contact-info a,
.contact-info a:visited {
color: #ea5caa;
}
.contact-info a:hover {
color: #fff;
}
}
a.branding-campaign,
a.branding-campaign:visited {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 50px;
background: url(../svg/fallback/monidor-logo-w.png) center 10px no-repeat;
background-image: url(../svg/monidor-logo-w.svg), none;
background-size: auto 30px;
background-color: #47596d;
z-index: 10;
text-indent: -9999px;
}
@media (min-width: 1000px) {
a.branding-campaign,
a.branding-campaign:visited {
width: 40%;
position: fixed;
left: 15px;
top: 15px;
background: url(../svg/fallback/monidor-logo-w.png) left center no-repeat;
background-image: url(../svg/monidor-logo-w.svg), none;
background-size: auto 30px;
}
}
a.branding-campaign:hover {
opacity: 0.9;
}
.subscribe {
min-height: 100vh;
}
.subscribe .container {
background: none;
}
@media (min-width: 1000px) {
.subscribe .container {
min-height: 100vh;
}
}
.subscribe .content {
max-width: 600px;
text-align: center;
margin: 0 auto;
float: none;
min-height: 0;
padding: 30px 0px;
}
.subscribe .footer {
padding: 10px 20px 10px 20px;
text-align: center;
background: none;
}
.subscribe .footer p {
font-size: 12px;
font-family: 1.2rem;
line-height: 20px;
line-height: 2rem;
padding: 0;
}
.subscribe .video {
width: 100%;
max-width: 400px;
margin: 20px auto 10px auto;
float: none;
}
.form-subscribe {
width: 100%;
float: left;
padding: 10px 0 20px 0;
text-align: center;
}
.form-subscribe .col100 {
width: 100%;
float: left;
margin: 0 0 20px 0;
}
.form-subscribe label {
font-size: 20px;
font-size: 2rem;
line-height: 30px;
line-height: 3rem;
color: #d04b8f;
padding: 0 5px 5px 0;
}
.form-subscribe .checkbox {
width: 100%;
float: left;
padding: 10px 0;
}
.form-subscribe .checkbox label {
font-size: 18px;
font-size: 1.8rem;
line-height: 24px;
line-height: 2.4rem;
font-weight: 400;
text-transform: none;
letter-spacing: normal;
color: #d04b8f;
}
.form-subscribe input[type="text"],
.form-subscribe input[type="email"],
.form-subscribe input[type="phone"] {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-size: 1.6rem;
width: 100%;
max-width: 300px;
line-height: 40px;
height: 40px;
border: 1px solid #ccc;
margin: 10px 0 0 0;
padding: 0 10px;
background: #fff;
border-radius: 5px;
}
.form-subscribe .submit-button {
font-size: 14px;
font-size: 1.4rem;
line-height: 20px;
line-height: 2rem;
height: 50px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
color: #fff;
background: #d04b8f;
border-radius: 5px;
padding: 15px 17px;
border: none;
float: none;
margin: 0 auto;
cursor: pointer;
-webkit-transition: 0.2s;
transition: 0.2s;
}
.form-subscribe .submit-button:hover {
background: #47596d;
}
.col100.small {
margin-top: 0px;
}
.col100.small p {
text-align: center;
padding: 30px;
}
/*--- ACADEMY MAIN ---*/
.academy-main {
max-width: 1200px;
margin: 0 auto;
float: none;
padding: 40px 0px 100px 0px;
}
@media (min-width: 600px) {
.academy-main {
padding: 40px 20px 100px 20px;
}
}
.academy-main a:hover {
opacity: 0.9;
}
.academy-product {
position: relative;
padding: 20px 20px 0 20px;
}
@media (min-width: 600px) {
.academy-product {
width: 100%;
}
}
@media (min-width: 1000px) {
.academy-product {
width: 50%;
}
}
.academy-product img {
width: 100%;
float: left;
}
.academy-product .academy-up {
width: 50%;
top: 0;
left: 50%;
text-align: left;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.academy-product h3,
.academy-product p {
color: #47596d;
}
.academy-product h3 {
font-size: 20px;
font-size: 2rem;
margin-bottom: 0;
padding-bottom: 0;
}
@media (min-width: 600px) {
.academy-product h3 {
font-size: 24px;
font-size: 2.4rem;
line-height: 3px;
line-height: 3rem;
}
}
/*--- FOOTER ---*/
.footer {
width: 100%;
float: left;
background: #f5f5f5;
padding: 30px 30px 0 30px;
}
.footer p {
color: #111;
font-size: 14px;
font-size: 1.4rem;
line-height: 22px;
line-height: 2.2rem;
}
.footer .button {
text-align: left;
margin: 0 0 20px 0;
}
.footer .button a,
.footer .button a:visited {
border: 2px solid #d04b8f;
background: none;
color: #d04b8f;
font-weight: 700;
line-height: 20px;
line-height: 2rem;
padding: 6px 20px;
}
.footer .button a:hover {
border: 2px solid #47596d;
background: none;
color: #47596d;
}
.col3 {
width: 100%;
float: left;
}
@media (min-width: 1000px) {
.col3 {
width: 50%;
}
}
@media (min-width: 1200px) {
.col3 {
width: 33.33%;
}
}
.col-50-in {
width: 100%;
float: left;
}
@media (min-width: 600px) {
.col-50-in {
width: 50%;
padding: 0 70px 0 0;
}
}
@media (min-width: 1000px) {
.col-50-in {
padding: 0 40px 0 0;
}
}
@media (min-width: 1000px) {
.col-50-in.center {
text-align: center;
}
}
.logos .col-50-in {
width: auto;
float: left;
}
.logos img {
max-width: 280px;
margin: 30px 0 0 0;
}
.menu-supp {
width: 100%;
float: left;
padding: 0 0 30px 0;
}
.menu-supp li {
display: inline-block;
width: 100%;
}
.menu-supp a,
.menu-supp a:visited {
width: 100%;
display: inline-block;
font-size: 14px;
font-size: 1.4rem;
line-height: 30px;
line-height: 3rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #111;
padding: 7px 0;
border-bottom: 1px solid #E6E6E6;
}
.menu-supp a:hover {
opacity: 0.5;
}
.menu-some {
width: 100%;
float: left;
}
.menu-some li {
display: inline-block;
}
.menu-some a,
.menu-some a:visited {
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
opacity: 0.5;
margin-bottom: 5px;
}
.menu-some a:hover {
opacity: 1;
}
.in {
background: url(../svg/fallback/icon-in.png) center center no-repeat;
background-image: url(../svg/icon-in.svg), none;
}
.tube {
background: url(../svg/fallback/icon-tube.png) center center no-repeat;
background-image: url(../svg/icon-tube.svg), none;
}
.fb {
background: url(../svg/fallback/icon-fb.png) center center no-repeat;
background-image: url(../svg/icon-fb.svg), none;
}
.ig {
background: url(../svg/fallback/icon-ig.png) center center no-repeat;
background-image: url(../svg/icon-ig.svg), none;
}
.tw {
background: url(../svg/fallback/icon-tw.png) center center no-repeat;
background-image: url(../svg/icon-tw.svg), none;
}
.copy {
text-align: center;
font-size: 12px;
font-size: 1.2rem;
padding: 10px;
margin: 10px 0 0 0;
}
/*------ MENU MOBILE ------*/
.nav-collapse {
width: 100%;
float: left;
overflow: visible;
}
.js .nav-collapse {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
}
.nav-collapse.opened {
max-height: 9999px;
}
.disable-pointer-events {
pointer-events: none !important;
}
a.nav-toggle,
a.nav-toggle:visited {
width: 100%;
float: left;
height: 60px;
background: url(../svg/fallback/icon-menu-m.png) right center no-repeat;
background-image: url(../svg/icon-menu-m.svg), none;
border-bottom: 1px solid #e6e6e6;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
color: #fff;
text-indent: -9999px;
padding: 10px 0;
}
@media (min-width: 1120px) {
a.nav-toggle,
a.nav-toggle:visited {
display: none;
}
}
a.nav-toggle:hover,
a.nav-toggle.active {
opacity: 1;
}
@media (min-width: 1120px) {
.js .nav-collapse {
position: relative;
}
.js .nav-collapse.closed {
max-height: none;
}
.nav-toggle {
display: none;
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fade-in {
-webkit-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.fade-in.zero {
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.fade-in.one {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.layer {
width: 100%;
height: 100%;
position: absolute;
background: rgba(29, 41, 58, 0.5);
}
@media (min-width: 800px) {
.layer {
display: none;
}
}