/* -------------------------------------------------------------------------
### AR ##################################################################
------------------------------------------------------------------------- */
/* roboto-300 - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: url('../fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-300italic - latin */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 300;
src: url('../fonts/roboto-v30-latin-300italic.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/roboto-v30-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v30-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v30-latin-300italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v30-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v30-latin-300italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-italic - latin */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 400;
src: url('../fonts/roboto-v30-latin-italic.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/roboto-v30-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v30-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v30-latin-italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v30-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v30-latin-italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500 - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: url('../fonts/roboto-v30-latin-500.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/roboto-v30-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v30-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v30-latin-500.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v30-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v30-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-500italic - latin */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 500;
src: url('../fonts/roboto-v30-latin-500italic.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/roboto-v30-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v30-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v30-latin-500italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v30-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v30-latin-500italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700 - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: url('../fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-700italic - latin */
@font-face {
font-family: 'Roboto';
font-style: italic;
font-weight: 700;
src: url('../fonts/roboto-v30-latin-700italic.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/roboto-v30-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v30-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v30-latin-700italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v30-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v30-latin-700italic.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* lora-regular - latin */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
src: url('../fonts/lora-v26-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/lora-v26-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lora-v26-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lora-v26-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/lora-v26-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lora-v26-latin-regular.svg#Lora') format('svg'); /* Legacy iOS */
}
/* lora-500 - latin */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 500;
src: url('../fonts/lora-v26-latin-500.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/lora-v26-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lora-v26-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lora-v26-latin-500.woff') format('woff'), /* Modern Browsers */
url('../fonts/lora-v26-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lora-v26-latin-500.svg#Lora') format('svg'); /* Legacy iOS */
}
/* lora-700 - latin */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 700;
src: url('../fonts/lora-v26-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/lora-v26-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lora-v26-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lora-v26-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/lora-v26-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lora-v26-latin-700.svg#Lora') format('svg'); /* Legacy iOS */
}
/* lora-italic - latin */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 400;
src: url('../fonts/lora-v26-latin-italic.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/lora-v26-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lora-v26-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lora-v26-latin-italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/lora-v26-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lora-v26-latin-italic.svg#Lora') format('svg'); /* Legacy iOS */
}
/* lora-500italic - latin */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 500;
src: url('../fonts/lora-v26-latin-500italic.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/lora-v26-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lora-v26-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lora-v26-latin-500italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/lora-v26-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lora-v26-latin-500italic.svg#Lora') format('svg'); /* Legacy iOS */
}
/* lora-700italic - latin */
@font-face {
font-family: 'Lora';
font-style: italic;
font-weight: 700;
src: url('../fonts/lora-v26-latin-700italic.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/lora-v26-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/lora-v26-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/lora-v26-latin-700italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/lora-v26-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/lora-v26-latin-700italic.svg#Lora') format('svg'); /* Legacy iOS */
}
:root {
/* -------------------------------------------------------------------------
calculation behind sizes:
* team-page: 3 columns à 380x + gap=50px = 1240px (should be standard)
* (1240px - gap=70px) / 2 = 585px (=max)
* menu: prevent line-wraps with min. 820px + right menu 210px = 1030px
* (1010px - gap=70px ) / 2 = 480px (=min)
------------------------------------------------------------------------- */
--kopano-column-def: 0 repeat(2,minmax(370px, 585px)) 0;
--kopano-column-gap: 70px;
--kopano-column-def-mobile: 20px minmax(280px, 1fr) 20px;
--kopano-column-gap-mobile: 70px;
--kopano-transition-time: 0.2s;
--kopano-box-shadow: 0 4px 6px 2px rgba(0, 0, 0, 0.15);
}
html, body, body .vc_row {
background-color: #FFFFFF;
margin: 0;
padding: 0;
}
div, span, a, button, strong, ul, ol, li, label {
font-size: inherit;
}
div {
box-sizing: border-box;
}
img.no-shadow {
box-shadow: none !important;
}
img.shadow {
box-shadow: var(--kopano-box-shadow);
}
*:focus {
outline: none;
}
.content a,
a,
a:hover {
font-weight: inherit;
font-style: inherit;
font-size: inherit;
line-height: inherit;
color: #188cc8;
text-decoration: none;
}
code {
display: block;
}
/* -------------------------------------------------------------------------
Fix a few strange things in the posts-page (includes/content-post.php)
------------------------------------------------------------------------- */
.with_aside .content_wrapper {
max-width: 100%;
}
.with_aside .section_wrapper {
max-width: 100%;
}
.content {
margin: 0;
padding: 0;
}
/* *************************************************************************
reuseable elements
************************************************************************* *
/* header-link: links with icon infront of it, icon jumps @ hover */
.header-link {
display: inline-block;
color:#333;
text-decoration: none;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.5px;
}
/* -------------------------------------------------------------------------
Kopano buttons
------------------------------------------------------------------------- */
.button,
a.button,
.content a.button,
.button-light,
a.button-light,
.content a.button-light {
box-sizing: border-box;
border-radius: 0.25em;
font-style: normal;
font-weight: 700;
font-size: 4vw;
line-height: 1.3125em;
text-align: center;
letter-spacing: 0.0781em;
text-transform: uppercase;
box-shadow: none;
white-space: nowrap;
}
.button,
a.button,
.content a.button {
margin: 0 1em 2em 0;
background-color: #00B3F0;
border: 0;
border-bottom: 0.125em solid #0D74B6;
color: #FFFFFF;
padding: 0.8125em 1em 0.75em 1em;
}
.button-light,
a.button-light,
.content a.button-light {
margin: 0;
background-color: #FFFFFF;
border: 0.0625em solid #00B3F0;
color: #00B3F0;
padding: 0.8125em 1em 0.875em 1em;
}
.button:hover,
a.button:hover,
.content a.button:hover,
.button-light:hover,
a.button-light:hover,
.content a.button-light:hover {
text-decoration: none;
box-shadow: var(--kopano-box-shadow);
-webkit-transition: var(--kopano-transition-time) ease-in-out;
-moz-transition: var(--kopano-transition-time) ease-in-out;
-o-transition: var(--kopano-transition-time) ease-in-out;
transition: var(--kopano-transition-time) ease-in-out;
}
.button.button-light:hover {
color: #00B3F0;
}
@media all and (min-width: 640px) {
.button,
a.button,
.content a.button,
.button-light,
a.button-light,
.content a.button-light {
font-size: 2.5vw;
}
}
@media all and (min-width: 768px) {
.button,
a.button,
.content a.button,
.button-light,
a.button-light,
.content a.button-light {
font-size: 1.5vw;
}
.button,
a.button,
.content a.button {
margin: 0 1em 0 0;
}
}
@media all and (min-width: 1024px) {
.button,
a.button,
.content a.button,
.button-light,
a.button-light,
.content a.button-light {
font-size: 1.25vw;
}
}
@media all and (min-width: 1280px) {
.button,
a.button,
.content a.button,
.button-light,
a.button-light,
.content a.button-light {
font-size: 16px;
}
}
/* -------------------------------------------------------------------------
Header, lists, ...
------------------------------------------------------------------------- */
.wpb_wrapper p, p {
font-size: 1em;
line-height: 1.5em;
}
.wpb_wrapper h1, h1 {
line-height: 1.25em;
font-size: 3em;
text-align: left;
}
.wpb_wrapper h1::before, h1::before {
display: inline-block;
background-size: 1em 1em;
background-position: 0 0;
background-repeat: no-repeat;
vertical-align: bottom;
width: 1.2em;
height: 1.2em;
padding: 0 0 0 0;
margin: 0 0.4em 0 0;
}
.wpb_wrapper h2, h2 {
line-height: 1.5em;
font-size: 2em;
margin-bottom: 1.5em;
color: #37474F;
text-align: left;
}
.wpb_wrapper h2::before, h2::before {
display: inline-block;
background-size: 1.5em 1.5em;
background-position: 0 0;
background-repeat: no-repeat;
vertical-align: bottom;
width: 1.5em;
height: 1.5em;
padding: 0 0 0 0;
margin: 0 1em 0 0;
}
.wpb_wrapper h3, h3 {
line-height: 1.5em;
font-size: 1.5em;
margin-bottom: 1.5em;
margin-top: 2.5em;
color: #37474F;
text-align: left;
}
.wpb_wrapper h3::before, h3::before {
display: inline-block;
background-size: 1.5em 1.5em;
background-position: 0 0;
background-repeat: no-repeat;
vertical-align: bottom;
width: 1.5em;
height: 1.5em;
padding: 0 0 0 0;
margin: 0 1em 0 0;
}
.wpb_wrapper h4, h4 {
line-height: 1.25em;
font-size: 1.4em;
font-weight: 400;
text-align: left;
}
.wpb_wrapper h4::before, h4::before {
float: left;
width: 1em !important;
padding: 0 0.3em 0 0 !important;
margin: 0.3em 0 0 0 !important;
}
.step1::before {
content: ' ';
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='28' cy='28' r='28' fill='%23E5F7FD'/%3E%3Cpath d='M27.5156 41V24.6875H21.6094V21.3477C23.2969 21.2422 24.5684 21.043 25.4238 20.75C26.291 20.4453 26.9766 19.9766 27.4805 19.3438C27.9961 18.7109 28.4004 17.8203 28.6934 16.6719H32.4727V41H27.5156Z' fill='%2337474F'/%3E%3C/svg%3E%0A");
}
.step2::before {
content: ' ';
background-image: url("data:image/svg+xml,%0A%3Csvg viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='28' cy='28' r='28' fill='%23E5F7FD'/%3E%3Cpath d='M19.2812 41V36.8516C21.1914 35.2461 22.9316 33.7109 24.502 32.2461C26.0723 30.7812 27.2852 29.5684 28.1406 28.6074C28.9961 27.6348 29.6582 26.709 30.127 25.8301C30.6074 24.9395 30.8477 24.0078 30.8477 23.0352C30.8477 22.2734 30.5605 21.6699 29.9863 21.2246C29.4121 20.7793 28.6211 20.5566 27.6133 20.5566C26.5234 20.5566 25.6328 20.8086 24.9414 21.3125C24.25 21.8164 23.6758 22.4141 23.2188 23.1055L19.2109 20.293C20.207 18.8047 21.3848 17.7441 22.7441 17.1113C24.1152 16.4785 25.8203 16.1621 27.8594 16.1621C30.3672 16.1621 32.3418 16.748 33.7832 17.9199C35.2363 19.0918 35.9629 20.7383 35.9629 22.8594C35.9629 24.418 35.6758 25.7891 35.1016 26.9727C34.5391 28.1445 33.7305 29.2871 32.6758 30.4004C31.6328 31.502 30.3262 32.7207 28.7559 34.0566C27.1973 35.3926 26.2363 36.1953 25.873 36.4648H36.7539V41H19.2812Z' fill='%2337474F'/%3E%3C/svg%3E%0A");
}
.step3::before {
content: ' ';
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='28' cy='28' r='28' fill='%23E5F7FD'/%3E%3Cpath d='M35.9629 34.1621C35.9629 36.6582 35.1426 38.5098 33.502 39.7168C31.873 40.9121 29.6289 41.5098 26.7695 41.5098C24.7305 41.5098 23.002 41.1406 21.584 40.4023C20.1777 39.6523 19.1758 38.709 18.5781 37.5723L22.5684 34.8477C23.002 35.5156 23.541 36.0547 24.1855 36.4648C24.8301 36.875 25.709 37.0801 26.8223 37.0801C28.2285 37.0801 29.248 36.8105 29.8809 36.2715C30.5254 35.7324 30.8477 34.9062 30.8477 33.793C30.8477 31.543 29.3594 30.418 26.3828 30.418H24.2207V26.1641H26.1016C27.5898 26.1641 28.6738 25.8711 29.3535 25.2852C30.0332 24.6992 30.373 23.9375 30.373 23C30.373 22.3086 30.127 21.7344 29.6348 21.2773C29.1426 20.8203 28.334 20.5918 27.209 20.5918C26.084 20.5918 25.1816 20.7734 24.502 21.1367C23.834 21.4883 23.2598 22.0273 22.7793 22.7539L18.8242 19.9766C19.7852 18.6758 20.9453 17.7148 22.3047 17.0938C23.6758 16.4727 25.4336 16.1621 27.5781 16.1621C29.207 16.1621 30.625 16.4199 31.832 16.9355C33.0508 17.4395 33.9707 18.1426 34.5918 19.0449C35.2129 19.9473 35.5234 20.9785 35.5234 22.1387C35.5234 25.3145 33.8828 27.3066 30.6016 28.1152C32.207 28.2207 33.502 28.8301 34.4863 29.9434C35.4707 31.0449 35.9629 32.4512 35.9629 34.1621Z' fill='%2337474F'/%3E%3C/svg%3E%0A");
}
.step4::before {
content: ' ';
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='28' cy='28' r='28' fill='%23E5F7FD'/%3E%3Cpath d='M35.3203 36.9746V41H30.5742V36.9746H18.3574V32.4043L30.2402 16.6719H35.3203V32.7207H38.3086V36.9746H35.3203ZM30.5742 23.1758L23.1914 32.7207H30.5742V23.1758Z' fill='%2337474F'/%3E%3C/svg%3E%0A");
}
.kopano-one::before {
content: ' ';
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 39 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpath d='M19.6802 0.92858C19.5227 0.800432 19.3258 0.730469 19.1228 0.730469C18.9197 0.730469 18.7228 0.800432 18.5653 0.92858L16.4653 2.71554H21.7802L19.6802 0.92858Z' fill='%2300A7E7'/%3E%3Cpath d='M21.7798 2.71875H16.4649L11.1704 7.21218L12.8231 8.75323C12.8777 8.8014 12.9479 8.82819 13.0207 8.82866H16.4649V23.2232C16.4649 23.3032 16.4967 23.3799 16.5533 23.4365C16.6099 23.4931 16.6866 23.5249 16.7666 23.5249H21.4781C21.5581 23.5249 21.6348 23.4931 21.6914 23.4365C21.748 23.3799 21.7798 23.3032 21.7798 23.2232V5.19515V2.71875Z' fill='%2300A7E7'/%3E%3Cpath d='M34.7988 17.4376C34.4004 13.9729 32.8697 10.7365 30.4441 8.23047L26.9826 12.3151C28.2411 13.7598 29.0845 15.5187 29.423 17.4046C29.7616 19.2905 29.5826 21.2328 28.9051 23.0251C28.2276 24.8174 27.077 26.3925 25.5757 27.5829C24.0743 28.7733 22.2783 29.5345 20.3788 29.7855C18.4793 30.0365 16.5472 29.768 14.7882 29.0084C13.0292 28.2488 11.5089 27.0266 10.3891 25.4718C9.26939 23.9171 8.59201 22.0878 8.42906 20.1788C8.26611 18.2697 8.62368 16.3521 9.46374 14.63L5.33917 11.1346L5.32409 11.1248C3.52497 14.1288 2.7719 17.6442 3.1826 21.1216C4.20017 29.852 12.1038 36.1053 20.8327 35.0877C29.5616 34.0701 35.8163 26.168 34.7988 17.4376Z' fill='%23484444'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='38.6207' height='38.6207' fill='white' transform='translate(0.034668 0.378906)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.kopano-meet::before {
content: ' ';
background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D.cls-2%7Bfill:%23484444;%7D.cls-3%7Bfill:%2396c125;%7D%3C/style%3E%3C/defs%3E%3Ccircle class='cls-1' cx='256' cy='256' r='256'/%3E%3Cpath class='cls-2' d='M317.55,382.09c-2.25,1.11-4.52,2.17-6.84,3.18a140,140,0,0,1-108.73,0,140.54,140.54,0,0,1-74.54-74.53,136,136,0,0,1-11-54.37,138.67,138.67,0,0,1,11-54.78,141,141,0,0,1,30-44.84,142.47,142.47,0,0,1,44.53-30,139.82,139.82,0,0,1,108.72,0c2.32,1,4.59,2.07,6.84,3.17l69-40.11a218.89,218.89,0,0,0-49.12-28.65,208.09,208.09,0,0,0-81.06-16.22,205.63,205.63,0,0,0-80.74,16.23,221.63,221.63,0,0,0-68.31,45.6,219.67,219.67,0,0,0-45.43,68.55,208.84,208.84,0,0,0,0,161.39,220.18,220.18,0,0,0,45.61,68.72,221.12,221.12,0,0,0,68.13,45.42,205.63,205.63,0,0,0,80.74,16.23,208.38,208.38,0,0,0,81.07-16.21,219.59,219.59,0,0,0,49.1-28.66Z'/%3E%3Cpolygon class='cls-3' points='315.77 212.85 315.77 299.15 512 414.15 512 98.28 315.77 212.85'/%3E%3C/svg%3E%0A");
}
.kopano-groupware::before {
content: ' ';
background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D.cls-2%7Bfill:%23484444;%7D.cls-3%7Bfill:%2300a7e7;%7D%3C/style%3E%3C/defs%3E%3Ccircle class='cls-1' cx='256' cy='255.98' r='256'/%3E%3Cpath class='cls-2' d='M247.24,0l46,46L95.34,243.91a17.06,17.06,0,0,0,0,24.15L293.26,466l-46,46-214-214a59.33,59.33,0,0,1,0-83.91l214-214'/%3E%3Cpath class='cls-3' d='M496.18,256a17,17,0,0,0-5-12.07L485,237.77h0L361.94,114.68l-4.06,4.17a202.05,202.05,0,0,0-41.43,62.65,191.81,191.81,0,0,0,0,148.29,201.92,201.92,0,0,0,41.77,63l4,4.16L485,274.21h0l6.15-6.15A17,17,0,0,0,496.18,256Z'/%3E%3C/svg%3E");
}
.icon-kraph::before {
content: ' ';
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/kopano-icon-kraph.jpg);
}
.icon-intranet::before {
content: ' ';
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/kopano-icon-intranet.jpg);
}
.icon-python::before {
content: ' ';
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/kopano-icon-python.jpg);
}
.icon-gluejs::before {
content: ' ';
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/kopano-icon-gluejs.jpg);
}
h1.fade-out, h2.fade-out, h3.fade-out {
color: #757575;
}
.important {
padding: 0.5em;
margin-bottom: 1.25em;
border: 1px solid #faebcc;
border-radius: 2px;
color: #8a6d3b;
background-color: #fcf8e3;
}
.important::before {
content: ' ';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M24 17.98h-13l-7 5.02v-5.02h-4v-16.981h24v16.981zm-22-14.981v12.981h4v3.125l4.357-3.125h11.643v-12.981h-20zm10 8.501c.69 0 1.25.56 1.25 1.25s-.56 1.25-1.25 1.25-1.25-.56-1.25-1.25.56-1.25 1.25-1.25zm1-6.5v5h-2v-5h2z' fill='%238a6d3b'/%3E%3C/svg%3E");
background-size: 1.5em 1.5em;
background-position: 0 0 ;
background-repeat: no-repeat;
width: 1.5em;
height: 1.5em;
float: left;
margin-right: 1em;
}
.wpb_wrapper ul, ul, ul.blue {
font-size: 1em;
line-height: 1.5em;
}
.text-wrapper li, .wpb_wrapper li, ul.blue li {
font-size: 1em;
line-height: 2.5em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 0 0.4em;
background-size: 1.8em 1.8em;
padding-left: 2.3em;
padding-top: 2px;
padding-bottom: 2px;
display: block;
color: #212121;
}
.wpb_wrapper .red li, .red li {
background-image: url("data:image/svg+xml;utf8,");
}
.wpb_wrapper .green li, .green li {
background-image: url("data:image/svg+xml;utf8,");
}
.wpb_wrapper .purple li, .purple li {
background-image: url("data:image/svg+xml;utf8,");
}
@media all and (min-width: 768px) {
ul.two-column {
column-count: 2;
column-gap: var(--kopano-column-gap);
}
}
/* for images */
.with-shadow {
box-shadow: var(--kopano-box-shadow);
}
table {
width: 100%;
}
table,
table tr,
table tr:nth-child(2n) td,
table th,
table td {
border: none;
background-color: unset;
}
/* -------------------------------------------------------------------------
Forms
------------------------------------------------------------------------- */
.grecaptcha-badge {
visibility: hidden;
}
input[type=checkbox] {
position: absolute;
width: 0.875em;
height: 0.875em;
padding: 0;
margin: 0;
z-index: 2;
opacity: 0;
}
input[type=checkbox] ~ label {
position: relative;
display: block;
margin: 0;
cursor: pointer;
}
.submit input[type=checkbox] ~ label {
text-indent: -1.75em;
padding: 0 0 0 1.75em;
}
/* relevant for kopano-page.grey ... */
.kopano-page.grey > .vc_column_container {
padding-top: 4.25em;
padding-bottom: 2em;
}
.kopano-page.grey .submit {
overflow: auto;
}
input[type=checkbox] ~ label:before {
display: inline-block;
position: relative;
width: 0.875em;
height: 0.875em;
margin: 0 0.875em 0 0;
z-index: 1;
cursor: pointer;
content: "";
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3Z' fill='%239E9E9E'/%3E%3Cpath d='M19 4C19.5523 4 20 4.44772 20 5V19C20 19.5523 19.5523 20 19 20H5C4.44772 20 4 19.5523 4 19V5C4 4.44772 4.44772 4 5 4H19Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
background-size: 0.875em 0.875em;
background-position: 0 0;
background-repeat: no-repeat;
}
input[type=checkbox]:disabled ~ label {
cursor: default;
color: #BDBDBD;
}
input[type=checkbox]:disabled ~ label:before {
cursor: default;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3Z' fill='%23BDBDBD'/%3E%3Cpath d='M19 4C19.5523 4 20 4.44772 20 5V19C20 19.5523 19.5523 20 19 20H5C4.44772 20 4 19.5523 4 19V5C4 4.44772 4.44772 4 5 4H19Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}
input[type=checkbox]:checked ~ label:before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 3H19C20.11 3 21 3.9 21 5V19C21 20.1 20.11 21 19 21H5C3.89 21 3 20.1 3 19V5C3 3.9 3.89 3 5 3ZM5 12L10 17L19 8L17.59 6.58L10 14.17L6.41 10.59L5 12Z' fill='%2300B3F0'/%3E%3C/svg%3E");
}
label > span {
display: inline;
font-style: normal;
font-weight: normal;
font-size: 1.125em;
line-height: 1.5em;
color: #424242;
}
label > span.policies {
font-size: 0.8em;
}
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: unset;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='rgba(33,33,33,1)' d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'%3E%3C/path%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: calc( 100% - 0.5em) center;
background-size: 1.5em 1.5em;
}
input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
textarea,
select {
border: 1px solid #BDBDBD;
box-sizing: border-box;
box-shadow: inset 0px 1px 8px rgba(0, 0, 0, 0.05);
border-radius: 0.25em;
padding: 0.625em;
margin: 0;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
background-color: #FFFFFF;
color: #212121;
}
.required {
color: unset;
}
label.required:after {
content: '*';
color: #00B3F0;
margin-left: 0.125em;
}
.kopano-form-element-wrapper > form > div:not(.submit) {
margin-bottom: 2em;
}
.kopano-form-element-wrapper > form > div.submit {
margin-top: 0.5em;
}
.kopano-form-element-wrapper > form > div.submit label {
font-style: normal;
font-weight: normal;
font-size: 0.875em;
line-height: 1.4em;
color: #424242;
}
/* -------------------------------------------------------------------------
Slick slider: center images, add below image
------------------------------------------------------------------------- */
.slick-track {
display: flex;
}
.slick-track .slick-slide {
display: flex;
height: auto;
align-items: center;
justify-content: center;
}
.slick-track .slick-slide {
display: flex;
flex-direction: column;
align-items: center;
justify-items: center;
padding: 10px;
}
.slick-track .slick-slide img {
max-width: calc(100% - 20px);
max-height: calc(100% - 20px);
box-shadow: var(--kopano-box-shadow);
}
.slick-track .slick-slide span {
display: block;
width: 100%;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
margin-top: 1.5em;
padding-left: 3em;
color: #616161;
}
/* needs to be in px :-( */
.slick-prev {
left: -8px;
width: 24px;
height: 24px;
z-index: 99;
}
.slick-next {
right: -8px;
width: 24px;
height: 24px;
z-index: 99;
}
.slick-prev:before, .slick-next:before {
display: block;
content: '';
background-size: 24px 24px;
background-position: 0 0;
background-repeat: no-repeat;
width: 24px;
height: 24px;
opacity: 1;
}
.slick-prev:before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2300B3F0'/%3E%3Cpath d='M14.71 7.07766C14.32 6.68766 13.69 6.68766 13.3 7.07766L8.70998 11.6677C8.31998 12.0577 8.31998 12.6877 8.70998 13.0777L13.3 17.6677C13.69 18.0577 14.32 18.0577 14.71 17.6677C15.1 17.2777 15.1 16.6477 14.71 16.2577L10.83 12.3677L14.71 8.48766C15.1 8.09766 15.09 7.45766 14.71 7.07766Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='24' height='24' fill='white' transform='translate(0 0)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.slick-next:before {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2300B3F0'/%3E%3Cpath d='M9.28999 7.07766C9.67999 6.68766 10.31 6.68766 10.7 7.07766L15.29 11.6677C15.68 12.0577 15.68 12.6877 15.29 13.0777L10.7 17.6677C10.31 18.0577 9.67999 18.0577 9.28999 17.6677C8.89999 17.2777 8.89999 16.6477 9.28999 16.2577L13.17 12.3677L9.28999 8.48766C8.89999 8.09766 8.90999 7.45766 9.28999 7.07766Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
/* -------------------------------------------------------------------------
Fancybox
------------------------------------------------------------------------- */
.fancy-kopano.fancybox-is-open .fancybox-bg {
background: #212121;
opacity: 0.4;
}
.fancybox-content .fancybox-close-small {
box-sizing: border-box;
padding: 0 !important;
top: 2em !important;
right: 2.5em !important;
width: 2.5em;
height: 2.5em;
color: #757575 !important;
}
.fancybox-content .fancybox-close-small svg {
width: 2.5em;
height: 2.5em;
}
.fancybox-is-open .fancybox-content {
min-width: 100%;
max-width: 100%;
min-height: 100%;
max-height: 100%;
border-radius: 0.625em;
padding: 0;
font-size: 3vw;
}
.fancybox-content .header {
padding: 2em 7.5em 1.5em 2.5em;
border-bottom: 1px solid #E0E0E0;
}
.fancybox-content .header h3 {
margin: 0;
font-style: normal;
font-weight: 500;
font-size: 1.5em;
line-height: 1.33em;
color: #212121;
}
.fancybox-content .content {
display: grid;
/* grid-row-gap: 7vw;*/
grid-column-gap: 7vw;
padding: 1.5em 2em 2.5em 2em;
}
.fancybox-content .content.small,
.fancybox-content .content.medium,
.fancybox-content .content.big,
.fancybox-content .content.top {
grid-template-columns: 1fr;
}
.fancybox-content .text-wrapper {
grid-row-start: 1;
}
.fancybox-content .kopano-form-element-wrapper {
grid-row-start: 2;
}
.fancybox-content .text-wrapper ul {
margin-top: 1.5em;
margin-bottom: 1.5em;
}
@media all and (min-width: 640px) {
.fancybox-is-open .fancybox-content {
min-width: unset;
max-width: 100%;
min-height: unset;
max-height: unset;
font-size: 2.5vw;
}
}
@media all and (min-width: 768px) {
.fancybox-is-open .fancybox-content {
min-width: unset;
max-width: 100%;
min-height: unset;
max-height: unset;
font-size: 1.6vw;
}
.fancybox-content .content.small {
grid-template-columns: 2fr 1fr;
}
.fancybox-content .content.medium {
grid-template-columns: 1fr 1fr;
}
.fancybox-content .content.big {
grid-template-columns: 1fr 2fr;
}
.fancybox-content .content.small > div,
.fancybox-content .content.medium > div,
.fancybox-content .content.big > div {
grid-row-start: 1;
}
}
@media all and (min-width: 1024px) {
.fancybox-is-open .fancybox-content {
min-width: unset;
max-width: 90%;
min-height: unset;
max-height: unset;
font-size: 1.25vw;
}
}
@media all and (min-width: 1280px) {
.fancybox-is-open .fancybox-content {
max-width: 1240px;
font-size: 16px;
}
}
/* -------------------------------------------------------------------------
Pagination
------------------------------------------------------------------------- */
ul.page-numbers {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 15em;
font-size: 3vw;
}
ul.page-numbers li {
padding: 0 0.625em;
background: none;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.25em;
color: #616161;
}
ul.page-numbers span,
ul.page-numbers a {
display: flex;
width: 1.5em;
height: 1.5em;
align-items: center;
justify-content: center;
}
ul.page-numbers li a,
ul.page-numbers li a:hover {
color: #616161;
}
ul.page-numbers .current {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2300B3F0'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: 0 0;
background-size: 1.5em 1.5em;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #FFFFFF;
}
@media all and (min-width: 640px) {
ul.page-numbers {
font-size: 2.5vw;
}
}
@media all and (min-width: 768px) {
ul.page-numbers {
font-size: 1.6vw;
}
}
@media all and (min-width: 1024px) {
ul.page-numbers {
font-size: 1.25vw;
}
}
@media all and (min-width: 1280px) {
ul.page-numbers {
font-size: 16px;
}
}
/* -------------------------------------------------------------------------
standard Kopano header
------------------------------------------------------------------------- */
.kopano-header {
width: 100%;
margin-top: 7.5vw;
margin-bottom: 9.375vw;
padding-bottom: 9.375vw;
justify-content: center;
font-style: normal;
font-weight: normal;
font-size: 4vw;
border-bottom: 1px solid #E0E0E0;
}
.kopano-header > div {
display: grid;
grid-template-columns: 0 1fr 0;
grid-column-gap: 7vw;
grid-row-gap: 0;
width: 100%;
justify-content: center;
}
.kopano-header strong,
.kopano-header div {
font-size: inherit;
line-height: inherit;
}
.kopano-header-title,
.kopano-header-subtitle,
.kopano-header-intro,
.kopano-header-action,
.kopano-header-image {
grid-column-start: 2;
}
.kopano-header-title,
.kopano-header-subtitle {
margin-top: 1.25vw;
}
.kopano-header-intro {
margin-top: 5vw;
}
.kopano-header-action {
margin-top: 3.75vw;
}
.kopano-header-image > div {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.kopano-header-image img {
width: 100%;
height: auto;
box-shadow: var(--kopano-box-shadow);
}
.kopano-header-image .gallery {
width: 78vw;
}
.kopano-header-title h1 {
margin: 0;
padding: 0;
color: #424242;
font-size: 3.5em;
line-height: 1.3em;
}
.kopano-header-subtitle h2 {
margin: 0;
padding: 0;
color: #616161;
font-size: 1.5em;
line-height: 1.5em;
}
.kopano-header-intro p {
margin: 0;
padding: 0;
color: #000000;
font-size: 1em;
line-height: 1.5em;
}
@media all and (min-width: 640px) {
.kopano-header {
font-size: 2.5vw;
}
.kopano-header > div {
grid-template-columns: 0 1fr 0;
grid-column-gap: 7vw;
}
}
@media all and (min-width: 768px) {
.kopano-header {
font-size: 1.6vw;
}
.kopano-header > div {
grid-template-columns: 0 repeat(2,1fr) 0;
grid-column-gap: 7vw;
}
.kopano-header-image {
grid-column-start: 3;
grid-row-start: 1;
grid-row-end: 5;
}
.kopano-header-title {
grid-row-start: 1;
margin-top: 0;
}
.kopano-header-subtitle {
grid-row-start: 2;
margin-top: 1.25vw;
}
.kopano-header-intro {
grid-row-start: 3;
margin-top: 5vw;
}
.kopano-header-action {
grid-row-start: 4;
margin-top: 3.75vw;
}
.kopano-header-image .gallery {
width: 39vw;
}
}
@media all and (min-width: 1024px) {
.kopano-header {
font-size: 1.25vw;
}
.kopano-header > div {
grid-template-columns: 0 repeat(2,1fr) 0;
grid-column-gap: 5.5vw;
}
}
@media all and (min-width: 1280px) {
.kopano-header {
margin-top: 96px;
margin-bottom: 120px;
padding-bottom: 120px;
font-size: 16px;
}
.kopano-header > div {
grid-template-columns: 0 repeat(2,minmax(370px, 585px)) 0;
grid-column-gap: 70px;
}
.kopano-header-subtitle {
margin-top: 16px;
}
.kopano-header-intro {
margin-top: 64px;
}
.kopano-header-action {
margin-top: 48px;
}
.kopano-header-image .gallery {
width: 500px;
}
}
/* -------------------------------------------------------------------------
creates 2-column page layout consisting of:
-> kopano-page-content
-> kopano-page-image or kopano-page-content-2
pages can be:
-> kopano-page left: image/content-2 to the right
-> kopano-page right: image/content-2 to the left
-> kopano-page center: here content has a max width of 1000px, while content-2 has full width
options:
-> grey: grey background
-> middle: image, content and content-2 are vertically centered
-> padding: a space to the top and to the bottom
-> carry-in: a blue hand pointing to the paragraph
-> kopano-page-image.has-shadow: two img's behind each other -> no newline between the img's!
-> one-to-three, three-to-one
-> three-columns
------------------------------------------------------------------------- */
.kopano-page {
margin: 0 !important;
margin-bottom: 9.375vw !important;
font-style: normal;
font-weight: normal;
font-size: 4vw;
line-height: 1.5em;
color: #000000;
}
.kopano-page p,
.kopano-page strong,
.kopano-page div {
font-size: inherit;
}
.kopano-page .vc_column_container > .vc_column-inner {
padding: 0;
}
.kopano-page > .vc_column_container > .vc_column-inner > .wpb_wrapper {
display: grid;
grid-template-columns: 0 1fr 0;
grid-column-gap: 7vw;
grid-row-gap: 7vw;
justify-content: center;
}
.kopano-page .wpb_wrapper {
width: 100%;
}
.kopano-page-header {
grid-column-start: 2;
grid-row-start: 1;
}
.kopano-page-content-2,
.kopano-page-image {
grid-column-start: 2;
grid-row-start: 2;
}
.kopano-page-content {
grid-column-start: 2;
grid-row-start: 3;
}
.kopano-page-content,
.kopano-page-content-2,
.kopano-page-image {
display: flex;
align-items: top;
margin: 0 !important;
}
.kopano-page-image img {
width: 100%;
height: auto;
box-shadow: var(--kopano-box-shadow);
}
/* 2 images above each other */
.kopano-page-image.has-shadow {
position: relative;
}
.kopano-page-image.has-shadow img:nth-child(odd) {
position: absolute;
left: 0;
top: 0;
width: 70;
min-width: 70%;
max-width: 70%;
}
.kopano-page-image.has-shadow img:nth-child(even) {
position: absolute;
left: 30%;
top: 30%;
width: 70%;
min-width: 70%;
max-width: 70%;
}
/* --- Options ------------------------------------------------------------- */
.kopano-page-image.no-shadow img {
box-shadow: none;
}
.kopano-page-content-2.three-columns > .wpb_wrapper,
div:not(.kopano-page-content-2).three-columns {
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 3.5vw;
grid-row-gap: 3.5vw;
}
.three-columns::before,
.three-columns::after {
content: '';
}
.kopano-page-content-2.three-columns > .vc_col-sm-4 {
width: 100%;
}
.kopano-page-content-2.three-columns .relative {
margin-bottom: 8em;
}
.kopano-page-content-2.three-columns .absolute {
position: absolute;
bottom: 0;
left: 0;
}
.kopano-page.carry-in:before {
position: relative;
top: 8vw;
left: calc(50% - 8vw);
width: 16vw;
height: 16vw;
z-index: 10;
border: 0;
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/general-icon-carry-in.svg);
background-size: cover;
}
.kopano-page.carry-in > .vc_column_container {
border-top: #E0E0E0 1px solid;
padding-top: 13.2vw !important;
}
.kopano-page.carry-in > .vc_column_container {
z-index: 5;
}
.kopano-page.grey > .vc_column_container {
background-color: #FAFAFA !important;
border-top: none !important;
}
.kopano-page .kopano-page-content.grey > .wpb_wrapper,
.kopano-page .kopano-page-content-2.grey > .wpb_wrapper {
background-color: #FAFAFA;
padding: 2em;
}
.kopano-page.middle .kopano-page-content,
.kopano-page.middle .kopano-page-content-2,
.kopano-page.middle .kopano-page-image,
.kopano-page-content.middle,
.kopano-page-content-2.middle,
.kopano-page-image.middle {
display: flex;
align-items: center;
margin: 0 !important;
}
.kopano-page.padding > .vc_column_container {
padding-top: 14vw;
padding-bottom: 14vw;
}
.center.two-columns .kopano-page-content-2 > .wpb_wrapper {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
.center.two-columns .kopano-page-content-2 > .wpb_wrapper > * {
break-inside: avoid;
page-break-inside: avoid;
-webkit-column-break-inside: avoid;
}
.kopano-page-content img,
.kopano-page-content-2 img {
max-width: 100%;
height: auto;
}
@media all and (min-width: 640px) {
.kopano-page {
font-size: 2.5vw;
}
}
@media all and (min-width: 768px) {
.kopano-page {
font-size: 1.6vw;
}
.kopano-page > .vc_column_container > .vc_column-inner > .wpb_wrapper {
grid-template-columns: 0 repeat(2,1fr) 0;
grid-row-gap: 0;
}
.kopano-page.one-to-two > .vc_column_container > .vc_column-inner > .wpb_wrapper {
grid-template-columns: 0 1fr 2fr 0;
}
.kopano-page.two-to-one > .vc_column_container > .vc_column-inner > .wpb_wrapper {
grid-template-columns: 0 2fr 1fr 0;
}
.kopano-page-header,
.kopano-page.center .kopano-page-image,
.kopano-page.center .kopano-page-content,
.kopano-page.center .kopano-page-content-2 {
grid-column-start: 2;
grid-column-end: 4;
}
.kopano-page-header {
grid-row-start: 1;
}
.kopano-page.center .kopano-page-image {
grid-row-start: 2;
}
.kopano-page.center .kopano-page-content,
.kopano-page.center .kopano-page-content-2 {
grid-row-start: 3;
}
/* 2 columns, text left or right */
.kopano-page.right .kopano-page-image,
.kopano-page.right .kopano-page-content-2,
.kopano-page.left .kopano-page-content {
grid-column-start: 2;
grid-row-start: 2;
}
.kopano-page.left .kopano-page-image,
.kopano-page.left .kopano-page-content-2,
.kopano-page.right .kopano-page-content {
grid-column-start: 3;
grid-row-start: 2;
}
/*.kopano-page-content-2.three-columns {*/
.kopano-page-content-2.three-columns > .wpb_wrapper,
div:not(.kopano-page-content-2).three-columns {
grid-template-columns: 0 repeat(3,1fr) 0;
grid-column-gap: 3.5vw;
}
.kopano-page.carry-in:before {
top: 3.125vw;
left: calc(50% - 3.125vw);
width: 6.25vw;
height: 6.25vw;
}
.kopano-page.carry-in > .vc_column_container {
padding-top: 7.5vw !important;
}
.kopano-page.padding > .vc_column_container {
padding-top: 4.375vw;
padding-bottom: 4.375vw;
}
.center.two-columns .kopano-page-content-2 > .wpb_wrapper {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 7vw;
-moz-column-gap: 7vw;
column-gap: 7vw;
}
}
@media all and (min-width: 1024px) {
.kopano-page {
font-size: 1.25vw;
}
.kopano-page > .vc_column_container > .vc_column-inner > .wpb_wrapper {
grid-column-gap: 5.5vw;
}
.kopano-page.center .kopano-page-content {
justify-content: center;
}
.kopano-page.center .kopano-page-content > .wpb_wrapper {
max-width: 1000px;
}
}
@media all and (min-width: 1280px) {
.kopano-page {
margin-bottom: 120px !important;
font-size: 16px;
}
.kopano-page > .vc_column_container > .vc_column-inner > .wpb_wrapper {
grid-template-columns: 0 repeat(2,minmax(370px, 585px)) 0;
grid-column-gap: 70px;
}
.kopano-page.one-to-two > .vc_column_container > .vc_column-inner > .wpb_wrapper {
grid-template-columns: 0 minmax(247px,390px) minmax(493px,780px) 0;
}
.kopano-page.two-to-one > .vc_column_container > .vc_column-inner > .wpb_wrapper {
grid-template-columns: 0 minmax(493px,780px) minmax(247px,390px) 0;
}
/*.kopano-page-content-2.three-columns {*/
.kopano-page-content-2.three-columns > .wpb_wrapper,
div:not(.kopano-page-content-2).three-columns {
grid-template-columns: 0 repeat(3,1fr) 0;
grid-column-gap: 35px;
}
.kopano-page.carry-in:before {
top: 40px;
left: calc(50% - 40px);
width: 80px;
height: 80px;
}
.kopano-page.carry-in > .vc_column_container {
padding-top: 100px !important;
}
.kopano-page.padding > .vc_column_container {
padding-top: 56px;
padding-bottom: 56px;
}
.center.two-columns .kopano-page-content-2 > .wpb_wrapper {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 70px;
-moz-column-gap: 70px;
column-gap: 70px;
}
}
/* -------------------------------------------------------------------------
Kopano Footer
------------------------------------------------------------------------- */
.kopano-footer-wrapper {
width: 100%;
justify-content: center;
font-size: 4vw;
background-color: #424242;
}
.footer .button,
.kopano-footer-wrapper p,
.kopano-footer-wrapper span,
.kopano-footer-wrapper div {
font-size: inherit;
}
.footer .button {
padding: 0.8125em 1em 0.75em 1em;
}
.kopano-footer-wrapper > div {
display: grid;
grid-template-columns: 0 repeat(2,1fr) 0;
grid-column-gap: 70px;
justify-content: center;
width: 100%;
}
.kopano-footer,
.kopano-footer-social,
.kopano-footer-terms {
grid-column-start: 2;
grid-column-end: 4;
}
.kopano-footer-social {
padding-top: 0;
padding-bottom: 0;
}
.kopano-footer {
padding-top: 3em;
padding-bottom: 0;
}
.kopano-footer-social > div,
.kopano-footer > div {
width: 100%;
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 0px;
grid-row-gap: 7vw;
}
.kopano-footer-social > div {
grid-template-columns: 1fr;
}
.kopano-footer .sites {
display: none;
}
.kopano-footer h3 {
font-style: normal;
font-weight: bold;
font-size: 1em;
line-height: 1.5em;
color: #FFFFFF;
margin-bottom: 1em;
}
.kopano-footer p,
.kopano-footer span,
.kopano-footer a,
.kopano-footer-terms,
.kopano-footer-terms a {
font-style: normal;
font-weight: normal;
font-size: 0.875em;
line-height: 1.5em;
color: #FFFFFF;
}
.kopano-footer a > span,
.kopano-footer a,
.kopano-footer a:hover {
font-size: 1em;
}
.kopano-footer .newsletter {
grid-column-start: 1;
grid-column-end: 2;
}
.kopano-footer .kopano-form-element-wrapper > form > div {
margin: 0.75em 0;
}
/*.kopano-footer label {
display: none;
}*/
.kopano-footer .mc-field-group {
padding: 0.5em;
font-style: normal;
font-weight: normal;
font-size: 0.875em;
line-height: 1.5em;
color: #FFFFFF;
}
.kopano-footer .mc-field-group label {
font-size: 1em;
line-height: 1em;
}
.kopano-footer .mc-field-group.left {
width: 50%;
float: left;
}
.kopano-footer .mc-field-group.right {
width: 50%;
float: right;
text-align: right;
}
.kopano-footer .mc-field-group.right input {
margin: 0;
}
.kopano-footer-social > div > div {
text-align: center;
}
.kopano-footer-social .social {
display: inline-block;
border: 0;
clear: both;
padding: 1em 0 0 0;
margin: 0;
}
.kopano-footer-terms {
padding-top: 1em;
padding-bottom: 2em;
margin-top: 4em;
border-top: 1px solid #E0E0E0;
text-align: center;
font-size: 0.875em !important;
}
.kopano-landing-page .kopano-footer-terms,
.kopano-landing-page .kopano-footer-terms a {
color: #757575;
}
@media all and (min-width: 640px) {
.kopano-footer-wrapper {
font-size: 2vw;
}
.kopano-footer > div {
grid-template-columns: 2fr 3fr 2fr;
}
.kopano-footer .newsletter {
grid-column-start: 1;
grid-column-end: 4;
}
.kopano-footer .sites {
display: block;
}
}
@media all and (min-width: 768px) {
.kopano-footer-wrapper {
font-size: 1.6vw;
}
}
@media all and (min-width: 1024px) {
.kopano-footer-wrapper {
font-size: 1.2vw;
}
.kopano-footer > div {
grid-template-columns: 2fr 3fr 2fr 4fr;
grid-row-gap: unset;
}
.kopano-footer .newsletter {
grid-column-start: unset;
grid-column-end: unset;
grid-row-start: unset;
}
}
@media all and (min-width: 1280px) {
.kopano-footer-wrapper {
font-size: 16px;
}
.kopano-footer-wrapper > div {
grid-template-columns: 0 repeat(2,minmax(370px, 585px)) 0;
grid-column-gap: 70px;
}
}
/* -------------------------------------------------------------------------
FAQs
------------------------------------------------------------------------- */
.kopano-faq {
font-size: 4vw;
}
.kopano-faq h2 {
font-style: normal;
font-weight: 500;
font-size: 2em;
line-height: 1.5em;
letter-spacing: 0.015em;
color: #37474F;
}
.kopano-faq .faq-list {
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 3em;
}
.kopano-faq .faq-list > div {
position: relative;
padding: 1.125em 0;
border-bottom: 1px solid #E0E0E0;
}
.kopano-faq .faq-list > div > input {
width: 0;
height: 0;
}
.kopano-faq .faq-list > div > label:before {
display: none;
}
.kopano-faq .faq-list > div > label {
display: inline-block;
box-sizing: border-box;
width: 100%;
padding: 0 2.5em 0 0;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
letter-spacing: 0.015em;
text-indent: unset;
color: #212121;
}
.kopano-faq .faq-list > div > label:after {
position: absolute;
right: 0;
top: 0;
width: 1.6em;
height: 1.6em;
content: " ";
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.0003 17.3346H17.3337V24.0013C17.3337 24.7346 16.7337 25.3346 16.0003 25.3346C15.267 25.3346 14.667 24.7346 14.667 24.0013V17.3346H8.00033C7.26699 17.3346 6.66699 16.7346 6.66699 16.0013C6.66699 15.268 7.26699 14.668 8.00033 14.668H14.667V8.0013C14.667 7.26797 15.267 6.66797 16.0003 6.66797C16.7337 6.66797 17.3337 7.26797 17.3337 8.0013V14.668H24.0003C24.7337 14.668 25.3337 15.268 25.3337 16.0013C25.3337 16.7346 24.7337 17.3346 24.0003 17.3346Z' fill='%2300B3F0'/%3E%3C/svg%3E%0A");
background-size: 1.6em 1.6em;
background-position: 0 0;
}
.kopano-faq .faq-list .answer {
height: 0;
padding: 0;
overflow: hidden;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
letter-spacing: 0.015em;
color: #424242;
}
.kopano-faq .faq-list .answer .kopano-form-element-wrapper {
margin-top: 1.5em;
}
.kopano-faq .faq-list .answer .links {
padding-top: 1.5em;
}
.kopano-faq .faq-list .answer a,
.kopano-faq .faq-list .answer a:hover {
font-weight: inherit;
font-style: inherit;
font-size: inherit;
line-height: inherit;
text-decoration: underline;
color: #188cc8;
}
.kopano-faq .faq-list > div > input:checked~.answer {
height: auto;
padding: 1.5em 0 0.375em 0;
}
.kopano-faq .faq-list > div > input:checked~label {
color: #14A9E7;
}
.kopano-faq .faq-list > div > input:checked~label:after {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25.3337 16.0013C25.3337 16.7377 24.7367 17.3346 24.0003 17.3346H8.00032C7.26395 17.3346 6.66699 16.7377 6.66699 16.0013C6.66699 15.2649 7.26395 14.668 8.00033 14.668H24.0003C24.7367 14.668 25.3337 15.2649 25.3337 16.0013Z' fill='%2300B3F0'/%3E%3C/svg%3E%0A");
}
.kopano-faq .faq-list > div > input:checked~.answer,
.kopano-faq .faq-list > div > input:checked~label,
.kopano-faq .faq-list > div > input:checked~label:after {
-webkit-transition: var(--kopano-transition-time) ease-in-out;
-moz-transition: var(--kopano-transition-time) ease-in-out;
-o-transition: var(--kopano-transition-time) ease-in-out;
transition: var(--kopano-transition-time) ease-in-out;
}
@media all and (min-width: 640px) {
.kopano-faq {
font-size: 2.5vw;
}
}
@media all and (min-width: 768px) {
.kopano-faq {
font-size: 1.6vw;
}
.kopano-faq .faq-list {
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 3em;
grid-row-gap: 0;
}
}
@media all and (min-width: 1024px) {
.kopano-faq {
font-size: 1.25vw;
}
}
@media all and (min-width: 1280px) {
.kopano-faq {
font-size: 16px;
}
}
/* -------------------------------------------------------------------------
standard Kopano cards
- Headline: h4
- Text: p
- Date & Co.: .meta (bottom, left)
- Button: .action (bottom, right)
- Icon: .overlay (circle / top, right)
------------------------------------------------------------------------- */
.kopano-card-wrapper {
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 2.3vw;
grid-row-gap: 2.3vw;
justify-content: center;
}
.kopano-card-wrapper a,
.kopano-card-wrapper a:hover {
text-decoration: none;
}
.kopano-card {
position: relative;
display: block;
width: 100%;
height: 100%;
border: 1px solid #EEEEEE;
border-radius: 0.5em;
overflow: hidden;
font-size: 3.5vw;
}
.kopano-card .image {
position: relative;
width: 100%;
height: 61.6vw;
overflow: hidden;
}
.kopano-card .image img {
min-height: 100%;
max-height: 100%;
min-width: 100%;
max-width: 100%;
object-fit: cover;
object-position: 50% 0;
position: absolute;
display: block;
}
.kopano-card h4 {
display: block;
font-style: normal;
font-weight: 500;
font-size: 1.5em;
line-height: 1.33em;
color: #212121;
margin: 3.5vw 5.25vw 0 5.25vw;
}
.kopano-card p {
display: block;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #616161;
margin: 4.34vw 5.25vw 21vw 5.25vw;
}
.kopano-card .meta {
position: absolute;
left: 5.25vw;
bottom: 5.25vw;
font-style: normal;
font-weight: normal;
font-size: 0.875em;;
line-height: 1em;;
color: #9E9E9E;
}
.kopano-card .action {
position: absolute;
right: 5.25vw;
bottom: 5.25vw;
}
.kopano-card .overlay {
position: absolute;
top: 5.25vw;
right: 5.25vw;
width: 17.5vw;
height: 17.5vw;
border-radius: 50%;
background-color: #FFFFFF;
box-shadow: var(--kopano-box-shadow);
overflow: hidden;
}
.kopano-card .overlay img {
max-width: 75%;
max-height: 75%;
width: auto;
height: auto;
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
-moz-transform: translate(-50%, -50%); /* Firefox */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-o-transform: translate(-50%, -50%); /* Opera */
}
.kopano-card .hoverlay {
display: flex;
align-items: center;
opacity: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 10px;
text-align: left;
background-color: #FFFFFF;
opacity: 0;
}
.kopano-card .hoverlay p {
padding: 0;
margin: 0;
}
.kopano-card:hover .hoverlay {
-webkit-transition: opacity var(--kopano-transition-time) ease-in-out;
-moz-transition: opacity var(--kopano-transition-time) ease-in-out;
-o-transition: opacity var(--kopano-transition-time) ease-in-out;
transition: opacity var(--kopano-transition-time) ease-in-out;
opacity: 1;
}
/* only hover when on top of links inside the card */
:not(a) > .kopano-card {
pointer-events: none;
}
.kopano-card a,
.kopano-card input {
pointer-events: auto;
}
.kopano-card:hover {
border: 1px solid #FFFFFF;
box-shadow: var(--kopano-box-shadow);
}
@media all and (min-width: 640px) {
.kopano-card-wrapper {
grid-template-columns: minmax(195px, 655px);
}
.kopano-card {
font-size: 2.5vw;
}
.kopano-card .image {
height: 44vw;
}
.kopano-card h4 {
margin: 2.5vw 3.75vw 0 3.75vw;
}
.kopano-card p {
margin: 3.1vw 3.75vw 15vw 3.75vw;
}
.kopano-card .meta {
left: 3.75vw;
bottom: 3.75vw;
}
.kopano-card .action {
right: 3.75vw;
bottom: 3.75vw;
}
.kopano-card .overlay {
top: 3.75vw;
right: 3.75vw;
width: 12.5vw;
height: 12.5vw;
}
}
@media all and (min-width: 768px) {
.kopano-card {
font-size: 1.6vw;
}
}
@media all and (min-width: 1024px) {
.kopano-card-wrapper {
grid-template-columns: repeat(2, minmax(195px, 445px));
}
.kopano-card {
font-size: 1.25vw;
}
.kopano-card .image {
height: 22vw;
}
.kopano-card h4 {
margin: 1.25vw 1.875vw 0 1.875vw;
}
.kopano-card p {
margin: 1.55vw 1.875vw 7.5vw 1.875vw;
}
.kopano-card .meta {
left: 1.875vw;
bottom: 1.875vw;
}
.kopano-card .action {
right: 1.875vw;
bottom: 1.875vw;
}
.kopano-card .overlay {
top: 1.875vw;
right: 1.875vw;
width: 6.25vw;
height: 6.25vw;
}
}
@media all and (min-width: 1280px) {
.kopano-card-wrapper {
grid-template-columns: repeat(2, minmax(195px, 445px));
grid-column-gap: 30px;
grid-row-gap: 30px;
}
.kopano-card {
font-size: 16px;
}
.kopano-card .image {
height: 280px;
}
.kopano-card h4 {
margin: 16px 24px 0 24px;
}
.kopano-card p {
margin: 20px 24px 96px 24px;
}
.kopano-card .meta {
left: 24px;
bottom: 24px;
}
.kopano-card .action {
right: 24px;
bottom: 24px;
}
.kopano-card .overlay {
top: 24px;
right: 24px;
width: 80px;
height: 80px;
}
}
/* -------------------------------------------------------------------------
Search & Filter
-> block: kopano-page center
-> add row: kopano-page-content-2 search-filter
-> text box: filter
-> text box: results
------------------------------------------------------------------------- */
.search-filter > .wpb_column > .vc_column-inner > .wpb_wrapper {
display: grid;
grid-template-columns: 1fr;
grid-row-gap: 3.75vw;
}
.search-filter .filter > .wpb_wrapper {
font-size: 4vw;
}
.search-filter .filter form > ul {
background-color: #FAFAFA;
border-radius: 0.5em;
padding: 1.5em 1em;
}
.search-filter .filter ul,
.search-filter .filter li {
list-style: none;
background-image: none;
padding: 0;
margin: 0;
}
.sf-field-search,
.sf-field-search label,
.sf-field-search input {
width: 100%;
}
.sf-field-search input {
background-color: #FFFFFF;
}
.sf-field-search input::-webkit-input-placeholder {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.502 14.0012H14.708L14.432 13.7272C15.407 12.5902 16 11.1162 16 9.50119C16 5.91119 13.09 3.00119 9.5 3.00119C5.91 3.00119 3 5.91119 3 9.50119C3 13.0912 5.91 16.0012 9.5 16.0012C11.115 16.0012 12.588 15.4092 13.725 14.4352L14.001 14.7092V15.5012L18.999 20.4922L20.49 19.0012L15.502 14.0012ZM9.5 14.0012C7.014 14.0012 5 11.9872 5 9.50119C5 7.01619 7.014 5.00119 9.5 5.00119C11.985 5.00119 14 7.01619 14 9.50119C14 11.9872 11.985 14.0012 9.5 14.0012Z' fill='black' fill-opacity='0.54'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: 0 0;
background-size: 1.5em 1.5em;
padding-left: 2em;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #616161;
}
.sf-field-search input::-moz-placeholder {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.502 14.0012H14.708L14.432 13.7272C15.407 12.5902 16 11.1162 16 9.50119C16 5.91119 13.09 3.00119 9.5 3.00119C5.91 3.00119 3 5.91119 3 9.50119C3 13.0912 5.91 16.0012 9.5 16.0012C11.115 16.0012 12.588 15.4092 13.725 14.4352L14.001 14.7092V15.5012L18.999 20.4922L20.49 19.0012L15.502 14.0012ZM9.5 14.0012C7.014 14.0012 5 11.9872 5 9.50119C5 7.01619 7.014 5.00119 9.5 5.00119C11.985 5.00119 14 7.01619 14 9.50119C14 11.9872 11.985 14.0012 9.5 14.0012Z' fill='black' fill-opacity='0.54'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: 0 0;
background-size: 1.5em 1.5em;
padding-left: 2em;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #616161;
}
.sf-field-search input:-ms-input-placeholder {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.502 14.0012H14.708L14.432 13.7272C15.407 12.5902 16 11.1162 16 9.50119C16 5.91119 13.09 3.00119 9.5 3.00119C5.91 3.00119 3 5.91119 3 9.50119C3 13.0912 5.91 16.0012 9.5 16.0012C11.115 16.0012 12.588 15.4092 13.725 14.4352L14.001 14.7092V15.5012L18.999 20.4922L20.49 19.0012L15.502 14.0012ZM9.5 14.0012C7.014 14.0012 5 11.9872 5 9.50119C5 7.01619 7.014 5.00119 9.5 5.00119C11.985 5.00119 14 7.01619 14 9.50119C14 11.9872 11.985 14.0012 9.5 14.0012Z' fill='black' fill-opacity='0.54'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: 0 0;
background-size: 1.5em 1.5em;
padding-left: 2em;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #616161;
}
.sf-field-search input:-moz-placeholder {
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.502 14.0012H14.708L14.432 13.7272C15.407 12.5902 16 11.1162 16 9.50119C16 5.91119 13.09 3.00119 9.5 3.00119C5.91 3.00119 3 5.91119 3 9.50119C3 13.0912 5.91 16.0012 9.5 16.0012C11.115 16.0012 12.588 15.4092 13.725 14.4352L14.001 14.7092V15.5012L18.999 20.4922L20.49 19.0012L15.502 14.0012ZM9.5 14.0012C7.014 14.0012 5 11.9872 5 9.50119C5 7.01619 7.014 5.00119 9.5 5.00119C11.985 5.00119 14 7.01619 14 9.50119C14 11.9872 11.985 14.0012 9.5 14.0012Z' fill='black' fill-opacity='0.54'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: 0 0;
background-size: 1.5em 1.5em;
padding-left: 2em;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #616161;
}
/* --- all tags/categories ------------------------------------------------- */
.search-filter .filter li.sf-field-taxonomy-extension_category,
.search-filter .filter li.sf-field-taxonomy-extension_tags,
.search-filter .filter li.sf-field-taxonomy-extension_flags,
.search-filter .filter li.sf-field-taxonomy-kopano_partner_countries,
.search-filter .filter li.sf-field-taxonomy-kopano_partner_tags {
border-top: 1px solid #E0E0E0;
margin-top: 2em;
padding-top: 2em;
}
.search-filter .filter h4 {
font-style: normal;
font-weight: normal;
font-size: 1.25em;
line-height: 1.4em;
color: #212121;
}
/* --- tags only ----------------------------------------------------------- */
.sf-field-taxonomy-extension_tags > ul,
.sf-field-taxonomy-extension_flags > ul,
.sf-field-taxonomy-kopano_partner_tags > ul {
display: inline-block;
}
.sf-field-taxonomy-extension_tags > ul > li,
.sf-field-taxonomy-extension_flags > ul > li,
.sf-field-taxonomy-kopano_partner_tags > ul > li {
display: inline;
float: left;
}
.sf-field-taxonomy-extension_tags input[type=checkbox],
.sf-field-taxonomy-extension_flags input[type=checkbox],
.sf-field-taxonomy-kopano_partner_tags input[type=checkbox] {
display: none;
}
.sf-field-taxonomy-extension_tags input[type=checkbox] + label:before,
.sf-field-taxonomy-extension_flags input[type=checkbox] + label:before,
.sf-field-taxonomy-kopano_partner_tags input[type=checkbox] + label:before {
display: none;
}
.search-filter .sf-field-taxonomy-extension_tags input[type=checkbox] + label,
.sf-field-taxonomy-extension_tags input[type=checkbox] + label,
.sf-field-taxonomy-extension_flags input[type=checkbox] + label,
.sf-field-taxonomy-kopano_partner_tags input[type=checkbox] + label {
background: #FFFFFF;
border: 1px solid #E0E0E0;
border-radius: 0.5em;
padding: 0.5em 0.75em !important;
margin-right: 0.75em;
margin-bottom: 0.75em;
white-space: nowrap;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #424242;
}
.sf-field-taxonomy-extension_tags input[type=checkbox]:disabled + label,
.sf-field-taxonomy-extension_flags input[type=checkbox]:disabled + label,
.sf-field-taxonomy-kopano_partner_tags input[type=checkbox]:disabled + label {
color: #BDBDBD;
}
.sf-field-taxonomy-extension_tags input[type=checkbox]:checked + label,
.sf-field-taxonomy-extension_flags input[type=checkbox]:checked + label,
.sf-field-taxonomy-kopano_partner_tags input[type=checkbox]:checked + label {
background-color: #00B3F0;
color: #FFFFFF;
}
.sf-field-taxonomy-kopano_partner_countries label,
.sf-field-taxonomy-kopano_partner_countries .sf-input-select {
width: 100%;
}
/* --- show buttons if JS is disabled -------------------------------------- */
.searchandfilter li.sf-field-submit {
float: left;
}
.searchandfilter li.sf-field-submit,
.searchandfilter li.sf-field-reset {
height: 2.875em;
display: inline-block;
}
.sf-field-submit input,
.sf-field-reset a {
box-sizing: border-box;
border-radius: 0.25em;
font-style: normal;
font-weight: 700;
font-size: 1em;
line-height: 1.3125em;
text-align: center;
letter-spacing: 0.0781em;
text-transform: uppercase;
border: 0;
box-shadow: none;
}
.sf-field-submit input {
height: 2.875em;
background-color: #00B3F0;
border-bottom: 2px solid #0D74B6;
color: #FFFFFF;
padding: 0.8125em 1em 0.75em 1em;
}
.sf-field-reset a {
display: inline-block;
height: 2.875em;
margin-left: 1em;
color: #00B3F0;
padding: 0.8125em 1em 0.75em 1em;
}
.sf-field-submit input:hover {
text-decoration: none;
box-shadow: var(--kopano-box-shadow);
-webkit-transition: var(--kopano-transition-time) ease-in-out;
-moz-transition: var(--kopano-transition-time) ease-in-out;
-o-transition: var(--kopano-transition-time) ease-in-out;
transition: var(--kopano-transition-time) ease-in-out;
}
/* see js/AR.js */
html:not(.js-enabled) li.sf-field-submit,
html:not(.js-enabled) li.sf-field-reset {
display: none;
}
@media all and (min-width: 640px) {
.search-filter .filter > .wpb_wrapper {
font-size: 2.5vw;
}
}
@media all and (min-width: 768px) {
.search-filter > .wpb_column > .vc_column-inner > .wpb_wrapper {
grid-template-columns: 28vw 1fr;
grid-column-gap: 3.75vw;
}
.search-filter .filter > .wpb_wrapper {
font-size: 1.5vw;
}
}
@media all and (min-width: 1024px) {
.search-filter > .wpb_column > .vc_column-inner > .wpb_wrapper {
grid-template-columns: 23.5vw 1fr;
grid-column-gap: 3.75vw;
}
.search-filter .filter > .wpb_wrapper {
font-size: 1.25vw;
}
}
@media all and (min-width: 1280px) {
.search-filter > .wpb_column > .vc_column-inner > .wpb_wrapper {
grid-template-columns: 300px 1fr;
grid-column-gap: 48px;
}
.search-filter .filter > .wpb_wrapper {
font-size: 16px;
}
}
.search-filter-results {
margin: 0;
padding: 0;
}
/* -------------------------------------------------------------------------
Search & Filter results: Partner
------------------------------------------------------------------------- */
.kopano-card-wrapper.kopano-partner-list {
grid-template-columns: 1fr;
grid-column-gap: 3.125vw;
grid-row-gap: 2.5vw;
margin-bottom: 2.5vw;
}
.kopano-card-wrapper.kopano-partner-list .kopano-card {
display: flex;
flex-direction: column;
pointer-events: auto;
min-height: 17em;
font-size: 4vw;
}
.kopano-card-wrapper.kopano-partner-list .image {
display: flex;
justify-content: center;
width: 100%;
height: 6.25em;
margin: 0;
}
.kopano-card-wrapper.kopano-partner-list .image img {
max-height: 60%;
max-width: 80%;
min-height: unset;
min-width: unset;
width: auto;
height: auto;
align-self: center;
}
.kopano-card-wrapper.kopano-partner-list h4 {
margin: 0;
font-style: normal;
font-weight: bold;
font-size: 1.25em;
line-height: 1.6em;
text-align: center;
letter-spacing: 0.015em;
color: #37474F;
}
.kopano-card-wrapper.kopano-partner-list p {
margin-top: 1em;
text-align: center;
margin-bottom: auto;
}
.kopano-card-wrapper.kopano-partner-list p span {
display: block;
font-style: normal;
font-weight: normal;
font-size: 0.875em;
line-height: 1.7em;
text-align: center;
color: #757575;
}
.kopano-card-wrapper.kopano-partner-list .meta {
position: unset;
margin-top: 1.25em;
margin-bottom: 2em;
text-align: center;
}
.kopano-card-wrapper.kopano-partner-list .meta ul,
.kopano-card-wrapper.kopano-partner-list .meta li {
list-style: none;
background-image: none;
padding: 0;
margin: 0;
}
.kopano-card-wrapper.kopano-partner-list .meta li {
display: inline;
}
.kopano-card-wrapper.kopano-partner-list .meta li > span {
display: inline-block;
margin: 0.1875em 0.75em 0 0.75em;
background: #E5F7FD;
border-radius: 0.75em;
align-self: center;
align-items: center;
flex-grow: 0;
padding: 0.1875em 0.75em;
font-style: normal;
font-weight: normal;
font-size: 0.75em;
line-height: 1.5em;
color: #424242;
}
.kopano-card-wrapper.kopano-partner-list .hoverlay {
display: flex;
flex-direction: column;
}
.kopano-card-wrapper.kopano-partner-list .hoverlay h4 {
margin-top: auto;
margin-bottom: 0;
}
.kopano-card-wrapper.kopano-partner-list .hoverlay .contact-name {
margin-top: 1.5em;
margin-bottom: 2em;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #212121;
}
.kopano-card-wrapper.kopano-partner-list .hoverlay .contact-data {
margin-top: 0;
margin-bottom: auto;
}
.kopano-card-wrapper.kopano-partner-list .hoverlay .contact-data a {
display: flex;
align-items: center;
justify-content: center;
padding: 0.25em 0;
width: 100%;
}
.kopano-card-wrapper.kopano-partner-list .hoverlay .contact-data a > span {
display: flex;
align-items: center;
}
.kopano-card-wrapper.kopano-partner-list .hoverlay .contact-data a svg {
display: inline-block;
}
.kopano-card-wrapper.kopano-partner-list .hoverlay .contact-data a .text {
display: inline-block;
margin-left: 1.125em;
text-align: center;
font-style: normal;
font-weight: normal;
font-size: 0.875em;
line-height: 1.7em;
color: #616161;
}
.kopano-card-wrapper.kopano-partner-list .hoverlay .contact-data a .text.underline {
text-decoration: underline;
}
@media (hover: none) {
.kopano-card-wrapper.kopano-partner-list .hoverlay {
opacity: 1;
display: block;
position: relative;
}
.kopano-card-wrapper.kopano-partner-list .hoverlay h4,
.kopano-card-wrapper.kopano-partner-list .hoverlay .contact-name,
.kopano-card-wrapper.kopano-partner-list .hoverlay .contact-data a .text {
display: none;
}
.kopano-card-wrapper.kopano-partner-list .hoverlay .contact-data {
display: flex;
flex-direction: row;
}
.kopano-card-wrapper.kopano-partner-list .hoverlay .contact-data a,
.kopano-card-wrapper.kopano-partner-list .hoverlay .contact-data a > span {
display: inline-block;
width: unset;
padding: 0 0.25em;
}
.kopano-card-wrapper.kopano-partner-list .hoverlay .contact-data a:first-child {
margin-left: auto;
}
.kopano-card-wrapper.kopano-partner-list .hoverlay .contact-data a:last-child {
margin-right: auto;
}
}
@media all and (min-width: 640px) {
.kopano-card-wrapper.kopano-partner-list {
grid-template-columns: repeat(2, 1fr);
}
.kopano-card-wrapper.kopano-partner-list .kopano-card {
font-size: 2.5vw;
}
}
@media all and (min-width: 768px) {
.kopano-card-wrapper.kopano-partner-list .kopano-card {
font-size: 1.5vw;
}
}
@media all and (min-width: 1024px) {
.kopano-card-wrapper.kopano-partner-list {
grid-template-columns: repeat(3, 1fr);
}
.kopano-card-wrapper.kopano-partner-list .kopano-card {
font-size: 1.25vw;
}
}
@media all and (min-width: 1280px) {
.kopano-card-wrapper.kopano-partner-list {
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 40px;
grid-row-gap: 32px;
margin-bottom: 32px;
}
.kopano-card-wrapper.kopano-partner-list .kopano-card {
font-size: 16px;
}
}
/* -------------------------------------------------------------------------
Search & Filter results: Extensions
------------------------------------------------------------------------- */
.kopano-card-wrapper.kopano-extension-list {
grid-template-columns: 1fr;
grid-column-gap: 3.125vw;
grid-row-gap: 2.5vw;
margin-bottom: 2.5vw;
}
/* intended to be a responsive square */
.kopano-card-wrapper.kopano-extension-list .kopano-card {
position: relative;
font-size: 4vw;
}
.kopano-card-wrapper.kopano-extension-list .kopano-card:before {
content: "";
display: block;
padding-top: 90%;
}
.kopano-card-wrapper.kopano-extension-list .image {
display: flex;
position: absolute;
top: 1.5em;
left: 1.5em;
right: 1.5em;
height: 60%;
width: auto;
justify-content: center;
margin: 0;
}
.kopano-card-wrapper.kopano-extension-list .image img {
max-height: 100%;
max-width: 100%;
min-height: unset;
min-width: unset;
width: auto;
height: auto;
object-fit: contain;
align-self: center;
}
.kopano-card-wrapper.kopano-extension-list h4 {
position: absolute;
bottom: 1.5em;
left: 1.5em;
right: 1.5em;
margin: 0;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
text-align: center;
color: #616161;
}
.kopano-card-wrapper.kopano-extension-list .highlights {
position: absolute;
top: 0.75em;
right: 0;
margin: 0;
}
.kopano-card-wrapper.kopano-extension-list .highlights img {
width: 5.3125em;
height: 1.5em;
}
.kopano-card-wrapper.kopano-extension-list .hoverlay {
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #212121;
}
@media all and (min-width: 640px) {
.kopano-card-wrapper.kopano-extension-list {
grid-template-columns: repeat(2, 1fr);
}
.kopano-card-wrapper.kopano-extension-list .kopano-card {
font-size: 2.5vw;
}
}
@media all and (min-width: 768px) {
.kopano-card-wrapper.kopano-extension-list .kopano-card {
font-size: 1.5vw;
}
}
@media all and (min-width: 1024px) {
.kopano-card-wrapper.kopano-extension-list {
grid-template-columns: repeat(3, 1fr);
}
.kopano-card-wrapper.kopano-extension-list .kopano-card {
font-size: 1.25vw;
}
}
@media all and (min-width: 1280px) {
.kopano-card-wrapper.kopano-extension-list {
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 40px;
grid-row-gap: 32px;
margin-bottom: 32px;
}
.kopano-card-wrapper.kopano-extension-list .kopano-card {
font-size: 16px;
}
}
/* -------------------------------------------------------------------------
Pricing pages
------------------------------------------------------------------------- */
.kopano-pricing-billing-wrapper {
font-size: 4vw;
line-height: 1.5em;
}
.kopano-pricing-billing {
display: block;
float: none;
margin-right: 0;
margin-bottom: 2.35vw;
}
.kopano-pricing-billing a.button {
display: block;
height: unset;
width: unset;
min-width: unset;
box-sizing: border-box;
padding: 0.5em 2em;
margin: 0;
border-radius: 1.25em;
border: 1px solid #00B3F0;
font-size: 1em;
line-height: 1.5em;
font-weight: 400;
background-color: #00B3F0;
color: #FFFFFF;
}
.kopano-pricing-billing a.button-light {
border: 1px solid #616161;
background-color: #FFFFFF;
color: #616161;
}
.kopano-pricing-billing .button svg {
fill: #FFFFFF;
}
.kopano-pricing-billing .button-light svg {
fill: #616161;
}
.kopano-pricing-billing span {
text-align: center;
display: block;
margin-top: 4px;
font-style: normal;
font-weight: normal;
font-size: 0.875em;
line-height: 1.7em;
color: #14A9E7;
}
.kopano-pricing-billing .button-light + span {
color: #757575;
}
@media all and (min-width: 640px) {
.kopano-pricing-billing-wrapper {
font-size: 2.5vw;
}
.kopano-pricing-billing {
float: left;
margin-right: 2.35vw;
margin-bottom: 0;
}
}
@media all and (min-width: 768px) {
.kopano-pricing-billing-wrapper {
font-size: 1.6vw;
}
}
@media all and (min-width: 1024px) {
.kopano-pricing-billing-wrapper {
font-size: 1.25vw;
}
}
@media all and (min-width: 1280px) {
.kopano-pricing-billing-wrapper {
font-size: 16px;
}
.kopano-pricing-billing {
margin-right: 30px;
}
}
/* ------------------------------------------------------------------------- */
.kopano-page-pricing {
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 0;
grid-row-gap: 5.2vw;
margin-top: -12vw !important;
font-size: 4vw;
}
.kopano-page-pricing .left.product {
grid-column-start: 1;
grid-row-start: 1;
}
.kopano-page-pricing .center.product {
grid-column-start: 1;
grid-row-start: 3;
}
.kopano-page-pricing .right.product {
grid-column-start: 1;
grid-row-start: 5;
}
.kopano-page-pricing .left.options {
grid-column-start: 1;
grid-row-start: 2;
}
.kopano-page-pricing .center.options {
grid-column-start: 1;
grid-row-start: 4;
}
.kopano-page-pricing .right.options {
grid-column-start: 1;
grid-row-start: 6;
}
.kopano-page-pricing > div {
width: 100%;
}
.kopano-page-pricing .product {
border: 1px solid #E0E0E0;
border-radius: 0.5em;
overflow: hidden;
}
.kopano-page-pricing .product#recommended {
border: 1px solid #00B3F0;
}
/* Header with Edition + Icon */
.kopano-page-pricing .product .pricing-header {
background: #F5F5F5;
display: block;
align-items: center;
text-align: center;
color: #424242;
font-style: normal;
font-weight: 500;
margin-bottom: 0;
}
.kopano-page-pricing .product#recommended .pricing-header {
background: #00B3F0;
color: #FFFFFF;
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/icon-banner-recommended.svg);
background-position: right top;
background-repeat: no-repeat;
background-size: 25vw 17.75vw;
}
.kopano-page-pricing .product .pricing-header p {
font-size: 1.5em;
line-height: 1.5em;
padding-top: 5vw;
padding-bottom: 6vw;
}
/* the price + billing-period */
.kopano-page-pricing .pricing-price {
text-align: center;
padding: 6vw 0;
margin: 0;
}
/* add EURO-sign before the price */
.kopano-page-pricing .pricing-price .pricing-euro:before {
content: '\20AC';
}
.kopano-page-pricing .pricing-price .pricing {
display: block;
font-style: normal;
font-weight: normal;
color: #424242;
}
.kopano-page-pricing .pricing-price .pricing .pricing-euro {
font-size: 3em;
line-height: 1.33em;
}
.kopano-page-pricing .pricing-price .pricing .pricing-cent {
font-size: 1.5em;
line-height: 1.5em;
vertical-align: top;
}
.kopano-page-pricing .pricing-price .pricing-note {
display: block;
text-align: center;
margin-bottom: 8.5vw;
font-style: normal;
font-weight: normal;
font-size: 1.25em;
line-height: 1.5em;
color: #616161;
}
.kopano-page-pricing .pricing-price .pricing-note img {
height: 1em;
width: 1em;
}
/* Tooltip about discounts */
.kopano-page-pricing .pricing-price .tooltip {
opacity: 0;
width: 100%;
padding: 3.75vw;
position: absolute;
z-index: 1;
top: 50vw;
background: #FAFAFA;
border-radius: 0.5em;
border: 1px solid #BDBDBD;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #424242;
text-align: left;
}
.kopano-page-pricing .pricing-price .tooltip strong {
font-weight: 700;
}
.kopano-page-pricing .pricing-price .tooltip::after {
content: "";
position: absolute;
bottom: 100%;
right: calc(50% - 18.75vw);
margin-left: -2.5vw;
border-width: 2.5vw;
border-style: solid;
border-color: transparent transparent #BDBDBD transparent;
}
.kopano-page-pricing .pricing-price {
pointer-events: none;
}
.kopano-page-pricing .pricing-price img.show-tooltip {
pointer-events: auto;
}
.kopano-page-pricing .product.left .pricing-price:hover .tooltip,
.kopano-page-pricing .product.center .pricing-price:hover .tooltip,
.kopano-page-pricing .product.right .pricing-price:hover .tooltip {
opacity: 1;
-webkit-transition: var(--kopano-transition-time) ease-in-out;
-moz-transition: var(--kopano-transition-time) ease-in-out;
-o-transition: var(--kopano-transition-time) ease-in-out;
transition: var(--kopano-transition-time) ease-in-out;
}
/* info: what's included in the edition */
.kopano-page-pricing .pricing-price .pricing-info-outside {
display: flex;
align-items: center;
}
.kopano-page-pricing .pricing-price .pricing-info {
display: flex;
padding: 0 11.25vw 1.75vw 11.25vw;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #616161;
}
.kopano-page-pricing .pricing-price .pricing-info > img {
width: 1em;
height: 1em;
margin-right: 4vw;
}
/* features of the edition */
.kopano-page-pricing .pricing-features {
border-top: 1px solid #E0E0E0;
padding-top: 6vw;
padding-bottom: 30.5vw;
}
.kopano-page-pricing .pricing-features li {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.00014 16.1703L5.53014 12.7003C5.14014 12.3103 4.51014 12.3103 4.12014 12.7003C3.73014 13.0903 3.73014 13.7203 4.12014 14.1103L8.30014 18.2903C8.69014 18.6803 9.32014 18.6803 9.71014 18.2903L20.2901 7.71031C20.6801 7.32031 20.6801 6.69031 20.2901 6.30031C19.9001 5.91031 19.2701 5.91031 18.8801 6.30031L9.00014 16.1703Z' fill='%238CC540'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 0 0.375em;
background-size: 1.5em 1.5em;
margin: 0 11.25vw;
padding: 0.375em 0;
padding-left: 9vw;
display: block;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #616161;
}
/* action links */
.kopano-page-pricing .pricing-action {
position: absolute;
bottom: 0;
right: 0;
left: 0;
text-align: center;
margin-bottom: 10vw;
}
.kopano-page-pricing .pricing-action .button-light,
.kopano-page-pricing .pricing-action .button {
height: unset;
margin: 0 0 3vw 0;
padding: 2.25vw 6vw 2.5vw 6vw;
font-size: 0.875em;
line-height: 1.5em;
}
.kopano-page-pricing a.add-to-cart {
display: block;
color: #00B3F0;
font-weight: 300;
font-size: 0.875em;
line-height: 1.5em;
}
/* additional options to be added per product */
.kopano-page-pricing .options .pricing-header,
.kopano-page-pricing .options .pricing-optional {
margin: 0;
padding: 0 11.25vw;
}
.kopano-page-pricing .options .pricing-header p {
font-style: normal;
font-weight: bold;
font-size: 1.25em;
line-height: 1.5em;
color: #424242;
}
.kopano-page-pricing .options .pricing-optional {
padding-top: 6vw;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #616161;
}
.kopano-page-pricing .options .pricing-optional li {
background: none;
padding: 8px 0;
line-height: 1.5em;
}
.kopano-page-pricing .options .pricing-optional li > ul > li {
padding: 0;
color: #BDBDBD;
}
@media all and (min-width: 640px) {
}
@media all and (min-width: 768px) {
.kopano-page-pricing {
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 3.9vw;
grid-row-gap: 3.125vw;
margin-top: -5vw !important;
font-size: 1.6vw;
}
.kopano-page-pricing .left.product {
grid-column-start: 1;
grid-row-start: 1;
}
.kopano-page-pricing .center.product {
grid-column-start: 1;
grid-row-start: 2;
}
.kopano-page-pricing .right.product {
grid-column-start: 1;
grid-row-start: 3;
}
.kopano-page-pricing .left.options {
grid-column-start: 2;
grid-row-start: 1;
}
.kopano-page-pricing .center.options {
grid-column-start: 2;
grid-row-start: 2;
}
.kopano-page-pricing .right.options {
grid-column-start: 2;
grid-row-start: 3;
}
.kopano-page-pricing .product#recommended .pricing-header {
background-size: 7.9vw 5.55vw;
}
.kopano-page-pricing .product .pricing-header p {
padding-top: 1.5625vw;
padding-bottom: 1.875vw;
}
.kopano-page-pricing .pricing-price {
padding: 1.875vw 0;
}
.kopano-page-pricing .pricing-price .pricing-note {
margin-bottom: 2.65vw;
}
.kopano-page-pricing .pricing-price .tooltip {
padding: 1.17vw;
top: 15.625vw;
}
.kopano-page-pricing .pricing-price .tooltip::after {
right: calc(50% - 5.85vw);
margin-left: -0.78vw;
border-width: 0.78vw;
}
.kopano-page-pricing .pricing-price .pricing-info {
padding: 0 3.5vw 0.55vw 3.5vw;
}
.kopano-page-pricing .pricing-price .pricing-info > img {
margin-right: 1.25vw;
}
.kopano-page-pricing .pricing-features {
padding-top: 1.875vw;
padding-bottom: 9.55vw;
}
.kopano-page-pricing .pricing-features li {
margin: 0 3.5vw;
padding-left: 2.8vw;
}
.kopano-page-pricing .pricing-action {
margin-bottom: 3.125vw;
}
.kopano-page-pricing .pricing-action .button-light,
.kopano-page-pricing .pricing-action .button {
margin: 0 0 0.95vw 0;
padding: 0.7vw 1.875vw 0.78vw 1.875vw;
}
.kopano-page-pricing .options {
align-self: end;
}
.kopano-page-pricing .options .pricing-header,
.kopano-page-pricing .options .pricing-optional {
padding: 0 3.5vw;
}
.kopano-page-pricing .options .pricing-optional {
padding-top: 1.875vw;
}
.kopano-page-pricing .options .pricing-optional li {
padding: 0.625vw 0;
}
}
@media all and (min-width: 1024px) {
.kopano-page-pricing {
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 3.9vw;
grid-row-gap: 3.125vw;
font-size: 1.25vw;
}
.kopano-page-pricing .left.product {
grid-column-start: 1;
grid-row-start: 1;
}
.kopano-page-pricing .center.product {
grid-column-start: 2;
grid-row-start: 1;
}
.kopano-page-pricing .right.product {
grid-column-start: 3;
grid-row-start: 1;
}
.kopano-page-pricing .left.options {
grid-column-start: 1;
grid-row-start: 2;
}
.kopano-page-pricing .center.options {
grid-column-start: 2;
grid-row-start: 2;
}
.kopano-page-pricing .right.options {
grid-column-start: 3;
grid-row-start: 2;
}
.kopano-page-pricing .product#recommended .pricing-header {
background-size: 7.9vw 5.55vw;
}
.kopano-page-pricing .product .pricing-header p {
padding-top: 1.5625vw;
padding-bottom: 1.875vw;
}
.kopano-page-pricing .pricing-price {
padding: 1.875vw 0;
}
.kopano-page-pricing .pricing-price .pricing-note {
margin-bottom: 2.65vw;
}
.kopano-page-pricing .pricing-price .tooltip {
padding: 1.17vw;
top: 15.625vw;
}
.kopano-page-pricing .pricing-price .tooltip::after {
right: calc(50% - 5.85vw);
margin-left: -0.78vw;
border-width: 0.78vw;
}
.kopano-page-pricing .pricing-price .pricing-info {
padding: 0 3.5vw 0.55vw 3.5vw;
}
.kopano-page-pricing .pricing-price .pricing-info > img {
margin-right: 1.25vw;
}
.kopano-page-pricing .pricing-features {
padding-top: 1.875vw;
padding-bottom: 9.55vw;
}
.kopano-page-pricing .pricing-features li {
margin: 0 3.5vw;
padding-left: 2.8vw;
}
.kopano-page-pricing .pricing-action {
margin-bottom: 3.125vw;
}
.kopano-page-pricing .pricing-action .button-light,
.kopano-page-pricing .pricing-action .button {
margin: 0 0 0.95vw 0;
padding: 0.7vw 1.875vw 0.78vw 1.875vw;
}
.kopano-page-pricing .options {
align-self: unset;
}
.kopano-page-pricing .options.center {
border-left: 1px solid #E0E0E0;
border-right: 1px solid #E0E0E0;
width: calc(100% + 3.9vw);
margin: 0 -1.95vw;
padding: 0 1.875vw;
}
.kopano-page-pricing .options .pricing-header,
.kopano-page-pricing .options .pricing-optional {
padding: 0 3.5vw;
}
.kopano-page-pricing .options .pricing-optional {
padding-top: 1.875vw;
}
.kopano-page-pricing .options .pricing-optional li {
padding: 0.625vw 0;
}
}
@media all and (min-width: 1280px) {
.kopano-page-pricing {
grid-column-gap: 50px;
grid-row-gap: 40px;
font-size: 16px;
margin-top: -64px !important;
}
.kopano-page-pricing .product#recommended .pricing-header {
background-size: 101px 71px;
}
.kopano-page-pricing .product .pricing-header p {
padding-top: 20px;
padding-bottom: 24px;
}
.kopano-page-pricing .pricing-price {
padding: 24px 0;
}
.kopano-page-pricing .pricing-price .pricing-note {
margin-bottom: 34px;
}
.kopano-page-pricing .pricing-price .tooltip {
padding: 15px;
top: 200px;
}
.kopano-page-pricing .pricing-price .tooltip::after {
right: calc(50% - 75px);
margin-left: -10px;
border-width: 10px;
}
.kopano-page-pricing .pricing-price .pricing-info {
padding: 0 45px 7px 45px;
}
.kopano-page-pricing .pricing-price .pricing-info > img {
margin-right: 16px;
}
.kopano-page-pricing .pricing-features {
padding-top: 24px;
padding-bottom: 122px;
}
.kopano-page-pricing .pricing-features li {
margin: 0 45px;
padding-left: 36px;
}
.kopano-page-pricing .pricing-action {
margin-bottom:40px;
}
.kopano-page-pricing .pricing-action .button-light,
.kopano-page-pricing .pricing-action .button {
margin: 0 0 12px 0;
padding: 9px 24px 10px 24px;
}
.kopano-page-pricing .options.center {
width: calc(100% + 50px);
margin: 0 -25px;
padding: 0 24px;
}
.kopano-page-pricing .options .pricing-header,
.kopano-page-pricing .options .pricing-optional {
padding: 0 45px;
}
.kopano-page-pricing .options .pricing-optional {
padding-top: 24px;
}
.kopano-page-pricing .options .pricing-optional li {
padding: 8px 0;
}
}
/* Language Switcher ------------------------------------------------------- */
.wpml-ls-legacy-dropdown {
display: block;
float: left;
position: relative;
width: unset;
max-width: none;
}
.wpml-ls-legacy-dropdown > ul {
position: relative;
right: 0;
left: 0;
padding: 0;
margin: 0 !important;
list-style-type: none;
}
.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle {
display: block;
padding: 9px 10px 10px 10px !important;
border: 1px solid #BDBDBD;
border-radius: 0.25em;
}
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
border-top: none;
}
.wpml-ls-link {
background: #FFFFFF !important;
}
.wpml-ls-legacy-dropdown .wpml-ls-item-toggle:after {
display: none !important;
}
.wpml-ls-current-language:hover > a.wpml-ls-item-toggle {
border-radius: 0;
border-bottom: none;
}
.wpml-ls-current-language:hover > a {
background: #FFFFFF !important;
}
.wpml-ls-current-language > a.wpml-ls-item-toggle:hover > img {
box-shadow: var(--kopano-box-shadow);
}
.wpml-ls-link:hover > img {
box-shadow: var(--kopano-box-shadow);
}
/* Search ------------------------------------------------------------------ *
.icon-search {
display: inline-block;
font-size: 16px;
line-height: 16px;
margin: 0 0 0 20px;
padding: 11px 0;
}
}
/* -------------------------------------------------------------------------
Shopping Cart in the menu line
------------------------------------------------------------------------- */
.shopping-cart {
position: relative;
margin: 0 0 0 20px;
min-width: 24px;
min-height: 24px;
line-height: 20px;
}
.shopping-cart .icon {
position: relative;
display: inline-block;
width: 24px;
height: 24px;
line-height: 20px;
vertical-align: text-top;
}
.shopping-cart .item {
position: absolute;
top: 0;
left: 5px;
width: 12px;
height: 12px;
background-color: #00B3F0;
color: #FFFFFF;
font-size: 12px;
line-height: 12px;
text-align: center;
font-weight: 900;
border-radius: 0.375em;
}
/* -------------------------------------------------------------------------
the init-message or JavaScript/Cookie-errors
------------------------------------------------------------------------- */
#kopano-shop-init {
width: 100%;
color: #424242;
text-align: center;
}
/* -------------------------------------------------------------------------
Kopano Shop
------------------------------------------------------------------------- */
h1.webshop {
font-style: normal;
font-weight: 500;
font-size: 2.5em;
line-height: 1.4em;
letter-spacing: 0.015em;
color: #424242;
}
.kopano-header.webshop {
padding-bottom: 0;
margin-bottom: 3.375em;
border: 0;
}
/* ------------------------------------------------------------------------- */
.kopano-shop-step {
display: grid;
grid-template-columns: repeat(5, 16.66vw);
grid-template-rows: 8.33vw;
grid-column-gap: 0;
margin-bottom: 5vw;
font-size: 2.2vw;
line-height: 1.5em;
}
.kopano-shop-step span,
.kopano-shop-step div {
font-size: inherit;
line-height: inherit;
}
.kopano-shop-step > div {
position: relative;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% 50%;
}
.kopano-shop-step .done {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 16H160' stroke='%2300B3F0' stroke-dasharray='2 2'/%3E%3Ccircle cx='80' cy='16' r='16' fill='%2300B3F0'/%3E%3C/svg%3E%0A");
}
.kopano-shop-step .active {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 16H80' stroke='%2300B3F0' stroke-dasharray='2 2'/%3E%3Cpath d='M80 16H160' stroke='%23B0BEC5' stroke-dasharray='2 2'/%3E%3Ccircle cx='80' cy='16' r='16' fill='%2300B3F0'/%3E%3C/svg%3E%0A");
}
.kopano-shop-step .coming {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 16H160' stroke='%23B0BEC5' stroke-dasharray='2 2'/%3E%3Ccircle cx='80' cy='16' r='16' fill='%23BDBDBD'/%3E%3C/svg%3E%0A");
}
.kopano-shop-step span.step {
position: absolute;
top: 0;
left: 0;
width: 100%;
font-size: 1.4em;
line-height: 1.5em;
text-align: center;
color: #FFFFFF;
}
.kopano-shop-step .done span.step {
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.00063 16.1703L5.53063 12.7003C5.14063 12.3103 4.51063 12.3103 4.12062 12.7003C3.73063 13.0903 3.73063 13.7203 4.12062 14.1103L8.30063 18.2903C8.69063 18.6803 9.32063 18.6803 9.71063 18.2903L20.2906 7.71031C20.6806 7.32031 20.6806 6.69031 20.2906 6.30031C19.9006 5.91031 19.2706 5.91031 18.8806 6.30031L9.00063 16.1703Z' fill='white'/%3E%3C/svg%3E%0A");
width: 1em;
height: 1em;
margin-top: 0.2em;
left: calc(50% - 0.5em);
}
.kopano-shop-step span.text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
color: #616161;
}
.kopano-shop-step .coming span.text {
color: #9E9E9E;
}
@media all and (min-width: 640px) {
.kopano-shop-step {
font-size: 1.8vw;
line-height: 1.5em;
}
}
@media all and (min-width: 768px) {
.kopano-shop-step {
grid-template-columns: repeat(5, 12.7vw);
grid-template-rows: 6.35vw;
font-size: 1.4vw;
line-height: 1.5em;
}
}
@media all and (min-width: 1024px) {
.kopano-shop-step {
grid-template-columns: repeat(5, 10vw);
grid-template-rows: 5vw;
font-size: 1.1vw;
line-height: 1.5em;
}
}
@media all and (min-width: 1280px) {
.kopano-shop-step {
grid-template-columns: repeat(5, 128px);
grid-template-rows: 64px;
margin-bottom: 64px;
font-size: 14px;
line-height: 20px;
}
}
/* -------------------------------------------------------------------------
Shopping cart
------------------------------------------------------------------------- */
.kopano-shop {
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 2.4vw;
grid-row-gap: 2.4vw;
font-size: 4vw;
line-height: 1.5em;
}
.kopano-shopping-cart {
position: relative;
display: grid;
grid-template-columns: 1fr 2em;
grid-column-gap: 0;
grid-row-gap: 2.4vw;
border-radius: 0;
border: none;
border-bottom: 1px solid #BDBDBD;
padding-top: 3.5vw;
padding-bottom: 3.5vw;
}
.kopano-shopping-cart:hover {
box-shadow: unset;
border: none;
border-bottom: 1px solid #BDBDBD;
}
.kopano-shopping-cart:first-child {
border-top: 1px solid #BDBDBD;
}
.kopano-shopping-cart .kopano-shop-image,
.kopano-shopping-cart .kopano-shop-extension-image {
display: none;
position: relative;
width: 100%;
}
.kopano-shopping-cart .kopano-shop-extension-image {
min-height: 11vw;
}
.kopano-shopping-cart .kopano-shop-image img,
.kopano-shopping-cart .kopano-shop-extension-image img {
position: absolute;
max-width: 100%;
max-height: 100%;
top: 0;
right: 0;
}
.kopano-shopping-cart .kopano-shop-extension-image img {
max-width: 50%;
right: 6%; /* img is 500/440 = 12 % -> 6% */
}
.kopano-shopping-cart .kopano-shop-productname {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.kopano-shopping-cart .kopano-shop-productowner {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
.kopano-shopping-cart .kopano-shop-prices,
.kopano-shopping-cart .kopano-shop-extension-prices {
grid-column-start: 1;
grid-column-end: 3;
}
.kopano-shopping-cart .kopano-shop-remove {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.kopano-shopping-cart .kopano-shopping-cart-overlay {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.1);
display: none; /* visible: flex */
align-items: center;
justify-content: center;
}
.kopano-shopping-cart .kopano-shopping-cart-overlay img {
width: 50px;
height: 50px;
}
.kopano-shop span,
.kopano-shop div {
font-size: inherit;
line-height: inherit;
}
.kopano-shop-productname {
margin-bottom: 1em;
font-size: 1.25em;
font-style: normal;
font-weight: 500;
line-height: 1.5em;
color: #000000;
}
.kopano-shop-remove,
.kopano-shop-extension-remove,
.kopano-shop-extension-prices,
.kopano-shop-prices {
width: 100%;
display: flex;
justify-content: flex-end;
}
.kopano-shop-productowner > div,
.kopano-shop-extension-prices > div,
.kopano-shop-prices > div {
align-self: flex-end;
width: unset;
display: grid;
grid-template-columns: 5em auto;
grid-column-gap: 0;
}
.kopano-shop-productowner div,
.kopano-shop-extension-prices div,
.kopano-shop-prices div {
align-items: center;
padding-top: 2px;
padding-bottom: 2px;
font-style: normal;
font-weight: normal;
font-size: 0.875em;
line-height: 1.5em;
color: #757575;
}
.kopano-shop-extension-image.margin,
.kopano-shop-extension-name.margin {
grid-row-end: span 2;
}
.valuecheck.margin,
.kopano-shop-extension-image.margin,
.kopano-shop-extension-name.margin,
.kopano-shop-extension-remove.margin {
margin-top: 4.8vw;
}
.kopano-shop-extension-name a.button-light {
margin-top: 1em;
margin-left: 0;
}
.kopano-shop-productowner .details {
grid-column-start: 1;
grid-column-end: 3;
}
.kopano-shop-productowner .address {
align-items: flex-start;
align-self: self-start;
}
.kopano-shop-extension-prices .value input,
.kopano-shop-prices .value input {
width: 5em;
padding: 8px;
background: #FFFFFF;
border: 1px solid #00B3F0;
box-sizing: border-box;
border-radius: 0.25em;
text-align: center;
font-size: 1.15em;
line-height: 1.5em;
}
.kopano-shop-extension-prices .value,
.kopano-shop-prices .value {
color: #212121;
}
.kopano-shop-extension-prices .total,
.kopano-shop-prices .total {
white-space: nowrap;
font-size: 1.15em;
line-height: 1.5em;
font-weight: 500;
}
.kopano-shop-productowner span,
.kopano-shop-extension-prices span,
.kopano-shop-prices span {
font-size: 1em;
line-height: 1.5em;
}
.kopano-shop-extension-name .button {
font-size: 0.875em !important;
line-height: 1em !important;
padding: 1em !important;
text-align: left;
min-width: fit-content !important;
max-width: fit-content !important;
width: fit-content !important;
}
.kopano-shop-extension-name .button:before {
content: '';
background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M13 8H8V13C8 13.55 7.55 14 7 14C6.45 14 6 13.55 6 13V8H1C0.45 8 0 7.55 0 7C0 6.45 0.45 6 1 6H6V1C6 0.45 6.45 0 7 0C7.55 0 8 0.45 8 1V6H13C13.55 6 14 6.45 14 7C14 7.55 13.55 8 13 8Z" fill="%2300B3F0"/%3E%3C/svg%3E%0A');
background-position: 0 0;
background-size: 0.875em 0.875em;
background-repeat: no-repeat;
float: left;
width: 0.875em;
height: 0.875em;
margin-right: 0.875em;
}
.kopano-shop-cart-summary {
background: #F5F5F5;
border-radius: 0.5em;
padding: 1.5em;
}
.kopano-shop-cart-summary h4 {
font-weight: 500;
font-size: 1.25em;
line-height: 1.5em;
padding-bottom: 1em;
border-bottom: 1px solid #757575;
}
.kopano-shop-cart-summary .kopano-shop-sum {
display: grid;
grid-template-columns: 5em 1fr;
grid-column-gap: 0;
width: 100%;
margin-top: 1.5em;
}
.kopano-shop-cart-summary .kopano-shop-sum div {
padding-top: 0.5em;
padding-bottom: 0.5em;
color: #616161;
font-size: 1em;
line-height: 1.5em;
}
.kopano-shop-cart-summary .kopano-shop-sum .value {
text-align: right;
}
.kopano-shop-cart-summary .kopano-shop-sum .total {
font-weight: 500;
font-size: 1.25em;
line-height: 1.5em;
color: #424242;
}
.kopano-shop-cart-summary .kopano-shop-action {
margin-top: 2em;
}
.kopano-shop-cart-summary .kopano-shop-action .button {
box-sizing: border-box;
width: 100%;
max-width: unset;
min-width: unset;
margin: 0;
font-size: 0.875em;
line-height: 1.5em;
}
.kopano-shop.check {
grid-template-columns: 1fr;
grid-column-gap: 2.4vh;
grid-row-gap: 0;
}
.kopano-shop.check .kopano-shopping-cart {
grid-template-columns: repeat(3, 1fr);
box-sizing: border-box;
grid-column-gap: 0;
padding: 1.5em;
border: none;
}
.kopano-shop.check > .kopano-shopping-cart {
border-bottom: 1px solid #424242;
}
.kopano-shop.check .kopano-shopping-cart .kopano-shop-productname {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.kopano-shop.check .kopano-shopping-cart .kopano-shop-productowner {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
.kopano-shop.check .kopano-shopping-cart .kopano-shop-extension-name {
grid-column-end: span 3;
}
.kopano-shop.check .valuecheck {
text-align: right;
align-items: center;
padding-top: 2px;
padding-bottom: 2px;
font-style: normal;
font-weight: normal;
font-size: 0.875em;
line-height: 1.5em;
color: #212121;
}
.kopano-shop.check .keycheck {
float: right;
width: 100%;
padding-bottom: 0;
margin-bottom: 0;
font-style: normal;
font-weight: normal;
font-size: 0.875em;
line-height: 1.5em;
color: #757575;
}
.kopano-shop.check .title.left {
text-align: left !important;
}
.kopano-shop.check .title {
display: none;
font-style: normal;
font-weight: normal;
font-size: 0.875em;
line-height: 1.5em;
color: #757575;
}
@media all and (min-width: 640px) {
.kopano-shop {
grid-template-columns: 1fr;
grid-column-gap: 2.4vw;
grid-row-gap: 2.4vw;
font-size: 2.5vw;
line-height: 1.5em;
}
.kopano-shopping-cart {
grid-template-columns: auto auto;
grid-column-gap: 0;
padding-top: 3.5vw;
padding-bottom: 3.5vw;
}
.kopano-shopping-cart .kopano-shop-productname {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.kopano-shopping-cart .kopano-shop-productowner {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
.kopano-shopping-cart .kopano-shop-prices {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
.kopano-shopping-cart .kopano-shop-remove {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.kopano-shop.check .kopano-shopping-cart {
grid-template-columns: 5fr repeat(3, 2fr);
}
.kopano-shop.check .kopano-shopping-cart .kopano-shop-productname {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.kopano-shop.check .kopano-shopping-cart .kopano-shop-productowner {
grid-column-end: 5;
}
.kopano-shop.check .kopano-shopping-cart .kopano-shop-extension-name {
grid-column-end: unset;
}
.kopano-shop.check .keycheck {
display: none;
}
.kopano-shop.check .title {
display: block;
text-align: right;
}
}
@media all and (min-width: 768px) {
.kopano-shop {
grid-template-columns: 1fr 29vw;
grid-column-gap: 2.4vw;
font-size: 2vw;
line-height: 1.5em;
}
.kopano-shopping-cart {
padding-top: 3.5vw;
padding-bottom: 3.5vw;
}
.kopano-shopping-cart {
grid-template-columns: auto auto;
grid-column-gap: 2.4vw;
grid-row-gap: 0;
padding-top: 3.5vw;
padding-bottom: 3.5vw;
}
.kopano-shopping-cart .kopano-shop-image {
display: block;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.kopano-shopping-cart .kopano-shop-productname {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
.kopano-shopping-cart .kopano-shop-productowner {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
}
.kopano-shopping-cart .kopano-shop-prices {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
}
.kopano-shopping-cart .kopano-shop-remove {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
.kopano-shopping-cart .kopano-shop-extension-remove {
grid-column-start: 2;
grid-column-end: 3;
}
.kopano-shopping-cart .kopano-shop-extension-name {
grid-column-start: 1;
grid-column-end: 2;
}
.kopano-shop.check .kopano-shopping-cart {
grid-template-columns: 5fr 1fr 2fr 2fr;
}
.kopano-shop.check .kopano-shopping-cart .kopano-shop-productname {
grid-column-start: 2;
grid-column-end: 3;
}
.kopano-shop.check .kopano-shop-cart-summary {
background-color: #FFFFFF;
width: 15em;
float: right;
}
.kopano-shop.check .kopano-shopping-cart .kopano-shop-image {
display: none;
}
.kopano-shop.check .kopano-shopping-cart .kopano-shop-productname {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
}
@media all and (min-width: 1024px) {
.kopano-shop {
grid-template-columns: 1fr 22.65vw;
grid-column-gap: 2.4vw;
font-size: 1.6vw;
line-height: 1.5em;
}
.kopano-shopping-cart {
grid-template-columns: 2fr 5fr auto 1fr;
grid-column-gap: 2.4vw;
padding-top: 3.5vw;
padding-bottom: 3.5vw;
}
.kopano-shopping-cart .kopano-shop-image {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
}
.kopano-shopping-cart .kopano-shop-productname {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.kopano-shopping-cart .kopano-shop-productowner {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
.kopano-shopping-cart .kopano-shop-prices {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
.kopano-shopping-cart .kopano-shop-remove {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 2;
}
.kopano-shopping-cart .kopano-shop-extension-image {
display: block;
grid-column-start: 1;
grid-column-end: 2;
}
.kopano-shopping-cart .kopano-shop-extension-name {
grid-column-start: 2;
grid-column-end: 3;
}
.kopano-shopping-cart .kopano-shop-extension-remove {
grid-column-start: 4;
grid-column-end: 5;
}
.kopano-shopping-cart .kopano-shop-extension-prices {
grid-column-start: 3;
grid-column-end: 4;
}
.kopano-shop.check .kopano-shopping-cart {
grid-template-columns: 2fr 5fr 1fr 2fr 2fr;
grid-column-gap: 2.4vw;
}
.kopano-shop.check .left {
grid-column-start: 1;
grid-column-end: 3;
}
.kopano-shop.check .kopano-shopping-cart .kopano-shop-image {
display: block;
}
.kopano-shop.check .kopano-shopping-cart .kopano-shop-productname {
grid-column-start: 2;
grid-column-end: 3;
}
.kopano-shop.check .kopano-shopping-cart .kopano-shop-productowner {
grid-column-start: 2;
grid-column-end: 3;
}
.kopano-shop.check .kopano-shop-cart-summary {
background-color: #FFFFFF;
width: 15em;
float: right;
}
}
@media all and (min-width: 1280px) {
.kopano-shop {
grid-template-columns: 1fr 290px;
grid-column-gap: 30px;
font-size: 16px;
line-height: 24px;
}
.kopano-shopping-cart .valuecheck.margin,
.kopano-shopping-cart .kopano-shop-extension-image,
.kopano-shopping-cart .kopano-shop-extension-name.margin,
.kopano-shopping-cart .kopano-shop-extension-remove.margin {
margin-top: 60px;
}
.kopano-shopping-cart {
padding-top: 44px;
padding-bottom: 44px;
}
.kopano-shopping-cart .kopano-shop-extension-image {
min-height: 85px;
}
}
/* -------------------------------------------------------------------------
Shop: enter details
------------------------------------------------------------------------- */
.kopano-shop-details {
display: grid;
grid-template-columns: 1fr;
grid-row-gap: 2.4vw;
font-size: 4vw;
line-height: 1.5em;
}
.kopano-shop-details div,
.kopano-shop-details span,
.kopano-shop-details label {
font-size: inherit;
line-height: inherit;
}
.kopano-shop-details h4 {
margin-top: 1.4em;
margin-bottom: 1.4em;
font-style: normal;
font-weight: normal;
font-size: 1.75em;
line-height: 1.4em;
letter-spacing: 0.015em;
color: #424242;
}
.kopano-shop-details .zip {
float: left;
width: 6em;
}
.kopano-shop-details .city {
float: right;
width: calc(100% - 7.5em);
}
.kopano-shop-details .hint {
font-style: normal;
font-weight: normal;
font-size: 0.75em;
line-height: 1.5em;
color: #757575;
}
.kopano-shop-details .kopano-details-email {
align-self: end;
}
.kopano-shop-details-action {
box-sizing: border-box;
margin-top: 6em;
width: 100%;
text-align: center;
}
.kopano-shop-details-action .button {
width: unset !important;
min-width: unset !important;
max-width: unset !important;
white-space: break-spaces;
}
@media all and (min-width: 640px) {
.kopano-shop-details-action {
text-align: right;
}
}
@media all and (min-width: 640px) {
.kopano-shop-details-action {
width: 100%;
text-align: right;
}
}
@media all and (min-width: 768px) {
.kopano-shop-details {
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 9.375vw;
font-size: 1.6vw;
line-height: 1.5em;
}
.kopano-shop-details .kopano-details-address {
grid-row-start: 1;
grid-row-end: 3;
}
.kopano-shop-details h4 {
margin-top: 0;
}
}
@media all and (min-width: 1024px) {
.kopano-shop-details {
font-size: 1.25vw;
line-height: 1.5em;
}
}
@media all and (min-width: 1280px) {
.kopano-shop-details {
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 120px;
font-size: 16px;
line-height: 1.5em;
}
}
/* -------------------------------------------------------------------------
Shop: Payment methods
------------------------------------------------------------------------- */
.kopano-shop-payment {
margin-top: 3.375em;
padding-top: 2.6em;
border-top: 1px solid #E0E0E0;
font-size: 4vw;
line-height: 1.5em;
}
.kopano-shop-payment h4 {
margin: 0;
margin-top: 1.4em;
margin-bottom: 1.4em;
font-weight: normal;
font-style: normal;
font-size: 1.75em;
line-height: 1.4em;
color: #424242;
}
.kopano-shop-payment div,
.kopano-shop-payment span,
.kopano-shop-payment label {
font-size: inherit;
line-height: inherit;
}
.kopano-shop-payment fieldset {
border: 0;
}
.kopano-payment-provider-wrapper {
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 2.4vw;
grid-row-gap: 2.4vw;
}
.kopano-payment-provider {
box-sizing: border-box;
border: 1px solid #BDBDBD;
border-radius: 0.5em;
background: #FFFFFF;
margin: 0;
position: relative;
text-align: center;
text-decoration: none;
align-items: center;
overflow: hidden;
opacity: 1;
}
.kopano-payment-provider:before {
content: "";
display: block;
padding-top: 60%;
}
.kopano-payment-provider input {
position: absolute;
left: 1.25em;
top: 1.75em;
margin: 0;
padding: 0;
}
.kopano-payment-provider label {
position: absolute;
left: 1.25em;
top: 1.25em;
right: 1.25em;
bottom: 1.25em;
}
.kopano-payment-provider label > span {
position: absolute;
left: 0;
top: 0;
margin-left: 1.5em;
font-style: normal;
font-weight: normal;
font-size: 1.5em;
line-height: 1.5em;
color: #424242;
}
.kopano-payment-provider label .image {
position: absolute;
left: 0;
top: 2.5em;
right: 0;
bottom: 0;
}
.kopano-payment-provider label .image img {
width: 80%;
max-height: 90%;
}
.kopano-payment-provider label select {
display: none;
position: absolute;
bottom: 0;
left: 0;
border: 1px solid #BDBDBD;
box-sizing: border-box;
box-shadow: inset 0px 1px 8px rgba(0, 0, 0, 0.05);
border-radius: 0.25em;
padding: 0.625em;
margin: 0;
}
.kopano-payment-provider label select,
.kopano-payment-provider label option {
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #212121;
}
.kopano-payment-provider input[type="radio"]:checked+label select {
display: block;
}
.kopano-payment-provider input[type="radio"]:checked+label.has-issuer .image img {
display: none;
}
@media all and (min-width: 640px) {
.kopano-shop-payment{
font-size: 1.6vw;
line-height: 1.5em;
}
.kopano-payment-provider-wrapper {
grid-template-columns: repeat(2,1fr);
grid-column-gap: 2.4vw;
grid-row-gap: 2.4vw;
}
}
@media all and (min-width: 768px) {
.kopano-shop-payment{
font-size: 1.6vw;
line-height: 1.5em;
}
.kopano-payment-provider-wrapper {
grid-template-columns: repeat(3,1fr);
}
.kopano-payment-provider label > span {
font-size: 1.125em;
}
}
@media all and (min-width: 1024px) {
.kopano-shop-payment{
font-size: 1.25vw;
line-height: 1.5em;
}
.kopano-payment-provider-wrapper {
grid-template-columns: repeat(4,1fr);
}
}
@media all and (min-width: 1280px) {
.kopano-shop-payment{
font-size: 16px;
line-height: 1.5em;
}
.kopano-payment-provider-wrapper {
grid-template-columns: repeat(4,1fr);
grid-column-gap: 30px;
grid-row-gap: 30px;
}
}
/* -------------------------------------------------------------------------
------------------------------------------------------------------------- */
.kopano-shop-review {
position: relative;
padding: 30px;
border: 1px solid #BDBDBD;
border-radius: 0.5em;
}
.kopano-shop-review .logo {
position: absolute;
top: 0;
right: 0;
width: 25%;
height: auto;
margin: 30px 30px 0 0;
}
.kopano-shop-review .sender,
.kopano-shop-review .recipient,
.kopano-shop-review .date {
margin-bottom: 3em;
}
.kopano-shop-review h4 {
margin: 0;
font-weight: normal;
font-style: normal;
font-size: 1.75em;
line-height: 1.4em;
color: #424242;
}
.kopano-shop-review-action {
position: relative;
margin: 30px 0 0 0;
width: 100%;
}
.button.kopano-shop-review {
position: absolute;
right: 0;
top: 0;
width: unset !important;
min-width: unset !important;
max-width: unset !important;
margin: 0 !important;
}
/* -------------------------------------------------------------------------
Icons & Colors
------------------------------------------------------------------------- */
.icon-external::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/kopano-icon-external.svg);
}
.icon-cloud::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/kopano-icon-cloud.svg);
}
.icon-groupware::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/kopano-icon-groupware.svg);
}
.icon-one::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/kopano-icon-one.svg);
}
.icon-meet::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/kopano-icon-meet.svg);
}
.icon-join::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/kopano-icon-meet-join.svg);
}
.icon-boost::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/kopano-icon-meet-boost.svg);
}
/*.icon-kraph::before {
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/kopano-icon-kraph.jpg);
}
.icon-intranet::before {
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/kopano-icon-intranet.jpg);
}
.icon-python::before {
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/kopano-icon-python.jpg);
}
.icon-gluejs::before {
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/kopano-icon-gluejs.jpg);
}*/
.icon-webapp::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/WebApp_icon.svg);
}
.icon-deskapp::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/DeskApp_icon.svg);
}
.icon-mobility::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/Mobility_icon.svg);
}
.icon-other-clients::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/KOE_icon.svg);
}
.icon-clients::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/KOE_icon.svg);
}
.icon-infrastructure::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/mail.svg);
}
.icon-standards::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/mail.svg);
}
.icon-mail,
.icon-mail:hover {
color: var(--kopano-blue);
}
.icon-mail::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/mail.svg);
}
.icon-calendar,
.icon-calendar:hover {
color: var(--deep-orange);
}
.icon-calendar::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/calendar.svg);
}
.icon-contacts,
.icon-contacts:hover {
color: var(--deep-purple);
}
.icon-contacts::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/contacts.svg);
}
.icon-tasks,
.icon-tasks:hover {
color: var(--dark-green);
}
.icon-tasks:before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/tasks.svg);
}
/* -------------------------------------------------------------------------
Modal-Dialogs for hubspot-forms and downloads
------------------------------------------------------------------------- *
/* Modal Content *
.kopano-modal-content {
margin: auto;
padding: 20px;
border-radius: 0.625em;
width: minmax(650px, 1100px);
}
/* The Close Button *
.kopano-modal-popup .kopano-modal-content .close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.kopano-modal-popup .kopano-modal-content .close:hover,
.kopano-modal-popup .kopano-modal-content .close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* -------------------------------------------------------------------------
FORMS
------------------------------------------------------------------------- */
.kopano-modal-wrapper {
display: grid;
grid-template-columns: repeat(3,minmax(200px, 350px));
grid-column-gap: 30px;
justify-content: center;
}
.kopano-form {
grid-column-start: 1;
grid-column-end: 3;
}
.kopano-form-info {
grid-column-start: 3;
grid-column-end: 4;
}
.right .kopano-form {
grid-column-start: 1;
grid-column-end: 2;
}
.right .kopano-form-info {
grid-column-start: 2;
grid-column-end: 4;
}
.kopano-form-wrapper {
display: grid;
grid-template-columns: repeat(2,minmax(200px, 350px));
grid-column-gap: 30px;
justify-content: center;
}
.right .kopano-form-wrapper {
grid-template-columns: minmax(200px, 350px);
}
.kopano-form-wrapper input,
.kopano-form-wrapper select,
.kopano-form-checkbox {
margin-bottom: 15px;
}
.kopano-form-info {
border-left: 1px solid #BABABA;
padding-left: 15px;
}
.kopano-form-kopanian {
display: grid;
grid-template-columns: 80px 1fr;
grid-column-gap: 10px;
margin-top: 15px;
}
.kopano-form-kopanian .kopano-form-kopanian-info {
align-self: center;
}
.kopano-form-kopanian .kopano-form-kopanian-info > span {
display: block;
}
.kopano-form-kopanian .kopano-form-kopanian-info > span.name {
}
@media all and (max-width: 1030px) {
.kopano-modal-wrapper {
grid-template-columns: repeat(2,minmax(200px, 350px));
}
.kopano-form-wrapper {
grid-template-columns: minmax(200px, 350px);
}
.kopano-form {
grid-column-start: 1;
grid-column-end: 2;
}
.kopano-form-info {
grid-column-start: 2;
grid-column-end: 3;
}
.right .kopano-form {
grid-column-start: 1;
grid-column-end: 2;
}
.right .kopano-form-info {
grid-column-start: 2;
grid-column-end: 3;
}
}
@media all and (max-width: 768px) {
.kopano-modal-wrapper {
grid-template-columns: minmax(200px, 350px);
}
.kopano-form-wrapper {
grid-template-columns: minmax(200px, 350px);
}
.right .kopano-form,
.kopano-form {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
}
.right .kopano-form-info,
.kopano-form-info {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
border-left: none;
padding-left: none;
margin-bottom: 30px;
}
}
/* -------------------------------------------------------------------------
Downloads
------------------------------------------------------------------------- */
#kopano-downloads > .wpb_wrapper > div,
#kopano-downloads > .wpb_wrapper > p {
max-width: 900px;
}
#kopano-downloads > .wpb_wrapper > .three-columns {
max-width: unset;
}
#kopano-downloads h2 {
margin-top: 2.5em;
margin-bottom: 1.375em;
font-style: normal;
font-weight: 500;
font-size: 2em;
line-height: 1.5em;
letter-spacing: 0.015em;
color: #37474F;
}
#kopano-downloads > .wpb_wrapper > .kopano-megaselector-wrapper {
max-width: unset;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 32px;
}
.kopano-megaselector-wrap {
position: relative;
text-align: center;
text-decoration: none;
align-items: center;
background: #F8FCFF;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border: #188CC8 solid 1px;
}
.kopano-megaselector-wrap:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 30px 30px 0;
border-color: #F8FCFF transparent;
display: block;
width: 0;
z-index: 1;
bottom: -30px;
left: calc(50% - 30px);
}
.kopano-megaselector-wrap:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 31px 31px 0;
border-color: #188CC8 transparent;
display: block;
width: 0;
z-index: 0;
bottom: -31px;
left: calc(50% - 31px);
}
.kopano-megaselector {
position: relative;
text-align: center;
text-decoration: none;
align-items: center;
}
.kopano-megaselector:before {
content: "";
display: block;
padding-top: 60%;
}
.kopano-selector-select .kopano-megaselector-wrap {
background: unset;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
border: #CFD8DC solid 1px;
}
.kopano-selector-select:hover .kopano-megaselector-wrap {
border: transparent solid 1px;
box-shadow: var(--kopano-box-shadow);
}
.kopano-selector-select .kopano-megaselector-wrap:before {
content: none;
}
.kopano-selector-select .kopano-megaselector-wrap:after {
content: none;
}
.kopano-megaselector .content {
display: flex;
justify-content: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0;
min-height: unset;
}
.kopano-megaselector .content > div {
position: relative;
display: flex;
flex-flow: column;
align-self: center;
}
.kopano-megaselector .content img {
width: 1.5em;
height: 1.5em;
align-self: center;
}
.kopano-megaselector .content h3 {
display: none;
align-self: center;
}
#kopano-downloads > .wpb_wrapper > .kopano-selector-wrapper {
max-width: unset;
margin-top: 4em;
margin-bottom: 2.5em;
display: flex;
flex-flow: column;
}
.kopano-selector {
margin-top: 3em;
margin-left: 0;
display: flex;
flex-flow: column;
justify-content: space-between;
}
.kopano-selector h4 {
font-style: normal;
font-weight: bold;
font-size: 1.25em;
line-height: 1.6em;
color: #212121;
}
.kopano-selector p {
font-style: normal;
font-weight: normal;
font-size: 0.875em;
line-height: 1.5em;
letter-spacing: 0.015em;
color: #616161;
}
.kopano-selector > .targets {
margin-top: 2em;
display: flex;
flex-flow: column;
}
.kopano-selector-button {
position: relative;
margin-left: 0;
margin-top: 1em;
}
.kopano-selector-button:first-child {
margin-left: 0;
margin-top: 0;
}
.kopano-selector-button.selected .content {
background: #F8FCFF;
border: 1px solid #188CC8;
}
.kopano-selector-button .content {
display: flex;
justify-content: center;
min-height: unset;
background: #FFFFFF;
border: 1px solid #CFD8DC;
box-sizing: border-box;
border-radius: 0.5em;
padding: 0.5em 1em;
}
.kopano-selector-button:not(.selected) a .content:hover {
border: transparent solid 1px;
box-shadow: var(--kopano-box-shadow);
}
.kopano-selector-button h4 {
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
text-align: center;
letter-spacing: 0.015em;
margin-bottom: 1em;
color: #212121;
}
.kopano-selector-button p {
font-style: normal;
font-weight: normal;
font-size: 0.6875em;
line-height: 1.5em;
text-align: center;
letter-spacing: 0.015em;
color: #757575;
}
.kopano-selector-button .disabled h4,
.kopano-selector-button .disabled p {
color: #CFD8DC;
}
@media all and (min-width: 640px) {
.kopano-megaselector .content img {
width: 2.5em;
height: 2.5em;
}
}
@media all and (min-width: 768px) {
.kopano-megaselector-wrapper {
font-size: 1.2vw !important;
}
.kopano-selector-button .content {
padding: 1.5em 3em;
}
.kopano-selector > .targets {
flex-flow: row;
}
.kopano-selector-button {
position: relative;
margin-left: 2em;
margin-top: 0;
}
.kopano-selector-button:first-child {
margin-left: 0;
margin-top: 0;
}
.kopano-megaselector .content img {
width: 3.5em;
height: 3.5em;
}
.kopano-megaselector .content h3 {
display: block;
margin-top: 1em;
font-style: normal;
font-weight: 500;
font-size: 1.5em;
line-height: 1.33em;
letter-spacing: 0.015em;
color: #37474F;
}
}
@media all and (min-width: 1024px) {
#kopano-downloads > .wpb_wrapper > .kopano-selector-wrapper {
flex-flow: row;
}
.kopano-selector {
margin-top: 0;
margin-left: 5em;
}
.kopano-selector:first-child {
margin-left: 0;
}
}
@media all and (min-width: 1280px) {
.kopano-megaselector-wrapper {
font-size: 16px !important;
}
}
/* -------------------------------------------------------------------------
Papers ... uses .kopano-list-cards
------------------------------------------------------------------------- */
.kopano-list-cards {
grid-template-columns: minmax(210px, 512px);
}
.kopano-list-cards .image {
height: 50.7vw;
}
.kopano-list-cards .image img {
position: absolute;
top: 0;
left: 0;
transform: unset;
-webkit-transform: unset; /* Safari and Chrome */
-moz-transform: unset; /* Firefox */
-ms-transform: unset; /* IE 9 */
-o-transform: unset; /* Opera */
}
.kopano-list-cards .overlay {
top: 0;
right: 0;
width: 14.5vw;
height: 14.5vw;
border-radius: 0 0 0 0.25em;
box-shadow: none;
}
@media all and (min-width: 640px) {
.kopano-list-cards {
grid-template-columns: 512px;
}
.kopano-list-cards .image {
height: 290px;
}
.kopano-list-cards .overlay {
width: 85px;
height: 85px;
}
}
@media all and (min-width: 768px) {
.kopano-list-cards {
grid-template-columns: repeat(2,minmax(210px, 512px));
}
.kopano-list-cards .image {
height: 31.2vw;
}
.kopano-list-cards .overlay {
width: 8.9vw;
height: 8.9vw;
}
}
@media all and (min-width: 1024px) {
.kopano-list-cards {
grid-template-columns: repeat(3,minmax(210px, 512px));
}
.kopano-list-cards .image {
height: 15.6vw;
}
.kopano-list-cards .overlay {
width: 4.45vw;
height: 4.45vw;
}
}
@media all and (min-width: 1280px) {
.kopano-list-cards {
grid-template-columns: repeat(4,minmax(210px, 512px));
}
.kopano-list-cards .image {
height: 145px;
}
.kopano-list-cards .overlay {
width: 40px;
height: 40px;
}
}
.kopano-video-wrapper {
width:100%;
height:100%;
margin:0 auto;
}
.kopano-video-iframe {
position:relative;
}
.kopano-video-iframe img {
display:block;
width:100%;
height:auto;
}
.kopano-video-iframe iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.kopano-document-page-image {
position: relative;
width: 180px;
height: 234px;
margin-top: 17px;
}
.kopano-document-page-image .image {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
}
.kopano-document-page-image .image img {
max-width: 100%;
max-height: 100%;
}
.kopano-document-page-image .icon {
position: absolute;
top: 0;
right: 0;
padding: 12px;
}
.kopano-document-page-image .download {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #FFFFFF;
box-shadow: var(--kopano-box-shadow);
opacity: 0;
}
.kopano-document-page-image .download img {
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.kopano-document-page-image:hover .download {
opacity: 1;
-webkit-transition: var(--kopano-transition-time) ease-in-out;
-moz-transition: var(--kopano-transition-time) ease-in-out;
-o-transition: var(--kopano-transition-time) ease-in-out;
transition: var(--kopano-transition-time) ease-in-out;
}
/* --- Extensions: iframe -------------------------------------------------- */
html.single-extension {
margin-top: 0 !important;
}
.kopano-body-extension.iframe {
font-size: 4vw;
}
.kopano-body-extension.iframe #wpadminbar,
.kopano-body-extension.iframe .kopano-bar,
.kopano-body-extension.iframe footer {
display: none;
}
.kopano-body-extension.iframe .content,
.kopano-body-extension.iframe .content_wrapper {
margin: 0;
padding: 0;
}
.kopano-body-extension.iframe .header {
padding: 2em 2.5em 1.5em 2.5em;
border-bottom: 1px solid #E0E0E0;
}
.kopano-body-extension.iframe .header h1 {
margin: 0;
font-style: normal;
font-weight: normal;
font-size: 2em;
line-height: 1.25em;
letter-spacing: 0.015em;
color: #000000;
}
.kopano-body-extension .description {
display: grid;
grid-template-columns: 1fr;
grid-row-gap: 4vw;
margin: 2em 2.5em 0em 2.5em;
}
.kopano-body-extension .description .text {
}
.kopano-body-extension .description .text h2 {
font-size: 1.5em;
line-height: 1.5em;
font-weight: 700;
}
.kopano-body-extension .description .text h3 {
font-size: 1.255em;
line-height: 1.5em;
font-weight: 600;
}
.kopano-body-extension .description .text h4 {
font-size: 1em;
line-height: 1.5em;
font-weight: 500;
}
.kopano-body-extension .description .text li {
font-size: 1em;
line-height: 2.5em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 0 0.4em;
background-size: 1.8em 1.8em;
padding-left: 2.3em;
padding-top: 2px;
padding-bottom: 2px;
display: block;
color: #212121;
}
.kopano-body-extension .flags {
margin: 2em 0 0 0;
}
.kopano-body-extension .flags span {
display: inline-block;
margin-top: 0.5em;
margin-right: 0.5em;
padding: 0.5em 0.75em;
border: 1px solid #E0E0E0;
border-radius: 0.5em;
font-style: normal;
font-weight: normal;
font-size: 0.7em;
line-height: 1.5em;
color: #424242;
}
.kopano-body-extension .description .images {
align-self: top;
justify-self: center;
text-align: center;
min-width: 100%;
max-width: 100%;
max-height: 24em;
}
.kopano-body-extension .description .images img {
margin: 10px;
max-height: 20em;
}
.kopano-body-extension .description .images > img {
max-width: 100%;
}
.kopano-body-extension .extension_meta {
display: flex;
flex-direction: column;
margin: 2em 2.5em 2.5em 2.5em;
}
.kopano-body-extension .extension_meta .links {
text-align: left;
}
.kopano-body-extension .extension_meta .links ul {
padding: 0;
margin: 0;
}
.kopano-body-extension .extension_meta .links li {
background: none;
padding: 0 0 2em 0;
margin: 0;
}
.kopano-body-extension .extension_meta .links li a,
.kopano-body-extension .extension_meta .links li a:visited,
.kopano-body-extension .extension_meta .links li a:hover {
font-style: normal;
font-weight: normal;
font-size: 1.25em;
line-height: 1em;
text-align: left;
letter-spacing: 0.015em;
text-decoration-line: underline;
color: #000000;
}
.kopano-body-extension .extension_meta .links .button {
margin: 1.5em 0 0 0;
font-size: 1em;
line-height: 1.25em;
}
.kopano-body-extension .extension_meta .links li a svg,
.kopano-body-extension .extension_meta .links .button svg {
margin-right: 0.5em;
}
.kopano-body-extension .extension_meta .provider {
display: flex;
width: 100%;
margin-left: 0;
margin-top: 2em;
}
.kopano-body-extension .extension_meta .provider img {
max-width: 50%;
max-height: 4em;
}
.kopano-body-extension .extension_meta .provider a {
text-align: left;
}
.kopano-body-extension .extension_meta .provider a,
.kopano-body-extension .extension_meta .provider a:visited,
.kopano-body-extension .extension_meta .provider a:hover {
font-style: normal;
font-weight: normal;
font-size: 1.25em;
line-height: 1.4em;
letter-spacing: 0.0125em;
white-space: nowrap;
text-decoration: none;
color: #000000;
}
@media all and (min-width: 640px) {
.kopano-body-extension.iframe {
font-size: 2.5vw;
}
}
@media all and (min-width: 768px) {
.kopano-body-extension.iframe {
font-size: 1.5vw;
}
.kopano-body-extension .description {
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 1.875vw;
grid-row-gap: 0;
}
.kopano-body-extension .description .text-wrapper {
grid-column-start: 1;
grid-row-start: 1;
}
.kopano-body-extension .description .text {
max-height: 21.5625em;
overflow: auto;
}
.kopano-body-extension .description .images {
grid-column-start: 2;
grid-row-start: 1;
}
.kopano-body-extension .extension_meta {
flex-direction: row;
}
.kopano-body-extension .extension_meta .links .button {
margin: 0 1.5em 0 0;
}
.kopano-body-extension .extension_meta .provider {
align-items: flex-end;
justify-content: flex-end;
width: 50%;
margin-left: auto;
margin-top: 0;
}
.kopano-body-extension .extension_meta .provider a {
text-align: right;
}
}
@media all and (min-width: 1024px) {
.kopano-body-extension.iframe {
font-size: 1.25vw;
}
}
@media all and (min-width: 1280px) {
.kopano-body-extension.iframe {
font-size: 16px;
}
.kopano-body-extension .description {
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 24px;
}
}
/* -------------------------------------------------------------------------
Kopano Customer / References
------------------------------------------------------------------------- */
.kopano-customer-2x2 {
display: grid;
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(2,1fr);
grid-column-gap: 5vw;
grid-row-gap: 5vw;
}
.kopano-customer-3x2 {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(2,1fr);
grid-column-gap: 5vw;
grid-row-gap: 5vw;
}
.kopano-customer-5x1,
.kopano-customer-scroll {
display: grid;
grid-template-columns: repeat(5,1fr);
grid-column-gap: 2vw;
}
/* intended to be a responsive square */
.kopano-customer-5x1 .kopano-customer,
.kopano-customer-2x2 .kopano-customer,
.kopano-customer-3x2 .kopano-customer,
.kopano-customer-scroll .kopano-customer {
border: 2px solid #E7E7E7;
border-radius: 0.5em;
background: #FFFFFF;
margin: 0;
position: relative;
text-align: center;
text-decoration: none;
align-items: center;
overflow: hidden;
opacity: 1;
font-size: 4vw;
}
.kopano-customer-5x1 .kopano-customer:before,
.kopano-customer-2x2 .kopano-customer:before,
.kopano-customer-3x2 .kopano-customer:before,
.kopano-customer-scroll .kopano-customer:before {
content: "";
display: block;
padding-top: 70%;
}
.kopano-customer .kopano-customer-logo,
.kopano-customer .kopano-customer-links {
display: flex;
justify-content: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
margin: 0;
}
.kopano-customer .kopano-customer-logo img {
max-height: 80%;
max-width: 80%;
align-self: center;
}
.kopano-customer .kopano-customer-links {
display: none;
align-items: center;
background-color: #FFFFFF;
opacity: 0;
}
.kopano-customer .kopano-customer-links > div {
width: 100%;
}
.kopano-customer .kopano-customer-links span {
display: block;
width: 100%;
text-align: center;
padding: 0.2em 0;
}
.kopano-customer .kopano-customer-links a {
color: #37474F;
text-decoration: none;
font-style: normal;
font-weight: normal;
font-size: 0.85em;
line-height: 1em;
vertical-align: text-top;
}
.kopano-customer .kopano-customer-links a:before {
display: inline-block;
width: 1.25em;
height: 1.25em;
padding-right: 0.4em;
vertical-align: text-top;
}
.kopano-customer .kopano-customer-links a.website:before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/general-icon-external.svg);
}
.kopano-customer .kopano-customer-links a.more:before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/general-icon-story.svg);
}
/* animate the change for 'scroll' */
.kopano-customer.do-hide {
opacity: 0;
-webkit-transition: var(--kopano-transition-time) ease-in-out;
-moz-transition: var(--kopano-transition-time) ease-in-out;
-o-transition: var(--kopano-transition-time) ease-in-out;
transition: var(--kopano-transition-time) ease-in-out;
}
.kopano-customer.is-invisible {
display: none;
-webkit-transition: var(--kopano-transition-time) ease-in-out;
-moz-transition: var(--kopano-transition-time) ease-in-out;
-o-transition: var(--kopano-transition-time) ease-in-out;
transition: var(--kopano-transition-time) ease-in-out;
}
@media all and (min-width: 768px) {
.kopano-customer-2x2,
.kopano-customer-3x2 {
grid-column-gap: 2.35vw;
grid-row-gap: 2.35vw;
}
.kopano-customer-5x1,
.kopano-customer-scroll {
grid-column-gap: 2.35vw;
}
.kopano-customer-5x1 .kopano-customer,
.kopano-customer-2x2 .kopano-customer,
.kopano-customer-3x2 .kopano-customer,
.kopano-customer-scroll .kopano-customer {
font-size: 1.25vw;
}
.kopano-customer .kopano-customer-links {
display: flex;
}
.kopano-customer-2x2 .kopano-customer:hover,
.kopano-customer-3x2 .kopano-customer:hover,
.kopano-customer-5x1 .kopano-customer:hover,
.kopano-customer-scroll .kopano-customer:hover {
box-shadow: var(--kopano-box-shadow);
border: 1px solid #FFFFFF;
-webkit-transition: var(--kopano-transition-time) ease-in-out;
-moz-transition: var(--kopano-transition-time) ease-in-out;
-o-transition: var(--kopano-transition-time) ease-in-out;
transition: var(--kopano-transition-time) ease-in-out;
}
.kopano-customer:hover .kopano-customer-links {
opacity: 1;
-webkit-transition: var(--kopano-transition-time) ease-in-out;
-moz-transition: var(--kopano-transition-time) ease-in-out;
-o-transition: var(--kopano-transition-time) ease-in-out;
transition: var(--kopano-transition-time) ease-in-out;
}
}
@media all and (min-width: 1280px) {
.kopano-customer-2x2,
.kopano-customer-3x2 {
grid-column-gap: 30px;
grid-row-gap: 30px;
}
.kopano-customer-5x1,
.kopano-customer-scroll {
grid-column-gap: 30px;
}
.kopano-customer-5x1 .kopano-customer,
.kopano-customer-2x2 .kopano-customer,
.kopano-customer-3x2 .kopano-customer,
.kopano-customer-scroll .kopano-customer {
font-size: 16px;
}
}
/* ------------------------------------------------------------------------- */
.kopano-customer-quote {
width: 100%;
/* background-color: #FFFFFF;
border: 2px solid #E7E7E7;*/
box-sizing: border-box;
border-radius: 0.5em;
padding: 6vw 8vw;
font-size: 2.5vw !important;
}
.kopano-customer-quote .kopano-customer {
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/general-icon-quote.svg);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 2.75em 2.75em;
}
.kopano-customer-quote .quote {
padding-top: 17vw;
font-style: normal;
font-weight: bold;
font-size: 1.25em;
line-height: 1.6em;
text-align: left;
color: #37474F;
}
.kopano-customer-quote .contact {
display: flex;
padding-top: 12.5vw;
}
.kopano-customer-quote .contact .image {
display: inline-block;
width: 20vw;
height: 20vw;
overflow:hidden;
border-radius: 50%;
margin-right: 5.5vw;
}
.kopano-customer-quote .contact .image img {
min-height: 100%;
max-height: 100%;
min-width: 100%;
max-width: 100%;
object-fit: cover;
}
.kopano-customer-quote .contact .data {
display: inline-block;
align-self: center;
}
.kopano-customer-quote .contact .data span {
display: block;
font-style: normal;
font-weight: 100;
font-size: 1.25em;
line-height: 1.6em;
color: #616161;
}
.kopano-customer-quote .contact .data span.name {
font-weight: 500;
}
@media all and (min-width: 640px) {
}
@media all and (min-width: 768px) {
.kopano-customer-quote {
padding: 2.4vw 3.2vw;
font-size: 1.25vw !important;
}
.kopano-customer-quote .quote {
padding-top: 6.8vw;
}
.kopano-customer-quote .contact {
padding-top: 5vw;
}
.kopano-customer-quote .contact .image {
width: 8vw;
height: 8vw;
margin-right: 2.2vw;
}
}
@media all and (min-width: 1024px) {
.kopano-customer-quote {
padding: 1.875vw 2.5vw;
font-size: 1.25vw;
}
.kopano-customer-quote .quote {
padding-top: 5.3vw;
}
.kopano-customer-quote .contact {
padding-top: 3.9vw;
}
.kopano-customer-quote .contact .image {
width: 6.25vw;
height: 6.25vw;
margin-right: 1.7vw;
}
}
@media all and (min-width: 1280px) {
.kopano-customer-quote {
padding: 24px 32px;
font-size: 16px !important;
}
.kopano-customer-quote .quote {
padding-top: 68px;
}
.kopano-customer-quote .contact {
padding-top: 50px;
}
.kopano-customer-quote .contact .image {
width: 80px;
height: 80px;
margin-right: 22px;
}
}
/* -------------------------------------------------------------------------
Polaroid Header image (.image or .image-team)
------------------------------------------------------------------------- */
.kopano-polaroid-wrapper {
position: relative;
width: 49.92vw;
height: 47.36vw;
overflow:hidden;
margin: 0;
padding: 0;
}
.kopano-polaroid-wrapper .image {
display: block;
position: absolute;
width: 30.72vw;
height: 32.64vw;
margin-top: 3.2vw;
margin-left: 14.72vw;
}
.kopano-polaroid-wrapper .image-team {
display: block;
position: absolute;
width: 33.28vw;
height: 35.84vw;
margin-top: 3.84vw;
margin-left: 11.52vw;
background-color: #00B3F0;
}
.kopano-polaroid-wrapper .polaroid {
display: block;
position: absolute;
max-width: 49.92vw;
max-height: 47.36vw;
width: auto;
height: auto;
margin: 0;
padding: 0;
box-shadow: none;
}
.kopano-polaroid-wrapper .subtitle {
position: absolute;
left: 15.36vw;
bottom: 8.32vw;
transform: rotate(4deg);
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-ms-transform: rotate(4deg);
-o-transform: rotate(4deg);
color: #424242;
font-size: 1.8vw;
font-style: italic;
line-height: 1.125em;
text-align: left;
}
@media all and (min-width: 640px) {
.kopano-polaroid-wrapper {
width: 33.15vw;
height: 31.45vw;
}
.kopano-polaroid-wrapper .image {
width: 20.4vw;
height: 21.675vw;
margin-top: 2.125vw;
margin-left: 9.775vw;
}
.kopano-polaroid-wrapper .image-team {
width: 22.1vw;
height: 23.8vw;
margin-top: 2.55vw;
margin-left: 7.65vw;
}
.kopano-polaroid-wrapper .polaroid {
max-width: 33.15vw;
max-height: 31.45vw;
}
.kopano-polaroid-wrapper .subtitle {
left: 10.2vw;
bottom: 5.525vw;
font-size: 1.2vw;
}
}
@media all and (min-width: 1280px) {
.kopano-polaroid-wrapper {
width: 390px;
height: 370px;
}
.kopano-polaroid-wrapper .image {
width: 240px;
height: 255px;
margin-top: 25px;
margin-left: 115px;
}
.kopano-polaroid-wrapper .image-team {
width: 260px;
height: 280px;
margin-top: 30px;
margin-left: 90px;
}
.kopano-polaroid-wrapper .polaroid {
max-width: 390px;
max-height: 370px;
}
.kopano-polaroid-wrapper .subtitle {
left: 120px;
bottom: 65px;
font-size: 14px;
line-height: 16px;
}
}
/* -------------------------------------------------------------------------
Business-Card style of a team member
------------------------------------------------------------------------- */
.businesscard-wrapper {
position: relative;
width: 100%;
height: 52vw;
background: #14A9E7;
border-radius: 0.5em;
font-size: 3vw;
line-height: 1.5em;
}
.businesscard-wrapper > h3 {
padding: 3.75vw 0 0 3.75vw;
margin: 0;
font-style: normal;
font-weight: bold;
font-size: 1.2em;
line-height: 1.5em;
color: #FFFFFF;
}
.businesscard-wrapper p {
padding: 1.25vw 0 0 3.75vw;
margin: 0;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #FFFFFF;
}
.businesscard-wrapper .image {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow:hidden;
margin: 0;
padding: 0;
}
.businesscard-wrapper .image > img {
display: block;
position: absolute;
height: 60vw;
width: auto;
right: 0;
bottom: -8vw;
}
@media all and (min-width: 768px) {
.businesscard-wrapper {
height: 33vw;
font-size: 2vw;
}
.businesscard-wrapper > h3 {
padding: 2.4vw 0 0 2.4vw;
}
.businesscard-wrapper p {
padding: 0.8vw 0 0 2.4vw;
}
.businesscard-wrapper .image > img {
height: 38vw;
bottom: -5vw;
}
}
@media all and (min-width: 1024px) {
.businesscard-wrapper {
height: 26vw;
font-size: 1.5vw;
}
.businesscard-wrapper > h3 {
padding: 2vw 0 0 2vw;
}
.businesscard-wrapper p {
padding: 0.6vw 0 0 2vw;
}
.businesscard-wrapper .image > img {
height: 30vw;
bottom: -4vw;
}
}
@media all and (min-width: 1280px) {
.businesscard-wrapper {
height: 330px;
font-size: 20px;
}
.businesscard-wrapper > h3 {
padding: 24px 0 0 24px;
}
.businesscard-wrapper p {
padding: 8px 0 0 24px;
}
.businesscard-wrapper .image > img {
height: 380px;
bottom: -50px;
}
}
/* -------------------------------------------------------------------------
Add contact information
------------------------------------------------------------------------- */
.contactme-wrapper {
font-size: 3vw;
line-height: 1.5em;
}
.contactme-wrapper h2 {
font-size: 1.5em;
line-height: 2em;
}
.contactme-wrapper p {
font-size: 1em;
line-height: 1.5em;
}
.contactme-wrapper div {
font-size: 1em;
line-height: 1.5em;
}
@media all and (min-width: 768px) {
.contactme-wrapper {
font-size: 2vw;
}
}
@media all and (min-width: 1024px) {
.contactme-wrapper {
font-size: 1.5vw;
}
}
@media all and (min-width: 1280px) {
.contactme-wrapper {
font-size: 17px;
line-height: 1.5em;
}
}
/* -------------------------------------------------------------------------
Company -> Working with us -> list of jobs
------------------------------------------------------------------------- */
#kopano-page-job-list.kopano-page.carry-in {
margin-top: -20.85vw !important;
}
.kopano-job-offers {
grid-template-columns: 1fr;
grid-column-gap: 3vw;
grid-row-gap: 3vw;
margin-top: 4vw !important;
margin-bottom: 7.5vw !important;
}
.kopano-job-offers .kopano-card {
background-color: #FFFFFF;
}
.kopano-job-offers .kopano-card .image {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 30vw;
}
.kopano-job-offers .kopano-card .image img {
min-width: unset;
min-height: unset;
max-width: 30%;
max-height: 80%;
width: 30%;
}
.kopano-job-offers .kopano-card h4 {
margin: 0 3vw 1vw 3vw;
text-align: center;
font-size: 1em;
line-height: 1.5em;
}
.kopano-job-offers .kopano-card p {
box-sizing: border-box;
width: 100%;
bottom: 0;
margin: 0 0 22vw 0;
padding: 0 3vw;
font-size: 0.875em;
line-height: 1.5em;
text-align: center;
color: #BDBDBD;
}
.kopano-job-offers .kopano-card .action {
width: 100%;
right: unset;
bottom: 3vw;
text-align: center;
}
.kopano-job-offers .kopano-card .action a,
.kopano-job-offers .kopano-card .action a:hover {
background: 0;
border: 0;
font-size: 0.875em;
color: #00B3F0;
box-shadow: none;
}
@media all and (min-width: 640px) {
}
@media all and (min-width: 768px) {
#kopano-page-job-list.kopano-page.carry-in {
margin-top: -12.5vw !important;
}
.kopano-job-offers {
grid-template-columns: repeat(2,1fr);
grid-column-gap: 2vw;
grid-row-gap: 2vw;
margin-top: 2.65vw !important;
margin-bottom: 5vw !important;
}
.kopano-job-offers .kopano-card .image {
height: 14vw;
height: 12vw;
}
.kopano-job-offers .kopano-card h4 {
margin: 0 1.875vw 0.625vw 1.875vw;
}
.kopano-job-offers .kopano-card p {
margin: 0 0 6.5625vw 0;
padding: 0 1.875vw;
}
.kopano-job-offers .kopano-card .action {
bottom: 1.875vw;
}
}
@media all and (min-width: 1024px) {
.kopano-job-offers {
grid-template-columns: repeat(3,1fr);
}
}
@media all and (min-width: 1280px) {
#kopano-page-job-list.kopano-page.carry-in {
margin-top: -160px !important;
}
.kopano-job-offers {
grid-column-gap: 26px;
grid-row-gap: 26px;
margin-top: 34px !important;
margin-bottom: 64px !important;
}
.kopano-job-offers .kopano-card .image {
height: 180px;
height: 156px;
}
.kopano-job-offers .kopano-card h4 {
margin: 0 24px 8px 24px;
}
.kopano-job-offers .kopano-card p {
margin: 0 0 84px 0;
padding: 0 24px;
}
.kopano-job-offers .kopano-card .action {
bottom: 24px;
}
}
/* -------------------------------------------------------------------------
Company -> Kopano Team -> list of team members
------------------------------------------------------------------------- */
.kopano-page-team div,
.kopano-page-team span {
box-sizing: content-box;
}
.kopano-page-team > .wpb_wrapper {
overflow: visible;
display: grid;
grid-template-columns: 80.75vw;
grid-column-gap: 10.625vw;
justify-content: center;
margin-top: 17vw;
}
.kopano-page-team > .wpb_wrapper:hover {
cursor: pointer;
}
.team-wrapper {
height: 117.94vw;
overflow: visible;
font-size: 3.613vw;
}
.team-wrapper div,
.team-wrapper span {
font-size: inherit;
}
.team-title {
position: relative;
z-index: 100;
}
.team-title h3 {
margin-bottom: 0;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
font-size: 1.75em;
line-height: 1.25em;
}
.team-title p {
position: absolute;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
font-size: 1em;
line-height: 1.5em;
}
.team-backgrop,
.team-shadow,
.team-character {
position: absolute;
width: 80.75vw;
height: 87.125vw;
}
.team-description {
position: relative;
height: 15.94vw;
max-width: 73.31vw;
margin-top: 74.375vw;
overflow: hidden;
color: #000;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
cursor: text;
font-size: 1em;
line-height: 1.5em;
}
.team-tags {
position: relative;
top: -12.11vw;
height: 5.31vw;
padding: 5.31vw 0 0 0;
font-weight: bold;
max-width: 76.5vw;
background: transparent url(/wp-content/themes/betheme-zarafa-childtheme/images/profile-expand.png);
background-position: 0;
background-size: contain;
background-repeat: repeat-x;
}
.team-backgrop,
.team-shadow,
.team-character {
margin-top: -10.625vw;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
background-color: transparent;
}
.team-links {
font-weight: bold;
text-decoration: none;
position: relative;
top: -22.32vw;
height: 6.375vw;
opacity: 0;
display: block;
}
/* Generic profile animations */
.team-wrapper,
.team-character,
.team-backgrop,
.team-shadow,
.team-description,
.team-more,
.team-links {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.team-wrapper:hover .team-backgrop {
margin-left: -10.625vw;
}
.team-wrapper:hover .team-character {
margin-left: 21.25vw;
opacity: 0.2;
}
.team-wrapper:hover .team-shadow {
margin-left: -10.625vw;
opacity: 0;
}
.team-wrapper:hover .team-description {
margin-top: 7.86vw;
height: 73.375vw;
}
.team-wrapper:hover .team-tags {
margin-top: 11.26vw;
}
.team-wrapper:hover .team-links{
opacity: 1;
}
@media (hover: none) {
.team-wrapper .team-backgrop {
margin-left: -10.625vw;
}
.team-wrapper .team-character {
margin-left: 21.25vw;
opacity: 0.2;
}
.team-wrapper .team-shadow {
margin-left: -10.625vw;
opacity: 0;
}
.team-wrapper .team-description {
margin-top: 7.86vw;
height: 73.375vw;
}
.team-wrapper .team-tags {
margin-top: 11.26vw;
background-image: none;
}
.team-wrapper .team-links{
opacity: 1;
}
}
@media all and (min-width: 768px) {
.kopano-page-team > .wpb_wrapper {
grid-template-columns: repeat(2,38vw);
grid-column-gap: 5vw;
margin-top: 8vw;
}
.team-wrapper {
height: 55.5vw;
font-size: 1.7vw;
}
.team-backgrop,
.team-shadow,
.team-character {
width: 38vw;
height: 41vw;
}
.team-description {
height: 7.5vw;
max-width: 34.5vw;
margin-top: 35vw;
}
.team-tags {
top: -5.7vw;
height: 2.5vw;
padding: 2.5vw 0 0 0;
max-width: 36vw;
}
.team-backgrop,
.team-shadow,
.team-character {
margin-top: -5vw;
}
.team-more {
top: -4.5vw;
height: 3vw;
}
.team-links {
top: -10.5vw;
height: 3vw;
}
.team-wrapper:hover .team-backgrop {
margin-left: -5vw;
}
.team-wrapper:hover .team-character {
margin-left: 10vw;
}
.team-wrapper:hover .team-shadow {
margin-left: -5vw;
}
.team-wrapper:hover .team-description {
margin-top: 3.7vw;
height: 35vw;
}
.team-wrapper:hover .team-tags {
margin-top: 5.3vw;
}
}
@media (hover: none) and (min-width: 768px) {
.team-wrapper .team-backgrop {
margin-left: -5vw;
}
.team-wrapper .team-character {
margin-left: 10vw;
}
.team-wrapper .team-shadow {
margin-left: -5vw;
}
.team-wrapper .team-description {
margin-top: 3.7vw;
height: 35vw;
}
.team-wrapper .team-tags {
margin-top: 5.3vw;
}
}
@media all and (min-width: 1024px) {
.kopano-page-team > .wpb_wrapper {
grid-template-columns: repeat(3,27.14vw);
grid-column-gap: 3.57vw;
margin-top: 5.71vw;
}
.team-wrapper {
height: 39.64vw;
font-size: 1.21vw;
}
.team-backgrop,
.team-shadow,
.team-character {
width: 27.12vw;
height: 29.29vw;
}
.team-description {
height: 5.36vw;
max-width: 24.64vw;
margin-top: 25vw;
}
.team-tags {
top: -4.07vw;
height: 1.79vw;
padding: 1.79vw 0 0 0;
max-width: 25.71vw;
}
.team-backgrop,
.team-shadow,
.team-character {
margin-top: -3.57vw;
}
.team-more {
top: -3.21vw;
height: 2.14vw;
}
.team-links {
top: -7.5vw;
height: 2.14vw;
}
.team-wrapper:hover .team-backgrop {
margin-left: -3.57vw;
}
.team-wrapper:hover .team-character {
margin-left: 7.14vw;
}
.team-wrapper:hover .team-shadow {
margin-left: -3.57vw;
}
.team-wrapper:hover .team-description {
margin-top: 2.64vw;
height: 25vw;
}
.team-wrapper:hover .team-tags {
margin-top: 3.79vw;
}
}
@media (hover: none) and (min-width: 1024px) {
.team-wrapper .team-backgrop {
margin-left: -3.57vw;
}
.team-wrapper .team-character {
margin-left: 7.14vw;
}
.team-wrapper .team-shadow {
margin-left: -3.57vw;
}
.team-wrapper .team-description {
margin-top: 2.64vw;
height: 25vw;
}
.team-wrapper .team-tags {
margin-top: 3.79vw;
}
}
@media all and (min-width: 1400px) {
.kopano-page-team > .wpb_wrapper {
grid-template-columns: repeat(3,380px);
grid-column-gap: 50px;
margin-top: 80px;
}
.team-wrapper {
height: 555px;
font-size: 17px;
}
.team-backgrop,
.team-shadow,
.team-character {
width: 380px;
height: 410px;
}
.team-description {
height: 75px;
max-width: 345px;
margin-top: 350px;
}
.team-tags {
top: -57px;
height: 25px;
padding: 25px 0 0 0;
max-width: 360px;
}
.team-backgrop,
.team-shadow,
.team-character {
margin-top: -50px;
}
.team-more {
top: -45px;
height: 30px;
}
.team-links {
top: -105px;
height: 30px;
}
.team-wrapper:hover .team-backgrop {
margin-left: -50px;
}
.team-wrapper:hover .team-character {
margin-left: 100px;
}
.team-wrapper:hover .team-shadow {
margin-left: -50px;
}
.team-wrapper:hover .team-description {
margin-top: 37px;
height: 350px;
}
.team-wrapper:hover .team-tags {
margin-top: 53px;
}
}
@media (hover: none) and (min-width: 1400px) {
.team-wrapper .team-backgrop {
margin-left: -50px;
}
.team-wrapper .team-character {
margin-left: 100px;
}
.team-wrapper .team-shadow {
margin-left: -50px;
}
.team-wrapper .team-description {
margin-top: 37px;
height: 350px;
}
.team-wrapper .team-tags {
margin-top: 53px;
}
}
.member-circle-wrapper {
}
.member-circle-wrapper .member-circle {
position: relative;
width: 80px;
height: 80px;
border-radius: 40px;
background-color: #14A9E7;
overflow: hidden;
}
.member-circle-wrapper .member-image {
position: relative;
margin: 0;
width: 75px;
height: 80px;
}
.member-circle-wrapper .member-image img {
width: 93px;
height: 100px;
position: absolute;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
object-fit: cover;
margin: auto;
min-height: 100%;
min-width: 100%;
}
/* -------------------------------------------------------------------------
Kopanop Blog - all blog posts (just an edit as good as possible)
------------------------------------------------------------------------- */
body.blog.with_aside .sections_group {
width: unset;
float: unset;
}
.kopano-blog-wrapper {
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 2.33vw;
justify-content: center;
font-size: 4vw;
}
.kopano-blog-posts {
grid-template-columns: 1fr;
grid-column-gap: 2.33vw;
grid-row-gap: 2.33vw;
}
.kopano-blog-post-wrapper {
grid-column-start: 1;
grid-row-start: 2;
}
.kopano-blog-sidebar-wrapper {
grid-column-start: 1;
grid-row-start: 1;
margin-bottom: 2.3vw !important;
}
.kopano-blog-post-wrapper .pagination {
width: 100%;
margin-top: 11vw;
text-align: center;
}
.kopano-blog-post-wrapper .pagination .more {
float: left;
}
.kopano-blog-posts .action .button:hover,
.kopano-blog-posts .action .button {
margin: 0;
padding: 0;
border: none;
background: none;
color: #00B3F0;
box-shadow: none;
}
.kopano-blog-posts .action .button-light {
font-size: 0.875em;
line-height: 1.5em;
}
.kopano-blog-sidebar {
background: #FAFAFA;
border-radius: 0.5em;
padding: 5.25vw;
}
.kopano-blog-sidebar h4 {
font-style: normal;
font-weight: 500;
font-size: 1.5em;
line-height: 1.5em;
color: #212121;
}
.kopano-blog-sidebar .featured ol {
list-style: none;
counter-reset: featured-counter;
margin: 0;
padding: 0;
}
.kopano-blog-sidebar .featured ol li {
counter-increment: featured-counter;
display: flex;
width: 100%;
background: none;
padding: 0;
margin: 2.6vw 0 2.6vw 0;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #0D74B6;
}
.kopano-blog-sidebar .featured ol li::before {
content: counter(featured-counter);
margin-right: 4.2vw;
font-weight: 500;
font-size: 1.5em;
line-height: 1.5em;
color: #37474F;
}
.kopano-blog-sidebar .tags {
display: none;
}
.kopano-blog-sidebar .tags ul {
list-style-type: none;
padding: -6px;
}
.kopano-blog-sidebar .tags li {
display: inline-block;
background: none;
padding: 8px 12px;
margin: 6px;
background: #FFFFFF;
border: 1px solid #E0E0E0;
border-radius: 0.5em;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #424242;
}
.kopano-blog-sidebar .tags li.selected {
background: #00B3F0;
color: #FFFFFF;
border: none;
}
.kopano-blog-sidebar li > a,
.kopano-blog-sidebar li > a:hover {
text-decoration: none;
color: unset;
font-size: unset;
}
@media all and (min-width: 640px) {
.kopano-blog-post-wrapper .pagination ul,
.kopano-blog-sidebar .tags ul {
padding: -0.15vw;
}
.kopano-blog-post-wrapper .pagination li,
.kopano-blog-sidebar .tags li {
padding: 1.5vw 2vw;
margin: 0.15vw;
}
}
@media all and (min-width: 768px) {
.kopano-blog-wrapper {
grid-template-columns: 2fr 1fr;
font-size: 1.6vw;
}
.kopano-blog-posts {
grid-template-columns: 1fr;
}
.kopano-blog-post-wrapper {
grid-column-start: 1;
grid-row-start: 1;
}
.kopano-blog-sidebar-wrapper {
grid-column-start: 2;
grid-row-start: 1;
margin-bottom: 0;
}
.kopano-blog-sidebar .tags {
display: block;
}
.kopano-blog-post-wrapper .pagination {
margin-top: 3.9vw;
}
.kopano-blog-post-wrapper .pagination ul,
.kopano-blog-sidebar .tags ul {
padding: -0.25vw;
}
.kopano-blog-post-wrapper .pagination li,
.kopano-blog-sidebar .tags li {
padding: 0.5vw 1vw;
margin: 0.25vw;
}
.kopano-blog-sidebar {
padding: 1.875vw;
}
.kopano-blog-sidebar .featured ol li {
margin: 1vw 0 1vw 0;
}
.kopano-blog-sidebar .featured ol li::before {
margin-right: 1.5vw;
}
}
@media all and (min-width: 1024px) {
.kopano-blog-wrapper {
grid-template-columns: 3fr 1fr;
font-size: 1.25vw;
}
.kopano-blog-posts {
grid-template-columns: repeat(2, 1fr);
}
.kopano-blog-post-wrapper .pagination {
margin-top: 3.9vw;
}
.kopano-blog-post-wrapper .pagination ul,
.kopano-blog-sidebar .tags ul {
padding: -0.5vw;
}
.kopano-blog-post-wrapper .pagination li,
.kopano-blog-sidebar .tags li {
padding: 0.625vw 1vw;
margin: 0.5vw;
}
.kopano-blog-sidebar {
padding: 1.875vw;
}
.kopano-blog-sidebar .featured ol li {
margin: 1vw 0 1vw 0;
}
.kopano-blog-sidebar .featured ol li::before {
margin-right: 1.5vw;
}
}
@media all and (min-width: 1280px) {
.kopano-blog-wrapper {
grid-template-columns: 3fr 1fr;
grid-column-gap: 30px;
font-size: 16px;
}
.kopano-blog-posts {
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 30px;
grid-row-gap: 30px;
}
.kopano-blog-post-wrapper .pagination {
margin-top: 50px;
}
.kopano-blog-post-wrapper .pagination ul,
.kopano-blog-sidebar .tags ul {
padding: -6px;
}
.kopano-blog-post-wrapper .pagination li,
.kopano-blog-sidebar .tags li {
padding: 8px 12px;
margin: 6px;
}
.kopano-blog-sidebar {
padding: 24px;
}
.kopano-blog-sidebar .featured ol li {
margin: 12px 0 12px 0;
}
.kopano-blog-sidebar .featured ol li::before {
margin-right: 19px;
}
}
/* .single-post .header {
width: 100vw;
height: calc(32vw + 50px);
padding: 0;
margin: 0;
}
.single-post .header .header-image {
width: 100vw;
height: 32vw;
overflow: hidden;
}
.single-post .header .header-image img {
min-width: 100vw;
min-height: 32vw;
width: auto;
height: auto;
}
.single-post .header .header-icon {
position: absolute;
left: calc(50vw - 3.6vw);
top: calc(32vw - 3.6vw);
width: 7.2vw;
height: 7.2vw;
border-radius: 50%;
box-shadow: var(--kopano-box-shadow);
overflow: hidden;
background-color: #FFFFFF;
}
.single-post .header .header-icon img {
max-width: 4.3vw;
max-height: 4.3vw;
width: auto;
height: auto;
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%); /* Safari and Chrome
-moz-transform: translate(-50%, -50%); /* Firefox *
-ms-transform: translate(-50%, -50%); /* IE 9 *
-o-transform: translate(-50%, -50%); /* Opera *
}
.single-post .post-header h1 {
font-style: normal;
font-weight: 500;
font-size: 56px;
line-height: 72px;
color: #424242;
}
.single-post .post-header .meta {
margin-top: 32px;
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 32px;
color: #616161;
}
.post-content {
font-style: normal;
font-weight: normal;
font-size: 20px;
line-height: 32px;
color: #212121;
}
.post-content h1 {
font-weight: 500;
font-size: 40px;
line-height: 56px;
}
.post-content h2 {
font-weight: 500;
font-size: 32px;
line-height: 44px;
}
.post-content h3 {
font-weight: 500;
font-size: 24px;
line-height: 32px;
}
.post-content li {
background: transparent url("data:image/svg+xml;utf8,") no-repeat 0 7px / 9px;
padding-left: 20px;
display: block;
}
.post-content img {
max-width: 100%;
}*/
.single-post h2 {
margin-top: 1em;
margin-bottom: 0.25em;
}
.related-posts {
background-color: #FAFAFA !important;
margin: 0 !important;
}
.related-posts .wpb_wrapper > h4 {
font-weight: 500;
font-size: 40px;
line-height: 56px;
padding: 0 !important;
border: 0 !important;
}
.related-posts-all-wrapper {
position: relative;
width: 100%;
height: 100%;
}
.related-posts-all {
position: absolute;
bottom: 24px;
right: 0;
}
#comments ol,
#comments ul {
padding: 0;
margin: 0;
}
#comments li {
background: none;
}
#comments ol > li {
padding-left: 0;
padding-bottom: 30px;
}
#comments ul > li {
padding-left: 30px;
}
/* -------------------------------------------------------------------------
Release Posts
------------------------------------------------------------------------- */
.kopano-releases-list {
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 2.35vw;
}
/* intended to be a responsive square */
.kopano-releases-list .kopano-card {
position: relative;
font-size: 5vw;
}
.kopano-releases-list .kopano-card:before {
content: "";
display: block;
padding-top: 70%;
}
.kopano-releases-list .image {
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
background-color: #F5F5F5;
height: 2.9375em;
padding: 0.75em 1em 0.6875em 1em;
}
.kopano-releases-list .image span {
font-style: normal;
font-weight: normal;
color: #212121;
font-size: 1em;
line-height: 1.5em;
}
.kopano-releases-list .image img {
left: revert;
min-width: unset;
min-height: unset;
top: 0.71875em;
right: 1em;
width: auto;
height: 1.5em;
transform: unset;
-webkit-transform: unset;
-moz-transform: unset;
-ms-transform: unset;
-o-transform: unset;
}
.kopano-releases-list .summary {
position: absolute;
top: 3.75em;
font-style: normal;
font-weight: normal;
color: #212121;
padding: 0.75em 1em;
font-size: 0.875em;
line-height: 1.4em;
}
.kopano-releases-list .meta {
box-sizing: border-box;
left: 0;
bottom: 0;
display: flex;
flex-direction: row;
align-items: flex-end;
font-style: normal;
font-weight: bold;
color: #9E9E9E;
padding: 0 1em 1em 1em;
font-size: 0.75em;
line-height: 1.66em;
}
.kopano-releases-list .meta span {
padding-left: 0.75em;
}
.kopano-releases-gallery {
position: relative;
width: 100%;
}
.kopano-releases-gallery img {
max-width: 100%;
margin-bottom: 10vw;
}
.kopano-releases-gallery div {
position: absolute;
width: 100%;
bottom: 0;
text-align: center;
}
@media all and (min-width: 640px) {
.kopano-releases-list {
grid-template-columns: repeat(2,1fr);
}
.kopano-releases-list .kopano-card {
font-size: 2.5vw;
}
.kopano-releases-list .kopano-card:before {
padding-top: 70%;
}
}
@media all and (min-width: 768px) {
.kopano-releases-list {
grid-template-columns: repeat(3,1fr);
}
.kopano-releases-list .kopano-card {
font-size: 1.6vw;
}
.kopano-releases-list .kopano-card:before {
padding-top: 70%;
}
}
@media all and (min-width: 1024px) {
.kopano-releases-list {
grid-template-columns: repeat(5,1fr);
}
.kopano-releases-list .kopano-card {
font-size: 1.25vw;
}
.kopano-releases-list .kopano-card:before {
padding-top: 100%;
}
}
@media all and (min-width: 1280px) {
.kopano-releases-list {
grid-template-columns: repeat(5,1fr);
grid-column-gap: 30px;
}
.kopano-releases-list .kopano-card {
font-size: 1.14vw;
}
.kopano-releases-list .kopano-card:before {
padding-top: 90%;
}
}
@media all and (min-width: 1400px) {
.kopano-releases-list .kopano-card {
font-size: 16px;
}
}
/* -------------------------------------------------------------------------
Release Notes page
------------------------------------------------------------------------- */
.kopano-release-notes {
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 5.5vw;
font-size: 4vw;
margin-bottom: 31vw !important;
}
.kopano-release-notes > .release-announcement {
grid-column-start: 1;
grid-row-start: 1;
}
.kopano-release-notes > .action {
grid-column-start: 1;
grid-row-start: 3;
}
.kopano-release-notes > .highlights {
grid-column-start: 1;
grid-row-start: 2;
grid-row-end: 3;
}
.kopano-release-notes > div > .icon img {
width: 10vw;
height: auto;
margin-bottom: 2vw;
}
.kopano-release-notes > div > h2 {
font-size: 2em;
line-height: 1.5em;
margin: 0;
letter-spacing: 0.015em;
color: #37474F;
}
.kopano-release-notes > div > .meta {
margin-top: 2vw;
margin-bottom: 8vw;
font-style: normal;
font-weight: normal;
font-size: 1.25em;
line-height: 1.6em;
color: #616161;
}
.kopano-release-notes > div > p {
margin-bottom: 5vw !important;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #212121;
}
.kopano-release-notes > div > .button {
margin-top: 5vw !important;
font-style: normal;
font-weight: bold;
font-size: 0.875em;
line-height: 1.5em;
padding: 2.25vw 4vw 2vw 4vw;
}
.kopano-release-notes > div > h3 {
font-size: 1.5em;
line-height: 1.5em;
margin: 0;
letter-spacing: 0.015em;
color: #424242;
margin-bottom: 6.25vw;
}
.kopano-release-notes > .highlights {
display: flex;
align-self: center;
}
.kopano-release-notes > .highlights > div {
width: 100%;
}
.kopano-release-notes .kopano-releases-list {
grid-template-columns:1fr;
grid-column-gap: 1.95vw;
grid-row-gap: 1.95vw;
}
@media all and (min-width: 640px) {
.kopano-release-notes {
font-size: 2.5vw;
}
.kopano-release-notes .kopano-releases-list {
grid-template-columns: repeat(3,1fr);
}
.kopano-release-notes .kopano-releases-list .kopano-card:before {
padding-top: 110%;
}
}
@media all and (min-width: 768px) {
.kopano-release-notes {
grid-template-columns: repeat(2,1fr);
grid-column-gap: 5.5vw;
font-size: 1.6vw;
margin-bottom: 9.7vw !important;
}
.kopano-release-notes > .release-announcement {
grid-column-start: 1;
grid-row-start: 1;
}
.kopano-release-notes > .action {
grid-column-start: 1;
grid-row-start: 2;
}
.kopano-release-notes > .highlights {
grid-column-start: 2;
grid-row-start: 1;
grid-row-end: 3;
}
.kopano-release-notes > div > .icon img {
width: 3.125vw;
margin-bottom: 0.625vw;
}
.kopano-release-notes > div > .meta {
margin-top: 0.625vw;
margin-bottom: 2.5vw;
}
.kopano-release-notes > div > p {
margin-bottom: 1.5vw !important;
}
.kopano-release-notes > div > .button {
margin-top: 1.5vw !important;
padding: 0.7vw 1.25vw 0.625vw 1.25vw;
}
.kopano-release-notes > div > h3 {
margin-bottom: 1.95vw;
}
.kopano-release-notes .kopano-releases-list {
grid-template-columns: repeat(2,1fr);
}
.kopano-release-notes .kopano-releases-list .kopano-card:before {
padding-top: 100%;
}
}
@media all and (min-width: 1024px) {
.kopano-release-notes .kopano-releases-list .kopano-card:before {
padding-top: 70%;
}
}
@media all and (min-width: 1280px) {
.kopano-release-notes {
grid-column-gap: 70px;
font-size: 16px;
margin-bottom: 124px !important;
}
.kopano-release-notes > div > .icon img {
width: 40px;
margin-bottom: 8px;
}
.kopano-release-notes > div > .meta {
margin-top: 8px;
margin-bottom: 32px;
}
.kopano-release-notes > div > p {
margin-bottom: 20px !important;
}
.kopano-release-notes > div > .button {
margin-top: 20px !important;
padding: 9px 16px 8px 16px;
}
.kopano-release-notes > div > h3 {
margin-bottom: 25px;
}
.kopano-release-notes .kopano-releases-list {
grid-template-columns: repeat(3,1fr);
grid-column-gap: 25px;
grid-row-gap: 25px;
}
.kopano-release-notes .kopano-releases-list .kopano-card:before {
padding-top: 110%;
}
}
/* -------------------------------------------------------------------------
used at "contact us", "become a partner" & "partners"
------------------------------------------------------------------------- */
.become-a-partner-box {
margin-top: 2em;
padding: 1em;
}
.become-a-partner-box p {
font-size: 1em;
line-height: 1.5em;
}
.become-a-partner-box.grey {
padding: 1.5em;
background: #FAFAFA;
border-radius: 8px;
}
.become-a-partner-box h3 {
font-style: normal;
font-weight: bold;
font-size: 1.25em;
line-height: 1.4em;
margin-bottom: 1.125em;
color: #212121;
}
.become-a-partner-box .button {
margin-top: 2em;
}
.become-a-partner-box.grey .button {
margin-top: 3.5em;
}
/* -------------------------------------------------------------------------
Contact us
------------------------------------------------------------------------- */
.contactus .office,
.contactus .contact {
margin-bottom: 2em;
}
.contactus .office:last-child {
margin-bottom: 0;
}
.contactus .kopano-form-element-wrapper {
margin-top: 2.5em;
}
.contactus h3 {
font-style: normal;
font-weight: bold;
font-size: 1.25em;
line-height: 1.4em;
margin-bottom: 1.125em;
color: #212121;
}
.contactus h3:before {
background-size: 1.5em 1.5em;
background-position: 0 0;
width: 1.5em;
height: 1.5em;
}
.contactus h3.icon-location:before {
content: " ";
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9C5 13.17 9.42 18.92 11.24 21.11C11.64 21.59 12.37 21.59 12.77 21.11C14.58 18.92 19 13.17 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z' fill='%23424242'/%3E%3C/svg%3E%0A");
}
.contactus h3.icon-email:before {
content: " ";
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23616161'/%3E%3Cpath d='M22.6665 9.33203H9.33317C8.4165 9.33203 7.67484 10.082 7.67484 10.9987L7.6665 20.9987C7.6665 21.9154 8.4165 22.6654 9.33317 22.6654H22.6665C23.5832 22.6654 24.3332 21.9154 24.3332 20.9987V10.9987C24.3332 10.082 23.5832 9.33203 22.6665 9.33203ZM22.3332 12.8737L16.4415 16.557C16.1748 16.7237 15.8248 16.7237 15.5582 16.557L9.6665 12.8737C9.45817 12.7404 9.33317 12.5154 9.33317 12.2737C9.33317 11.7154 9.9415 11.382 10.4165 11.6737L15.9998 15.1654L21.5832 11.6737C22.0582 11.382 22.6665 11.7154 22.6665 12.2737C22.6665 12.5154 22.5415 12.7404 22.3332 12.8737Z' fill='white'/%3E%3C/svg%3E%0A");
}
.contactus h3.icon-phone:before {
content: " ";
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23616161'/%3E%3Cpath d='M22.025 18.7161L19.9084 18.4745C19.4 18.4161 18.9 18.5911 18.5417 18.9495L17.0084 20.4828C14.65 19.2828 12.7167 17.3578 11.5167 14.9911L13.0584 13.4495C13.4167 13.0911 13.5917 12.5911 13.5334 12.0828L13.2917 9.98281C13.1917 9.14115 12.4834 8.50781 11.6334 8.50781H10.1917C9.25003 8.50781 8.4667 9.29115 8.52503 10.2328C8.9667 17.3495 14.6584 23.0328 21.7667 23.4745C22.7084 23.5328 23.4917 22.7495 23.4917 21.8078V20.3661C23.5 19.5245 22.8667 18.8161 22.025 18.7161Z' fill='white'/%3E%3C/svg%3E%0A");
}
.contactus .kopano-page-content-2.contactus > .wpb_wrapper {
display: grid;
grid-template-columns: 1fr;
grid-row-gap: 0em;
margin: 2em 0 5.5em 0;
}
.contactus .kopano-page-content-2.contactus .head {
padding-bottom: 0.5em;
margin-bottom: 0.25em;
border-bottom: 1px solid #E0E0E0;
}
.contactus .kopano-page-content-2.contactus .head h3 {
font-style: normal;
font-weight: bold;
font-size: 1.25em;
line-height: 1.4em;
color: #616161;
}
.contactus .kopano-page-content-2.contactus > div > div:not(.head) > div {
margin: 1em 0;
font-style: normal;
font-weight: normal;
font-size: 0.875em;
line-height: 1.5em;
color: #616161;
}
@media all and (min-width: 768px) {
.contactus .kopano-page-content-2.contactus > .wpb_wrapper {
display: grid;
grid-template-columns: repeat(3,16.5em);
grid-column-gap: 3.5em;
margin: 2em 0 5.5em 0;
}
.contactus .kopano-page-content-2.contactus .kopano-bv {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
}
.contactus .kopano-page-content-2.contactus .kopano-gmbh {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
}
}
/* -------------------------------------------------------------------------
Kopano Home
------------------------------------------------------------------------- */
.kopano-card-wrapper.home {
grid-template-columns: 1fr;
grid-row-gap: 4.5em;
}
.kopano-card-wrapper.home .kopano-card.highlight {
border-bottom: 4px solid #00B3F0;
}
.kopano-card-wrapper.home .kopano-card img {
width: 3em;
height: 3em;
margin: 2em 0 0 2em;
}
.kopano-card-wrapper.home .kopano-card h4 {
margin: 1.2em 1.6em 0 1.6em;
font-style: normal;
font-weight: 500;
font-size: 1.25em;
line-height: 1.2em;
color: #424242;
}
.kopano-card-wrapper.home .kopano-card p {
margin: 1em 2em 3em 2em;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #616161;
}
@media all and (min-width: 768px) {
.kopano-card-wrapper.home {
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 4.5em;
grid-row-gap: 0;
}
}
.kopano-page.home {
background-size: auto 100%;
background-repeat: repeat-x;
margin-bottom: 0 !important;
}
.kopano-page.home > .wpb_column {
background-image: url("/wp-content/themes/betheme-zarafa-childtheme/images/2020-11-05_website_header.jpg");
background-size: 100vw 39.3vw;
background-position: 0 0;
background-repeat: no-repeat;
}
.kopano-page.home > .vc_column_container > .vc_column-inner > .wpb_wrapper {
grid-template-columns: 0 1fr 0;
}
.kopano-page.home .wpb_wrapper > div {
grid-row-start: 1;
}
.kopano-page.home .wpb_wrapper > div > .wpb_wrapper {
margin-top: 34vw;
margin-bottom: 5em;
}
.kopano-page.home .wpb_wrapper > p {
color: #424242;
}
@media all and (min-width: 1024px) {
.kopano-page.home {
background-image: url("/wp-content/themes/betheme-zarafa-childtheme/images/2020-11-05_website_header_bg.jpg");
background-size: auto 100%;
height: 27.5em;
margin-bottom: 0 !important;
}
.kopano-page.home > .wpb_column {
background-size: 70em 27.5em;
background-position: calc(50% + 12.5em) 0;
height: 27.5em;
}
.kopano-page.home > .vc_column_container > .vc_column-inner > .wpb_wrapper {
grid-template-columns: 0 15fr 22fr 0;
height: 27.5em;
}
.kopano-page.home .wpb_wrapper > div {
grid-row-start: 1;
}
.kopano-page.home .wpb_wrapper > div > .wpb_wrapper {
margin-top: 0;
margin-bottom: 5em;
}
.kopano-page.home-jobs .kopano-job-offers {
grid-template-columns: repeat(2,1fr);
}
}
@media all and (min-width: 1280px) {
.kopano-page.home {
background-image: url("/wp-content/themes/betheme-zarafa-childtheme/images/2020-11-05_website_header_bg.jpg");
background-size: auto 100%;
height: 27.5em;
margin-bottom: 0 !important;
}
.kopano-page.home > .wpb_column {
background-size: 70em 27.5em;
background-position: calc(50% + 12.5em) 0;
height: 27.5em;
}
.kopano-page.home > .vc_column_container > .vc_column-inner > .wpb_wrapper {
grid-template-columns: 0 minmax(300px,475px) minmax(440px,695px) 0;
height: 27.5em;
}
.kopano-page.home .wpb_wrapper > div {
grid-row-start: 1;
}
.kopano-page.home .wpb_wrapper > div > .wpb_wrapper {
margin-top: 0;
margin-bottom: 5em;
}
}
/* -------------------------------------------------------------------------
Kopano Landing
------------------------------------------------------------------------- */
.kopano-landing-page .kopano-page > .wpb_column {
margin-top: 4em;
}
.kopano-landing-page h1 {
margin-top: 0;
margin-bottom: 0.4em;
font-style: normal;
font-weight: 500;
font-size: 2.5em;
line-height: 1.3em;
color: #424242;
}
.kopano-landing-page h2 {
margin-bottom: 4em;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #616161;
}
.kopano-landing-page .intro {
margin-bottom: 2.5em;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
color: #212121;
}
.kopano-landing-page .images {
width: 90vw;
}
@media all and (min-width: 768px) {
.kopano-landing-page .images {
width: 40vw;
}
}
@media all and (min-width: 1280px) {
.kopano-landing-page .images {
width: 512px;
}
}
/* -------------------------------------------------------------------------
Kopano Events
------------------------------------------------------------------------- */
.kopano-event-timeline {
display: none;
position: relative;
width: 100%;
height: 20em;
}
.kopano-event-wrapper {
position: absolute;
max-width: 8em;
bottom: 0;
}
.kopano-event-title {
position: relative;
padding: 4px;
background-color: #FFFFFF;
text-align: center;
color: #757575;
z-index: 10;
}
.kopano-event-title a {
color: #757575;
}
.kopano-event-title a:hover {
color: #242424;
}
.kopano-event-title.selected,
.kopano-event-title.selected a {
color: #00B3F0;
}
.kopano-event-title-dot {
position: absolute;
left: calc(50% - 0.4em);
bottom: -0.4em;
width: 0.7em;
height: 0.7em;
background-image: url("data:image/svg+xml,%0A%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23757575'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='24' height='24' fill='%23FFFFFF'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.kopano-event-title-dot.selected {
background-image: url("data:image/svg+xml,%0A%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Ccircle cx='12' cy='12' r='10' fill='%2300B3F0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='24' height='24' fill='%23FFFFFF'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.kopano-event-spacer {
height: 2em;
}
.kopano-event-spacer-line {
width: 50%;
height: 100%;
border-right: 2px solid #757575;
z-index: 2;
}
.kopano-event-spacer-line.selected {
border-right: 2px solid #00B3F0;
}
.kopano-event-scale {
display: none;
width: 100%;
border-top: 4px solid #424242;
position: relative;
}
.kopano-event-scale-dot {
position: absolute;
left: -1.2em;
top: -0.85em;
width: 1.5em;
height: 1.5em;
background-image: url("data:image/svg+xml,%0A%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23424242'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='24' height='24' fill='%23FFFFFF'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.kopano-event-scale-triangle {
position: absolute;
right: -1.2em;
top: -0.85em;
width: 1.5em;
height: 1.5em;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Cpolygon points='0,0 24,12 0,24' style='fill:%23424242' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='24' height='24' fill='%23FFFFFF'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.kopano-event-scale-month {
position: absolute;
height: 0.5em;
border-right: 4px solid #424242;
}
.kopano-event-content-wrapper {
position: relative;
display: flex;
justify-content: center;
}
.kopano-event-content-spacer {
padding: 0;
margin: 0;
border: 0;
width: 100%;
max-width: 700px;
}
.kopano-event-content-spacer-line {
display: none;
position: relative;
height: 5em;
border-left: 2px solid #00B3F0;
}
.kopano-event-content-spacer-dot {
position: absolute;
left: -0.75em;
bottom: -0.75em;
width: 1.5em;
height: 1.5em;
background-image: url("data:image/svg+xml,%0A%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0)'%3E%3Ccircle cx='12' cy='12' r='10' fill='%2300B3F0'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0'%3E%3Crect width='24' height='24' fill='%23FFFFFF'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.kopano-event-content {
position: relative;
margin-top: -3em;
width: 100%;
max-width: 700px;
padding: 1.5em;
}
.kopano-event-content-data {
border-radius: 0.5em;
box-shadow: var(--kopano-box-shadow);
margin-bottom: 5em;
padding: 1em;
}
.kopano-event-content-data.selected {
display: block;
}
.kopano-event-content-meta {
width: 100%;
display: grid;
grid-template-columns: 1fr;
}
.kopano-event-content-meta > div {
display: flex;
align-items: center;
padding: 0.5em 0;
}
.kopano-event-content-meta > div > span {
margin-left: 1em;
}
.kopano-event-content-text {
margin-top: 3em;
}
.kopano-event-form {
margin-top: 1.5em;
padding-top: 1.5em;
border-top: 1px solid #757575;
}
@media all and (min-width: 768px) {
.kopano-event-content-spacer-line,
.kopano-event-scale,
.kopano-event-timeline {
display: block;
}
.kopano-event-content-data {
display: none;
border-radius: 0;
box-shadow: none;
padding: 0;
}
.kopano-event-content-meta {
grid-template-columns: repeat(2, 1fr);
}
.kopano-event-content-meta .orga {
grid-column-start: 2;
grid-row-start: 1;
}
.kopano-event-content-meta .website {
grid-column-start: 2;
grid-row-start: 2;
}
}
/* -------------------------------------------------------------------------
Advent calendar
------------------------------------------------------------------------- */
.kopano-header-image .grinch-wrapper {
position: relative;
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/christmas_grinch_hand.svg);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
width: 76.17vw;
height: 49.48vw;
}
.kopano-header-image .grinch-wrapper .days {
position: absolute;
width: 10%;
height: 10%;
right: 32%;
bottom: 15%;
font-size: 6.25vw;
font-weight: 700;
color: #FFFFFF;
}
ol.grinch {
list-style: none;
counter-reset: featured-counter;
margin: 0;
padding: 0;
}
ol.grinch li {
counter-increment: featured-counter;
display: flex;
width: 100%;
background: none;
padding: 0;
margin: 2.6vw 0 2.6vw 0;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
}
ol.grinch li::before {
content: counter(featured-counter);
margin-right: 4.2vw;
font-weight: 500;
font-size: 1.5em;
line-height: 1.5em;
color: #37474F;
}
.grinch p {
margin-bottom: 4px;
}
.grinch input {
width: 0;
height: 0;
}
.grinch label {
display: inline-block;
box-sizing: border-box;
width: 100%;
padding: 0 2.5em 0 0;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
letter-spacing: 0.015em;
text-indent: unset;
color: #14A9E7;
}
.grinch .answer {
height: 0;
padding: 0;
overflow: hidden;
font-style: normal;
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
letter-spacing: 0.015em;
color: #424242;
}
.grinch input[type=checkbox] ~ label:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314A9E7'%3E%3Cpath d='M21 12l-18 12v-24z'/%3E%3C/svg%3E");
margin: 0 0.3em 0 0;
}
.grinch input[type=checkbox]:checked ~ label:before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23BDBDBD'%3E%3Cpath d='M12 21l-12-18h24z'/%3E%3C/svg%3E");
}
.grinch input:checked~.answer {
height: auto;
padding: 0 0 0.375em 0;
}
.grinch input:checked~label {
color: #BDBDBD;
}
.grinch input:checked~.answer,
.grinch input:checked~label,
.grinch input[type=checkbox] ~ label:before {
-webkit-transition: var(--kopano-transition-time) ease-in-out;
-moz-transition: var(--kopano-transition-time) ease-in-out;
-o-transition: var(--kopano-transition-time) ease-in-out;
transition: var(--kopano-transition-time) ease-in-out;
}
.kopano-advent-calendar {
position: relative;
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/christmas_wichtel.svg);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
margin-top: 3em;
width: 100%;
height: calc( 100vw + 13em );
}
.kopano-advent-calendar h1 {
width: 100%;
padding-top: 1.25em;
margin: 0;
text-align: center;
color: #00B3F0;
}
.kopano-advent-calendar .star-light {
position: absolute;
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/christmas_star_1.svg);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
}
.kopano-advent-calendar .star-dark {
position: absolute;
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/christmas_star_2.svg);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
}
.kopano-advent-calendar .star-dark:nth-child(3n+1),
.kopano-advent-calendar .star-light:nth-child(3n+1) {
width: 1em;
height: 1em;
}
.kopano-advent-calendar .star-dark:nth-child(3n+2),
.kopano-advent-calendar .star-light:nth-child(3n+2) {
width: 1.25em;
height: 1.25em;
}
.kopano-advent-calendar .star-dark:nth-child(3n+3),
.kopano-advent-calendar .star-light:nth-child(3n+3) {
width: 1.5em;
height: 1.5em;
}
.kopano-advent-calendar .moon {
position: absolute;
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/christmas_kopano_moon.svg);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
left: calc(50% + 6em);
top: -3.5em;
width: 7em;
height: 7em;
}
.kopano-advent-calendar .star-0 { left: calc(50% - 10em); top: -0.5em; }
.kopano-advent-calendar .star-1 { left: calc(50% - 3em); top: 1.5em; }
.kopano-advent-calendar .star-2 { left: calc(50% + 2em); top: 1em; }
.kopano-advent-calendar .star-3 { left: calc(50% - 1em); top: -1em; }
.kopano-advent-calendar .star-4 { left: calc(50% - 7em); top: 1.25em; }
.kopano-advent-calendar .star-5 { left: calc(50% - 5em); top: -1em; }
.kopano-advent-calendar .bowls {
position: absolute;
left: calc(50% - 50vw);
right: calc(50% + 50vw);
top: 13em;
bottom: 0;
}
.kopano-advent-calendar .bowl {
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
display: flex;
position: absolute;
width: 12vw;
height: 12vw;
justify-content: center;
}
.kopano-advent-calendar .bowl > div,
.kopano-advent-calendar .bowl > div a {
display: block;
font-size: 6vw !important;
font-weight: 700;
color: #FFFFFF;
text-align: center;
align-self: center;
}
.kopano-advent-calendar .bowl:nth-child(5n+0) {
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/profile-andreas-shadow.png);
}
.kopano-advent-calendar .bowl:nth-child(5n+1) {
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/profile-anke-shadow.png);
}
.kopano-advent-calendar .bowl:nth-child(5n+2) {
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/profile-brian-shadow.png);
}
.kopano-advent-calendar .bowl:nth-child(5n+3) {
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/profile-bob-shadow.png);
}
.kopano-advent-calendar .bowl:nth-child(5n+4) {
background-image: url(/wp-content/themes/betheme-zarafa-childtheme/images/profile-heleen-shadow.png);
}
.kopano-advent-calendar .bowl:nth-child(24n+ 1) { left: 31vw; top: 17vw; }
.kopano-advent-calendar .bowl:nth-child(24n+ 2) { left: 59vw; top: 70vw; }
.kopano-advent-calendar .bowl:nth-child(24n+ 3) { left: 47vw; top: 20vw; }
.kopano-advent-calendar .bowl:nth-child(24n+ 4) { left: 37vw; top: 65vw; }
.kopano-advent-calendar .bowl:nth-child(24n+ 5) { left: 40vw; top: 2vw; }
.kopano-advent-calendar .bowl:nth-child(24n+ 6) { left: 56vw; top: 50vw; }
.kopano-advent-calendar .bowl:nth-child(24n+ 7) { left: 10vw; top: 73vw; }
.kopano-advent-calendar .bowl:nth-child(24n+ 8) { left: 40vw; top: 37vw; }
.kopano-advent-calendar .bowl:nth-child(24n+ 9) { left: 18vw; top: 35vw; }
.kopano-advent-calendar .bowl:nth-child(24n+10) { left: 33vw; top: 85vw; }
.kopano-advent-calendar .bowl:nth-child(24n+11) { left: 62vw; top: 33vw; }
.kopano-advent-calendar .bowl:nth-child(24n+12) { left: 2vw; top: 2vw; }
.kopano-advent-calendar .bowl:nth-child(24n+13) { left: 83vw; top: 38vw; }
.kopano-advent-calendar .bowl:nth-child(24n+14) { left: 56vw; top: 89vw; }
.kopano-advent-calendar .bowl:nth-child(24n+15) { left: 81vw; top: 19vw; }
.kopano-advent-calendar .bowl:nth-child(24n+16) { left: 5vw; top: 22vw; }
.kopano-advent-calendar .bowl:nth-child(24n+17) { left: 75vw; top: 57vw; }
.kopano-advent-calendar .bowl:nth-child(24n+18) { left: 2vw; top: 41vw; }
.kopano-advent-calendar .bowl:nth-child(24n+19) { left: 29vw; top: 49vw; }
.kopano-advent-calendar .bowl:nth-child(24n+20) { left: 83vw; top: 77vw; }
.kopano-advent-calendar .bowl:nth-child(24n+21) { left: 3vw; top: 87vw; }
.kopano-advent-calendar .bowl:nth-child(24n+22) { left: 7vw; top: 58vw; }
.kopano-advent-calendar .bowl:nth-child(24n+23) { left: 20vw; top: 5vw; }
.kopano-advent-calendar .bowl:nth-child(24n+24) { left: 65vw; top: 1vw; width: 16vw; height: 16vw; }
@media all and (min-width: 640px) {
.kopano-advent-calendar .moon {
left: calc(50% + 13em);
top: 0.05em;
width: 4em;
height: 4em;
}
}
@media all and (min-width: 768px) {
.kopano-header-image .grinch-wrapper {
width: 45.7vw;
height: 29.69vw;
}
.kopano-header-image .grinch-wrapper .days {
font-size: 3.75vw;
}
ol.grinch li {
margin: 1vw 0 1vw 0;
}
ol.grinch li::before {
margin-right: 1.5vw;
}
.kopano-advent-calendar .moon {
left: calc(50% + 20em);
top: 1.25em;
width: 7em;
height: 7em;
}
.kopano-advent-calendar .star-0 { left: calc(50% + 29em); top: 2em; }
.kopano-advent-calendar .star-1 { left: calc(50% + 17em); top: 1.75em; }
.kopano-advent-calendar .star-2 { left: calc(50% - 24em); top: 3em; }
.kopano-advent-calendar .star-3 { left: calc(50% - 29em); top: 1.75em; }
.kopano-advent-calendar .star-4 { left: calc(50% + 26em); top: 8em; }
.kopano-advent-calendar .star-5 { left: calc(50% - 21em); top: 6em; }
}
@media all and (min-width: 1280px) {
.kopano-header-image .grinch-wrapper {
width: 585px;
height: 380px;
}
.kopano-header-image .grinch-wrapper .days {
font-size: 56px;
}
ol.grinch li {
margin: 12px 0 12px 0;
}
ol.grinch li::before {
margin-right: 19px;
}
.kopano-advent-calendar {
height: calc( 1280px + 13em );
}
.kopano-advent-calendar .bowls {
left: 0;
right: 0;
}
.kopano-advent-calendar .bowl {
width: 153px;
height: 153px;
}
.kopano-advent-calendar .bowl > div,
.kopano-advent-calendar .bowl > div a {
font-size: 72px !important;
}
.kopano-advent-calendar .bowl:nth-child(24n+ 1) { left: 397px; top: 218px; }
.kopano-advent-calendar .bowl:nth-child(24n+ 2) { left: 755px; top: 896px; }
.kopano-advent-calendar .bowl:nth-child(24n+ 3) { left: 602px; top: 256px; }
.kopano-advent-calendar .bowl:nth-child(24n+ 4) { left: 474px; top: 832px; }
.kopano-advent-calendar .bowl:nth-child(24n+ 5) { left: 512px; top: 26px; }
.kopano-advent-calendar .bowl:nth-child(24n+ 6) { left: 717px; top: 640px; }
.kopano-advent-calendar .bowl:nth-child(24n+ 7) { left: 128px; top: 934px; }
.kopano-advent-calendar .bowl:nth-child(24n+ 8) { left: 512px; top: 474px; }
.kopano-advent-calendar .bowl:nth-child(24n+ 9) { left: 230px; top: 448px; }
.kopano-advent-calendar .bowl:nth-child(24n+10) { left: 422px; top: 1088px; }
.kopano-advent-calendar .bowl:nth-child(24n+11) { left: 794px; top: 422px; }
.kopano-advent-calendar .bowl:nth-child(24n+12) { left: 26px; top: 26px; }
.kopano-advent-calendar .bowl:nth-child(24n+13) { left: 1062px; top: 487px; }
.kopano-advent-calendar .bowl:nth-child(24n+14) { left: 717px; top: 1139px; }
.kopano-advent-calendar .bowl:nth-child(24n+15) { left: 1037px; top: 243px; }
.kopano-advent-calendar .bowl:nth-child(24n+16) { left: 64px; top: 282px; }
.kopano-advent-calendar .bowl:nth-child(24n+17) { left: 960px; top: 730px; }
.kopano-advent-calendar .bowl:nth-child(24n+18) { left: 26px; top: 525px; }
.kopano-advent-calendar .bowl:nth-child(24n+19) { left: 371px; top: 627px; }
.kopano-advent-calendar .bowl:nth-child(24n+20) { left: 1062px; top: 986px; }
.kopano-advent-calendar .bowl:nth-child(24n+21) { left: 38px; top: 1114px; }
.kopano-advent-calendar .bowl:nth-child(24n+22) { left: 90px; top: 742px; }
.kopano-advent-calendar .bowl:nth-child(24n+23) { left: 256px; top: 64px; }
.kopano-advent-calendar .bowl:nth-child(24n+24) { left: 832px; top: 13px; width: 205px; height: 205px; }
}
/* -------------------------------------------------------------------------
License Checker
------------------------------------------------------------------------- */
input[type="file"] {
display: none;
}
.license-select::-webkit-file-upload-button {
visibility: hidden;
}
.button-light.license-paste {
border: none;
}
.button-light.license-paste:hover {
box-shadow: none;
}
#license-selector {
display: grid;
grid-template-columns: 1fr;
grid-row-gap: 15vw;
align-items: center;
}
.license-selector-file {
text-align: center;
padding-bottom: 2em;
}
.license-selector-or {
text-align: center;
font-size: 1.2em;
font-weight: 100;
color: #ABABAB;
}
.license-selector-text {
text-align: center;
padding-top: 2em;
}
.license {
grid-template-columns: 1fr;
grid-column-gap: 2em;
grid-row-gap: 2em;
}
#license-block {
display: none;
}
.license-information .license-label {
font-size: 0.8em;
font-weight: 100;
color: #ABABAB;
}
.license-information .license-value {
padding-bottom: 0.5em;
font-size: 1.2em;
font-weight: 700;
color: #212121;
}
.kopano-card-wrapper.license-products {
grid-template-columns: 1fr;
}
.kopano-card-wrapper.license-products .kopano-card {
display: none;
background-color: #00B3F0;
}
.kopano-card-wrapper.license-products .image {
display: flex;
justify-content: center;
height: 50vw;
}
.kopano-card-wrapper.license-products .image img {
width: 48vw;
height: 48vw;
margin-top: 5.76vw;
margin-left: 5.76vw;
min-width: unset;
max-width: unset;
min-height: unset;
min-height: unset;
}
.kopano-card-wrapper.license-products h4 {
text-align: center;
color: #FFFFFF;
}
.kopano-card-wrapper.license-products p {
margin-top: 0;
margin-bottom: 1em !important;
text-align: center;
color: #FFFFFF;
}
.kopano-card-wrapper.license-products p .value {
font-weight: 700;
}
#kopano-switch-buttons,
#kopano-switch-buttons .kopano-pricing-billing,
.kopano-switch {
display: none;
}
@media all and (min-width: 640px) {
#license-selector {
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 7vw;
grid-row-gap: 0;
}
.kopano-card-wrapper.license-products {
grid-template-columns: repeat(2, 1fr);
}
.kopano-card-wrapper.license-products .image {
height: 35vw;
}
.kopano-card-wrapper.license-products .image img {
width: 33vw;
height: 33vw;
margin-top: 3.96vw;
margin-left: 3.96vw;
}
}
@media all and (min-width: 768px) {
.kopano-card-wrapper.license-products {
grid-template-columns: repeat(3, 1fr);
}
.kopano-card-wrapper.license-products .image {
height: 20vw;
}
.kopano-card-wrapper.license-products .image img {
width: 18vw;
height: 18vw;
margin-top: 2.16vw;
margin-left: 2.16vw;
}
}
@media all and (min-width: 1024px) {
.license {
grid-template-columns: 1fr 3fr;
}
.kopano-card-wrapper.license-products .image {
height: 13.3vw;
}
.kopano-card-wrapper.license-products .image img {
width: 11.7vw;
height: 11.7vw;
margin-top: 1.4vw;
margin-left: 1.4vw;
}
}
@media all and (min-width: 1280px) {
#license-selector {
grid-column-gap: 70px;
}
.kopano-card-wrapper.license-products .image {
height: 170px;
}
.kopano-card-wrapper.license-products .image img {
width: 150px;
height: 150px;
margin-top: 18px;
margin-left: 18px;
}
}
/* ------------------------------------------------------------------------- */
/* products -> groupware */
/* products -> clients */
.clients-webapp::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/WebApp_icon.svg);
}
.clients-deskapp::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/DeskApp_icon.svg);
}
.clients-mobility::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/Mobility_icon.svg);
}
.clients-other::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/KOE_icon.svg);
}
/* products -> server */
.server-mapi,
.server-mapi:hover {
color: var(--deep-purple);
}
.server-infrastructure,
.server-infrastructure:hover {
color: var(--kopano-blue);
}
.server-interfaces,
.server-interfaces:hover {
color: var(--deep-orange);
}
.server-cluster,
.server-cluster:hover {
color: var(--dark-green);
}
/* products -> meet */
.meet-meet::before {
content: url(/wp-content/themes/betheme-zarafa-childtheme/images/Meet_icon.svg);
}
.meet-join,
.meet-join:hover {
color: var(--dark-green);
}
.meet-boost,
.meet-boost:hover {
color: var(--light-orange);
}
.kopano-bullet {
list-style-type: none;
padding: 0;
margin: 0;
}
.kopano-bullet-webapp li {
background: transparent url("data:image/svg+xml;utf8,") no-repeat 0 7px / 9px;
}
.kopano-bullet-deskapp li {
background: transparent url("data:image/svg+xml;utf8,") no-repeat 0 7px / 9px;
}
.kopano-bullet-mobility li {
background: transparent url("data:image/svg+xml;utf8,") no-repeat 0 7px / 9px;
}
.kopano-bullet-meet li {
background: transparent url("data:image/svg+xml;utf8,") no-repeat 0 7px / 9px;
}