body{ margin: 0px; font-family: 'made_tommythin', sans-serif; line-height: 1.3; } :root{ --pb_pink_00: #d0208e; --pb_pink_01: #DF1995; --pb_pink_02: #F5B1CC; --pb_pink_03: #F8E0E8; --pb_mint: #D8EBE6; --pb_apricot: #FEAEA5; } a { color: #000; text-decoration: none !important; } a:hover { color: #555; } .pink-link{ cursor: pointer; color: var(--pb_pink_01); } h1, h2, h3, h4, h5, h6{ font-family: 'flatlinesemibold', sans-serif; } b{ font-family: 'made_tommyregular', sans-serif; } /* Beautytest */ .bp_text_block { position: relative; width: 95%; padding-top: 50%; cursor: pointer; } .bp_text_block_text{ top: 0px; border-radius: 5px !important; padding: 3px; display: flex; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ } .bp_text_block_border { position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px; } @media screen and (max-width: 460px) { .bp_text_block_text{ font-size: 3.5vw; } } .vct-list{ display: block; } .vct-list-mobile{ display: none; } .crt-widget.crt-widget-branded{ padding-bottom: 0px !important; } .list-checkmark { padding-inline-start: 20px; list-style-image: url("../img/system/checkmark.svg"); text-align: left; } .list-checkmark li { padding-bottom: 7px; } .faq-question{ margin-top: 15px; } .faq-question a{ font-family: 'flatlinesemibold', sans-serif; } .faq-answer{ padding: 10px; } .orderform{ margin: 0px auto; max-width: 560px; margin-bottom: 30px; } .main-content{ margin-top: 86px; position: relative; } .header{ position: relative; } .signin{ max-width: 250px; margin: 50px auto; } .signin input{ margin-bottom: 10px; } .signin p{ text-align: center; font-size: 0.8rem; } .signin a{ font-family: 'made_tommyregular'; } .invalid-feedback{ margin: 0rem .75rem .375rem .75rem; } .desktop{ display: block; } .mobile{ display: none; } .trennbild-desktop{ display: block; } .trennbild-mobile{ display: none; } .menu-desktop{ width: 50% !important; } .main-menu-item{ font-size: 20px; font-weight: bold; } .menu-item{ font-size: 1.2rem; margin: 20px 16px 0px 16px; border-bottom: 2px solid #fff; } .menu-item:hover, .act-nav{ border-bottom: 2px solid var(--pb_pink_01); } .menu-lang { border-top: solid 1px #eee; } .menu-lang a{ color: var(--pb_pink_01) !important; font-weight: bold; } .menu-lang a:hover{ color: var(--pb_pink_00) !important; } .header-mobile{ padding-top: 15px; padding-bottom: 13px; top: 0px; position: fixed; width: 100%; border-bottom: 1px solid #eee; display:none; background: #fff; z-index: 3; } .header-desktop{ position: fixed; top: 0px; width: 100%; padding: 20px 0px; background: #fff; z-index: 4; border-bottom: 1px solid #eee; } .logo-mobile{ height: 25px; } .logo-desktop{ height: 40px; } .usericon-mobile{ height: 28px; } .usericon-desktop{ margin-top: 5px; height: 35px; } .text-box{ position: relative; text-align: center; width: 80%; margin: 40px auto; } .main-container{ /*margin: 30px 25%;*/ max-width: 1030px; margin: 0px auto; padding: 15px; } .main-box{ /*margin: 30px 25%;*/ max-width: 1030px; margin: 0px auto; padding: 15px; } .mw-824{ max-width: 824px; margin: 0px auto; padding: 15px; } .mw-700{ max-width: 700px; margin: 0px auto; padding: 15px; } .mw-660{ max-width: 660px; margin: 0px auto; } .mw-650{ max-width: 650px; margin: 0px auto; padding: 15px; } .mw-600{ max-width: 600px; margin: 0px auto; padding: 15px; } .mw-560{ max-width: 560px; margin: 0px auto; } .mw-550{ max-width: 550px; margin: 0px auto; padding: 15px; } .mw-500{ max-width: 500px; margin: 0px auto; padding: 15px; } .mw-300{ max-width: 300px !important; } .invalid-feedback{ margin: 3px 0px 0px 0px; } #bestprodface{ width: 100%; border-radius: 12px; } .form-website{ display: none; } .best-of-deskop{ display: block; } .best-of-mobile{ display: none; } .quotes-desktop{ display: block; } .quotes-mobile{ display: none; } .press-logo{ max-width: 100%; max-height: 94px; vertical-align: middle; } .press-article{ width: 100%; padding: 2px; cursor: pointer; border: solid 1px #fff; } .press-article:hover{ border: solid 1px #ccc; box-shadow: 2px 4px 8px #afafaf; } .helper{ display: inline-block; height: 100%; vertical-align: middle; } .b2b-foto{ width: 100%; border-radius: 4%; } .ig-img{ position: absolute; bottom: 7px; left: 7px; height: 25px; object-fit:cover; border-radius:50%; } .box-icon-ig{ position: absolute; bottom: 8px; right: 8px; height: 23px; } .box-header{ position: absolute; top: 0; left: 0; right: 0; background: #fff; opacity: 0.75; padding: 30px 45px; text-align: center; } .box-footer{ position: absolute; bottom: 0; left: 0; right: 0; background: #fff; opacity: 1; padding: 10px 10px; text-align: center; border-top: 1px solid #ccc; } .right-arrow{ display:none; position: absolute; top: 30px; right: 15px; height: 19px; } .box-hover, .box-ig-hover{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #fff; padding: 30px 45px; text-align: center; opacity: 0.0; -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .box-hover:hover{ zoom: 1; filter: alpha(opacity=95); opacity: 0.95; box-shadow: 2px 4px 8px #afafaf; } .box-ig-hover:hover{ zoom: 1; filter: alpha(opacity=95); opacity: 1; } .hero-banner{ background-color: var(--pb_pink_01); text-align: center; padding: 10px; color: #fff; } .hero-banner a{ color: #fff; } .pink-banner{ background-color: var(--pb_pink_03); } .pink-banner h2{ font-family: 'flatlinesemibold-italic', sans-serif; } .rating-container{ width: 200px; } .rating-box{ position: relative; width: 100%; padding-bottom: 20%; /*Make the Box height 20% of widht*/ } .rating-row-grey{ position: absolute; top:0; left:0; bottom: 0; width: 100%; background-image: url("../img/icon_flower_padding_grey.svg"); background-size: 20%; } .rating-row-pink{ position: absolute; top:0; left:0; bottom: 0; background-image: url("../img/icon_flower_padding_pink.svg"); } .product-rating{ padding: 0% 10%; text-align: center; } .product-info{ padding: 5% 5%; background: #FAFAFA; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } .product-btn-box{ margin-top: 5px; display: flex; align-items: stretch; } .product-btn{ text-align: center; margin: 2px; border-radius: 2px; padding: 5px; flex: 1; border: solid 1px #EAEAEA; } .product-btn:hover{ border: solid 1px #ccc; } .product-image{ max-height: 100%; max-width: 100%; } .product-box{ border-radius: 4px; border: solid 1px #EAEAEA; height: 100%; cursor: pointer; background: #FAFAFA; } .product-box:hover{ border: solid 1px #ccc; box-shadow: 2px 4px 8px #afafaf; } .image-container{ border-radius: 4px; padding: 10px; background: #fff; } .image-box{ text-align: center; position: relative; width: 100%; } .image-box:after { content: ""; display: block; padding-bottom: 100%; } .image-box-content { position: absolute; width: 100%; height: 100%; } .bar-chart-container{ position: relative; max-width: 250px; display: flex; } .bar-chart{ position: relative; width: 100%; } .bar-label{ position: relative; height: 20px; width: 89px; padding: 2px 3px 2px 3px; font-size: 12px; text-align: right; } .bar-container{ position: relative; height: 20px; padding: 4px 0px; } .bar-background{ position: absolute; width: 100%; height: 12px; background: #ddd; text-align: right; } .bar{ position: absolute; height: 12px; background: var(--pb_pink_01); } .bar-value{ position: relative; height: 20px; font-size: 12px; padding: 2px 3px 4px 3px; } .footer { width: 100%; background-color: var(--pb_pink_01); padding: 10px 0 50px 0; margin-top: 100px; } .footer-mobile{ display:none; padding: 15px; color: #fff; } .footer-container{ display: flex; width: 80%; margin: auto; } .footer-item-box{ width: 25%; padding: 10px; } .footer-item-box ul { padding: 0px; } .footer-item-box li { padding: 5px; font-size: 16px; list-style-type: none; } .footer-item-box a { color: #fff; text-decoration: none; } .footer-item-box a:hover { color: var(--pb_pink_03); } .social-footer{ position: relative; } .bg-line{ border-top: 1px solid #fff; position: absolute; width: 80%; top: 35px; left: 10%; } .footer-icons{ display: flex; width: 140px; margin: auto; } .social-icon { position: relative; z-index: 2; padding:10px; background: var(--pb_pink_01); } .nl-desktop{ width: 80%; margin: auto; padding: 10px 15px; color: #fff; } .nl-mobile{ color: #fff; } .nl-form{ display: flex; margin: 10px 0px; } .nl-desktop input, .nl-mobile input{ display: block; height: calc(1.5em + .75rem + 2px); padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #fff; background-color: var(--pb_pink_01); background-clip: padding-box; border: 1px solid #fff; border-radius: 0; } .nl-desktop input:focus, .nl-mobile input:focus{ outline: none !important; } .nl-success{ max-width: 300px; height: 38px; background: #fff; color: #000; margin: 10px 0px; padding: .55rem .75rem; } .nl-desktop-email{ width: 300px; } .nl-desktop-submit, .nl-mobile-submit{ border-left: 0 !important; } .nl-mobile-email{ width: 100%; } .nl-desktop-submit:hover, .nl-mobile-submit:hover{ background-color: #fff; color: var(--pb_pink_01); } .nl-desktop input::placeholder, .nl-mobile input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: var(--pb_pink_03); opacity: 1; /* Firefox */ } .nl-desktop input::placeholder, .nl-mobile input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--pb_pink_03); } .nl-desktop input::placeholder, .nl-mobile input::-ms-input-placeholder { /* Microsoft Edge */ color: var(--pb_pink_03); } .pb-row{ position: relative; width: 100%; display: flex; } .logo-box{ padding-left: 12px; width: 100%; } .w-100p{ width: 100%; } .w-25p{ width: 25%; } .right{ text-align: right; } .center{ text-align: center; } .rounded-corner{ border-radius: 3%; } .box-image{ position: relative; padding: 15px; } .box-number{ position: absolute; top: -10px; left: 5px; background: #fff; padding: 0px 20px 0px 10px; font-size: 90px; line-height: 90px; font-family: 'flatlineregular', sans-serif; } .btn-box{ display: table-cell; position: relative; vertical-align: middle; } .btn-primary { font-family: 'made_tommyregular', sans-serif; background-color: var(--pb_pink_01); border-color: var(--pb_pink_01); } .btn-primary:hover { background-color: var(--pb_pink_00); border-color: var(--pb_pink_00); } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle { background-color: var(--pb_pink_01); border-color: var(--pb_pink_01); } .btn-primary:focus, .btn-primary.focus { background-color: var(--pb_pink_00); border-color: var(--pb_pink_00); box-shadow: 0px; } .btn-primary.disabled, .btn-primary:disabled { background-color: var(--pb_pink_01); border-color: var(--pb_pink_01); } .pb-btn{ font-family: 'made_tommyregular', sans-serif; font-size: 16px; border-radius: 2px; display: inline-block; padding: 4px 10px; background: var(--pb_pink_01); border: 1px solid var(--pb_pink_01) !important; color: #fff; cursor: pointer; text-decoration: none !important; } .pb-btn:hover{ color: #fff; background: var(--pb_pink_00); } .btn-icon{ font-family: 'made_tommythin', sans-serif; padding: 3px 4px; font-size: 12px; } .pb-btn-outline{ background: #fff; color: var(--pb_pink_01); border: 1px solid var(--pb_pink_01) !important; } .pb-btn-outline:hover{ background: var(--pb_pink_01) !important; color: #fff !important; } .pb-btn-lg{ border-radius: .25rem; font-size: 20px; padding: 6px 20px; } .btn-mb{ border-radius: 3px; font-size: 20px; padding: 12px 20px; } .main-visual-mobile{ display: none; } .main-visual-container-mobile{ background: white; } .main-visual-textbox-mobile{ background: rgba(255, 255, 255, 0.9); position: relative; padding: 10px; margin: 0px 20px; top: -20px; text-align: center; z-index: 0; } .main-visual-textbox-mobile h1{ font-size: 6vw; } .main-visual-textbox-mobile p{ font-size: 4vw; } .main-visual-desktop{ position: relative; margin-bottom: 8px; } .main-visual-textbox-desktop{ position: absolute; top: 25%; left: 25%; height: 43%; width: 25%; padding: 8px; padding-left: 12px; /* background: #ffffff; opacity: 0.8; */ } .main-visual-textbox-desktop h1{ font-size: 1.65vw; margin-block-start: 0px; margin-block-end: 0.4em; } .main-visual-textbox-desktop p{ font-size: 1.24vw; margin-block-start: 0px;; } .main-visual-buttonbox-desktop{ position: absolute; top: 72%; left: 25%; height: 10%; width: 25%; padding-left: 12px; /*background: #d1ffda;*/ } .card-voucher, .card-voucher-type{ cursor: pointer; } .preselected{ border: solid 1px var(--pb_pink_01); box-shadow: 2px 4px 8px #afafaf; } .card-voucher:hover, .card-voucher-type:hover, .selected-voucher{ border: solid 1px var(--pb_pink_01); box-shadow: 2px 4px 8px #afafaf; } .selected-voucher .card-header, .card-voucher:hover .card-header, .card-voucher-type:hover .card-header{ background-color: var(--pb_pink_03) !important; } .quotes{ display: flex; flex-direction: column; align-items: stretch; } .quote-row{ display: flex; flex: 1; flex-grow: 1; flex-shrink: 1; flex-basis: auto; } .quote{ display: flex; align-items:center; border-radius: 5px; margin-right: 15px; margin-bottom: 15px; padding: 15px; background: var(--pb_pink_03); } .quote h3 { font-size: 18px; } .marken-box{ padding:10px; max-height:130px; border: 1px solid #fff; text-align: center; margin: 3px; } .marken-box:hover{ border: 1px solid var(--pb_pink_03); box-shadow: 2px 3px 6px #afafaf; } .marken-img{ max-width:100%; max-height: 110px; } .progress-visual{ margin: 10px 0px; display: flex; width: 100%; } .progress-box{ width: 100%; } .progress-top-box{ position: relative; width: 100%; height: 36px; margin: 20px 0px 5px 0px; } .progress-line-box{ height: 18px; border-bottom: 1px solid #CCC; width: 100%; } .progress-circle-box{ width: 100%; position: absolute; top: 0px; } .progress-circle{ margin: auto; height: 36px; width: 36px; background-color: var(--pb_pink_01); border-radius: 18px; border: 2px solid #fff; color: #fff; font-family: 'made_tommyregular', sans-serif; display: flex; justify-content: center; align-items: center; } .tbd{ background-color: var(--pb_pink_02); } .progress-text-box{ text-align: center; padding: 5px 0px; font-size: 11px; } .funkyradio{ display:flex; } /* .funkyradio div { position: relative; top: 50%; transform: translateY(-50%); float:left; overflow: hidden; } */ .funkyradio label { width: 100px; border-radius: 3px; border: 1px solid #D1D3D4; font-weight: normal; } .funkyradio input[type="radio"]:empty, .funkyradio input[type="checkbox"]:empty { display: none; } .funkyradio input[type="radio"]:empty ~ label, .funkyradio input[type="checkbox"]:empty ~ label { position: relative; line-height: 2.5em; text-indent: 3.25em; /*margin-top: 2em;*/ cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .funkyradio input[type="radio"]:empty ~ label:before, .funkyradio input[type="checkbox"]:empty ~ label:before { position: absolute; display: block; top: 0; bottom: 0; left: 0; content: ''; width: 2.5em; background: #D1D3D4; border-radius: 3px 0 0 3px; } .funkyradio input[type="radio"]:hover:not(:checked) ~ label, .funkyradio input[type="checkbox"]:hover:not(:checked) ~ label { color: #888; } .funkyradio input[type="radio"]:hover:not(:checked) ~ label:before, .funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before { content: '\2714'; text-indent: .9em; color: #C2C2C2; } .funkyradio input[type="radio"]:checked ~ label, .funkyradio input[type="checkbox"]:checked ~ label { color: #777; } .funkyradio input[type="radio"]:checked ~ label:before, .funkyradio input[type="checkbox"]:checked ~ label:before { content: '\2714'; text-indent: .9em; color: #333; background-color: #ccc; } .funkyradio input[type="radio"]:focus ~ label:before, .funkyradio input[type="checkbox"]:focus ~ label:before { box-shadow: 0 0 0 3px #999; } .funkyradio-pink input[type="radio"]:checked ~ label:before, .funkyradio-pink input[type="checkbox"]:checked ~ label:before { color: #fff; background-color: #e54792; } /* .crt-widget-grid.crt-grid-col4 .crt-grid-post { width: 23% !important; border-radius: 3% !important; margin: 1% !important; } */ /*Main Menu*/ #mainMenuToggle{ display: block; position: relative; padding: 3px 3px 3px 18px; top: 0px; left: 0px; z-index: 3; -webkit-user-select: none; user-select: none; } #mainMenuToggle input { display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; /* hide this */ z-index: 4; /* and place it over the hamburger */ -webkit-touch-callout: none; } /* * Just a quick hamburger */ #mainMenuToggle span { display: block; width: 18px; height: 1px; margin-bottom: 7px; position: relative; background: #000; border-radius: 1px; z-index: 1; transform-origin: 0% 0%; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; } #mainMenuToggle span:nth-last-child(2) { transform-origin: 0% 100%; } /* * Transform all the slices of hamburger * into a crossmark. */ #mainMenuToggle input:checked ~ span { opacity: 1; transform: rotate(45deg) translate( 0.9px, 1.64px); background: #000; } /* * But let's hide the middle one. */ #mainMenuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } /* * Ohyeah and the last one should go the other direction */ #mainMenuToggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate( 0.9px, -1.64px); } /* * Make this absolute positioned * at the top left of the screen */ #mainMenu{ z-index: 2; position: absolute; height: 100vh; margin: 7px 0 0 -50px; padding: 10px 7px 10px 55px; /*width: 100vw;*/ /*overflow: scroll;*/ background: #fff; opacity: 0.98; list-style-type: none; -webkit-font-smoothing: antialiased; /* to stop flickering of text in safari */ transform-origin: 0% 0%; transform: translate(-100%, 0%); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); } #mainMenu li { padding: 5px 30px 5px 20px; font-size: 18px; } #mainMenu hr { border-top: 1px solid #eee; } #mainMenu a { color: #000; text-decoration: none; } /* * And let's slide it in from the left */ #mainMenuToggle input:checked ~ ul { transform: none; } /*User Menu*/ #userMenuToggle{ display: block; position: relative; padding: 0px 0px 0px 52px; top: 0px; left: 0px; z-index: 3; -webkit-user-select: none; user-select: none; } #userMenuToggle input { display: block; width: 100px; height: 45px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; /* hide this */ z-index: 4; /* and place it over the hamburger */ -webkit-touch-callout: none; } /* * Make this absolute positioned * at the top left of the screen */ #userMenu{ z-index: 2; position: absolute; right: -15px; height: 100vh; margin: 7px 0 0 -50px; padding: 10px 7px 10px 5px; /*width: 100vw;*/ /*overflow: scroll;*/ background: #fff; opacity: 0.98; border-right: 1px solid #ccc; list-style-type: none; -webkit-font-smoothing: antialiased; /* to stop flickering of text in safari */ transform-origin: 0% 0%; transform: translate(100%, 0%); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); } #userMenu li { padding: 5px 30px 5px 20px; font-size: 18px; } #userMenu hr { border-top: 1px solid #ddd; } #userMenu a { color: #000; text-decoration: none; } /* * And let's slide it in from the left */ #userMenuToggle input:checked ~ ul { transform: none; } .sub-menu{ display: none; list-style-type: none; padding-inline-start: 10px; } .sub-menu li{ font-size: 16px !important; } .sub-dropdown{ cursor: pointer; border-top: solid 1px #eee; padding-right: 10px !important; } .dropdown-icon{ height: 10px; } .user-content-box{ min-height: 500px; position: relative; display: flex; margin: 0 15% 0 25%; padding-top: 20px; } .user-menu-desktop{ position: absolute; left: -180px; width: 150px; } .user-name-mobile{ font-family: 'made_tommybold'; font-style: italic; } .user-name-desktop{ font-family: 'made_tommyregular'; font-style: italic; } .user-menu { padding-inline-start: 0px; } .user-menu li { padding: 5px 0px 5px 20px; font-size: 16px; list-style-type: none; padding-inline-start: 0px; } .act{ color: var(--pb_pink_01); font-weight: bold; } .user-menu a { color: #000; text-decoration: none; } .user-menu a:hover{ color: var(--pb_pink_01); } .user-menu-item{ border-top: 1px solid #eee; } .user-content{ width: 100%; } .user-table{ font-size: 12px; } .user-table th{ padding: 5px; font-family: 'made_tommyregular'; } .user-table tr{ border-bottom: 1px solid #eee; } .user-table td{ padding: 5px; } .user-table-line { border-bottom: 1px solid var(--pb_pink_01); border-top: 1px solid var(--pb_pink_01); } .swiper-img{ margin-bottom: 15px; width: 100%; } #share{ display: none; } #copy{ display: block; } /* Animated Brand-Slider ------------------------- */ .animated-img{ width: 12vw; max-width: 150px; } .animation-title{ text-align: center; padding: 10px; color: #000; font-size: 2vw; } .animation-title-small{ text-align: center; padding: 10px; color: #000; font-size: 1.6vw; } .block-container{ background: var(--pb_pink_03); padding: 10px 50px; } .block { overflow: hidden; width: 100%; } .animation { width: auto; height: 100px; font-size: 0px; } .animation div { display: inline-block; width: auto; float: none; padding: 0 10px; } @media screen and (max-width: 740px) { h2{ font-size: 1.5rem; } h3{ font-size: 1.4rem; } .mw-600{ padding: 0px; } .main-box{ padding: 10px 0px; } .vcr-box{ margin-bottom: 0px !important; width: 100% !important; } .vct-list{ display: none; } .vct-list-mobile{ display: block; margin: 0px 15px 15px 15px; } .card-voucher { margin: 3px; width: 33%; } .card-voucher .card-header{ padding: .75rem 0; } .card-voucher .card-body{ padding: 1rem 0; } .card-voucher .card-header h4{ font-size: 1rem !important; text-align: center; } .card-voucher .card-body h1{ font-size: 4.5vw !important; margin: 0px; } .card-voucher-type { margin: 3px; width: 50%; } .card-voucher-type .card-header{ padding: .75rem 0; } .card-voucher-type .card-header h4{ font-size: 1.1rem !important; } .card-voucher-type .card-body{ padding: 1rem; font-size: 12px; } .card-voucher-type .card-body h1{ font-size: 5vw !important; margin: 0px; } .vcr-deck{ display: flex !important; margin-bottom: 0px !important; } .right-arrow{ display: block; } .box-hover:hover{ display: none; } .desktop{ display: none; } .mobile{ display: block; } .text-box h1{ font-size: 6vw; } .text-box p{ font-size: 4vw; } #share{ display: block; } #copy{ display: none; } .trennbild-desktop{ display: none; } .trennbild-mobile{ display: block; } .best-of-deskop{ display: none; } .best-of-mobile{ padding-left: 10px; padding-right: 15px; display: block; } .quotes-desktop{ display: none; } .quotes-mobile{ display: block; } .user-table{ width: 100% } .user-menu-desktop{ display: none; } .user-content-box{ margin: 0; padding: 10px; } .quotes{ padding: 0px; } .text-box{ width: 90%; } .animation-title{ font-size: 4vw; } .animation-title-small{ font-size: 4vw; } .block-container{ padding: 10px 20px; } .animated-img{ width: 24vw; } .swiper-title{ font-size: 16px; } .footer-mobile{ display:block; } .footer-desktop{ display:none; } .main-visual-mobile{ display: block; } .main-visual-desktop{ display: none; } .orderform{ margin: 0px 20px; } } /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ /* Carousel base class */ .carousel { margin-bottom: 4rem; } /* Since positioning the image, we need to help out the caption */ .carousel-caption { bottom: 3rem; z-index: 10; } /* Declare heights because of positioning of img element */ .carousel-item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 32rem; } /* MARKETING CONTENT -------------------------------------------------- */ /* Center align the text within the three columns below the carousel */ .marketing .col-lg-4 { margin-top: 2rem; margin-bottom: 1.5rem; text-align: center; } .marketing h2 { font-weight: 400; } .marketing .col-lg-4 p { margin-right: .75rem; margin-left: .75rem; } .bd-placeholder-img { border: 1px solid #eee; } /* Featurettes ------------------------- */ .featurette-divider { margin: 5rem 0; /* Space out the Bootstrap <hr> more */ } /* Thin out the marketing headings */ .featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -.05rem; } /* RESPONSIVE CSS -------------------------------------------------- */ @media (min-width: 40em) { /* Bump up size of carousel content */ .carousel-caption p { margin-bottom: 1.25rem; font-size: 1.25rem; line-height: 1.4; } .featurette-heading { font-size: 50px; } } @media (min-width: 62em) { .featurette-heading { margin-top: 7rem; } } /* Beautyprofil CSS -------------------------------------------------- */ .bp_group_box{ background: rgba(0,0,0,.03); padding-bottom: 10px; } .bp_question_box{ padding: 10px; font-size: 1.1em; } .bp_question_list{ padding: 10px; font-size: 1.1em; } .bp_block_row{ display: flex; } .bp_block { position:relative; width:95%; height:100%; cursor: pointer; } .bp_img{ width: 100%; border-radius: 5%; } .bp_block_border { position:absolute; top: 0px; right: 0px; left: 0px; bottom: 0px; margin: 3%; padding: 5%; } .bp_block_text { position:absolute; right: 0px; left: 0px; bottom: 0px; margin: 3%; margin-bottom: 0px; background: #fff; color:#000; border-radius: 3px; } .bp_active .bp_block_text{ background: var(--pb_pink_01); color:#fff; border: 5% solid #A05175; } .bp_active_view .bp_block_text{ background: #3B4A72; color:#fff; border: 5% solid #A05175; } .bp_block_border:hover { opacity:0.6; } .bp_block_border_inaktiv:hover { opacity:0.6; } .pb_checkbox_container{ padding: 0px 10px; } .pb_checkbox_line{ display: flex; margin-bottom: 5px; font-size: 1.1em; cursor: pointer; } .pb_checkbox_line:hover{ color: #555; } .pb_checkbox_line:hover .pb_checkbox_box{ border: solid 1px #777; } .pb_checkbox_box{ width: 2.2em; height: 2.2em; border-radius: 5px; background-color: #ccc; text-align: center; line-height: 2.2em; border: solid 1px #ccc; } .pb_checked .pb_checkbox_box::after{ content: '\2714'; } .pb_checkbox_box{ color: #ffffff !important; } .pb_checked .pb_checkbox_box{ background-color: var(--pb_pink_01); } .pb_checkbox_text{ padding-left: 10px; line-height: 2.2em; } /* L23 */ .brand-logo{ width: 100%; opacity: 0.5; } .hero-section{ width: 100%; /*background-color: var(--pb_pink_03);*/ /*background-color: #F6F6F6;*/ background-color: #FAFAFA; display: flex; /*border-radius: 15px;*/ } .howto-card{ /*background-color: var(--pb_pink_03);*/ /*background-color: #F6F6F6;*/ background-color: #FAFAFA; width: 100%; } .howto-image{ min-height: 208.88px; } .howto-box{ padding: 15px 15px 0px 15px; background-position: center center; background-repeat: no-repeat; background-size: cover; text-align: center; } .hero-box,.hero-box-dt{ width: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; padding: 50px; display: flex; flex-direction: column; justify-content: center; } .hero-box h1,.hero-box-dt h1{ font-size: 32px; } .hero-image,.hero-image-dt{ min-height: 400px; } .pb-btn-lg-r{ border-radius: 20px; font-size: 20px; padding: 6px 20px; } .banner{ display: none; width: 100%; background-color: #FAFAFA; } .banner-box{ background-position: center center; background-repeat: no-repeat; background-size: cover; padding: 50px; display: flex; flex-direction: column; justify-content: center; } .banner-text{ width: 60%; } .banner-image{ width: 40%; min-height: 346.5px; } .pb-btn-r{ border-radius: 4vw; font-size: 3.5vw; padding: 1.5px 4vw; } @media screen and (max-width: 1050px) { .hero-box h1,.hero-box-dt h1{ font-size: 3.05vw; } .hero-box,.hero-box-dt{ padding: 4.75vw 4.75vw 7vw 4.75vw; } .header-mobile{ display:block; } .header-desktop{ display:none; } .main-content{ margin-top: 58px; } .banner{ display: flex; } .banner-image{ min-height: 32vw; } .banner-box h1{ font-size: 4.5vw; margin-bottom: 2vw; } .banner-box{ padding: 4vw; } } @media screen and (max-width: 740px) { .hero-box h1,.hero-box-dt h1{ font-size: 1.5rem; } .hero-section{ flex-direction: column-reverse; } .hero-box{ text-align: center; } .hero-box-dt{ background-color: #fff; } .hero-image{ min-height: 360px; } .howto-image{ min-height: 256px; } .hero-image-dt{ min-height: 0px; padding: 0px; } .howto-box{ text-align: center; } .hero-container{ padding: 0px 0px 15px 0px; } } @media screen and (max-width: 375px) { .hero-image{ min-height: 270px; } .howto-image{ min-height: 230px; } }