/* ------------------------------------------------------ */
/* CSS BY KARSTEN BREMER - BRESYS INFORMATIKA KFT HUNGARY */
/* ------------------------------------------------------ */
/* GENERALS */
body,h1, h2, h3, h4, h5, h6 {
font-family:'Open Sans', sans-serif;
}
p {
font-size:16px;
}
.by_zoho picture:before {
content: 'based on';
font-size: 12px;
color: white;
display: block;
}
.youtube iframe {
border-radius: 20px;
}
.headline_h2 h2 {
font-size:24px !important;
line-height:1.2;
font-weight:bold;
}
.headline_h3 h3 {
font-size:20px !important;
line-height:1.2;
font-weight:bold;
text-transform: uppercase;
}
.footer_snippet {
margin:0;
}
/* LOGO GRID */
.logo_grid > .zpdefault-section {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
grid-column-gap: 40px;
grid-row-gap: 10px;
align-items: center;
}
.logo_grid img {
filter: grayscale(100%);
opacity: .5;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.logo_grid img:hover {
opacity:1;
filter:none;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
/* SECTIONS */
.hero {
padding-top: 170px;
/* height: 75vh; */
justify-content: center;
align-items: center;
display: flex;
padding-bottom: 100px;
}
[data-element-id="elm_rwaFtASVXmOjG_Qtv42nbw"] .zpimage-container figure img {
width:100% !important;
height:auto !important;
}
.pre_headline .zptext p {
text-transform:uppercase;
font-size:20px;
line-height:1.5;
}
.hero_headline h1 {
text-transform:uppercase;
font-weight:bold !important;
line-height:1.2;
font-size:30px;
}
.screen_section {
margin-top: -8vh !important;
}
/* SHADOW BOXES */
.shadowbox {
-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.13);
-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.13);
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.13);
width: calc(50% - 2rem);
margin: 1rem;
border-radius: 20px;
}
.shadowbox-row {
align-items: normal !important;
}
/* PRICE TABLES */
.pricetable h3:after {
content:'monatlich pro User';
background: none;
font-size: 14px;
position: relative;
top: -1rem;
}
.pricetable a {
background: black;
color: white;
text-transform: uppercase;
padding: .8rem 2rem;
margin: 1rem auto;
display: table;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
border-radius:80px;
}
.pricetable.advanced a {
background:#F6AF39;
}
.pricetable a:hover {
background:#F6AF39;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
transform:scale(1.03);
}
.pricetable.starter:before {
content:'Starter';
position: relative;
background: black;
color: white;
text-transform: uppercase;
padding: .5rem 1.5rem;
left: -15px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
}
.pricetable.starter.pro:before {
background: #61A6E5;
}
.pricetable.advanced:before {
content:'Professional';
background: #F6AF39;
}
.pricetable.pro:before {
content:'Extras';
}
.pricetable.pro h3:after {
content:'';
}
/* MISC */
.contact_icon h4 {
margin-top:-15px;
}
.contact_icon .zpicon-text-container {
position: absolute;
left: 105px;
margin-top: 18px;
width:auto;
}
[data-element-id="elm_TbVqsr3E4x3DRm0SMXN5LA"].zpelem-lpform .zpform-container .zpbutton {
background-color:#F6AF39 !important;
}
.gradient {
background-image: url(https://www.liebper.de/purple-bg2.jpg);
background-size: cover;
}
.chat1 {
margin-top:-100px;
}
.checkbullets ul {
list-style:none;
margin-left: 1.5rem;
font-size: 16px;
padding:0;
}
.checkbullets li {
position:relative;
}
.checkbullets li:before {
content: '';
position: absolute;
left: -30px;
top: 7px;
width: 23px;
height: 23px;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>');
}
/* BREAKPOINTS */
@media (max-width:767px) {
.shadowbox-row {
display:block;
}
.shadowbox {
width: calc(100% - 40px);
}
}
@media (max-width:1023px) {
[data-element-id="elm_gDQowNKmNiplcqgJU6ZL1g"].zpelem-col {
order:2;
}
[data-element-id="elm_2DqUft84s3X1N6LK1L0YMQ"] .zpimage-container figure img {
width:110px !important;
}
.mancol1 {
order:2;
}
[data-element-id="elm_J-CTysnjgLOLN9bo-SAA4g"].zpelem-image {
width:110px;
}
.custom_tabs .zptab {
border-radius:5px;
border-color: #eee !important;
}
.custom_tabs .zptab-active {
border-radius: 5px 5px 0 0;
border-color:#F5AF39 !important;
}
.custom_tabs .zptab-content {
margin-top:-2px !important;
border-radius:0 0 5px 5px;
margin-bottom:1rem !important;
}
}
@media (min-width:768px) and (max-width:1023px) {
[data-element-id="elm_XfkRBWSlYKTkOFTGncPlBg"] .zpimage-container figure img {
width: 676px !important;
height: auto !important;
}
[data-element-id="elm_u3WDTS4nrvKYpXHBGZU7HQ"] .zpimage-container figure img {
width: 549px !important;
float: right;
}
}
@media (min-width:768px) {
.logo_grid > .zpdefault-section {
grid-template-columns: repeat(7, 1fr);
}
.chat1 {
margin-top:-200px;
}
.hero_headline h1 {
font-size:40px;
}
.hero {
padding-bottom:170px;
}
.screen_section {
margin-top: -8vh !important;
}
}
@media (min-width:1024px) {
.icon_box .zpicon-text-container {
height:165px;
}
.contact_section {
margin-bottom:100px !important;
}
.hero_headline h1 {
font-size: 45px;
}
.zptabelem-inner-container.zptabs-style-01.zptab-type-01 .zptab {
color: rgba(255, 255, 255, .8);
}
[data-element-id="elm_VJcuQIqAgYgC_WqoclySkg"] .zptabelem-inner-container.zptabs-style-01.zptab-type-01 .zptab.zptab-active {
border-top-left-radius: 5px;
}
.custom_tabs .zptabs-container {
background: #F5AF39;
border-radius: 5px 5px 0 0;
justify-content:end !important;
padding-right:10px;
}
.custom_tabs .zptabs-container:before {
content:url('data:image/svg+xml,');
position:absolute;
left:20px;
left: 33px;
top: 34px;
}
[data-element-id="elm_VJcuQIqAgYgC_WqoclySkg"] .zptabelem-inner-container.zptabs-style-01.zptab-type-01 .zptab:not(.zptab-active):not(:hover) {
background: #F5AF39 !important;
}
.custom_tabs .zptab-name {
color:rgba (255, 255, 255, .8);
}
.red_arrow {
margin-top: -150px;
margin-left: -200px;
}
.screen_section {
margin-top: 0 !important;
}
}
@media (min-width:1260px) {
.hero_headline h1 {
font-size:50px;
}
.hero {
padding-top:150px;
height:85vh;
}
.headline_h2 h2 {
font-size:30px !important;
}
}
@media (min-width:1440px) {
.hero_headline h1 {
font-size:60px;
}
headline_h2 h2 {
font-size: 28px !important;
}
}