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;
    }

  }