/*
Theme Name: Agency Child
Template: agency-base-1.0.0
Description: Child Theme von Agency Base
Author: MOLECO GmbH
Version: 1.0
*/

:root{
    --white:    #ffffff;
    --brsm:     10px;
    --brmd:     20px;
    --brlg:     30px;
    --brxl:     50px;
}

/* Global */
body, html, * {
  font-size: 19px;
  font-family: 'Raleway';
  font-weight: 400;
}

h1{
  font-size:450%;
  font-family: 'Bodoni Moda';
  font-weight:400;
  line-height: 1;
}
h2{
  font-size:265%;
  font-family: 'Bodoni Moda';
  font-weight:400;
  line-height: 1;
}
h3{
  font-size:150%;
  font-weight:400;
  line-height: 1.4;
}
.headline{
  margin:15px 0 25px;
}
.topline{
  position:relative;
  color:var(--brand-primary-color);
  font-size: 135%;
  padding-left:125px;
  font-weight:500;
}
.topline:before{
  content:'';
  width:100px;
  height:1px;
  background:var(--brand-primary-color);
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
}

.btn.secondary{
  width:max-content;
  border-radius: var(--brlg);
  background-color: var(--brand-secondary-color);
  color:var(--brand-secondary-color-text);
  transition: all ease .3s;
  padding: 8px 45px 10px;
  font-weight:600;
  font-size:100%;
}
.btn.secondary:hover{
  background-color: var(--brand-secondary-color-hover);
  transition: all ease .3s;
}

.email,
.address,
.phone{
  position: relative;
  display:block;
  padding-left: 35px;
  margin-bottom:10px;
}
.email::before{
  content: '';
  position: absolute;
  background: url('assets/icons/email.svg');
  background-size: 100%;
  background-repeat: no-repeat;
  height: 15px;
  width: 20px;
  display: block;
  left: 0;
  top: 7px;
}
.phone::before{
  content: '';
  position: absolute;
  background: url('assets/icons/phone.svg');
  background-size: 100%;
  background-repeat: no-repeat;
  height: 18px;
  width: 18px;
  display: block;
  left: 0;
  top: 7px;
}
.address::before{
  content: '';
  position: absolute;
  background: url('assets/icons/address.svg');
  background-size: 100%;
  background-repeat: no-repeat;
  height: 25px;
  width: 18px;
  display: block;
  left: 0;
  top: 4px;
}
.container{
  max-width:1640px;
}

.fancybox-overlay{
  background:rgba(0,0,0,0.8);
}



/* RESPONSIVE */

@media(max-width:1480px){
  h1{
    font-size:400%;
  }
  h2{
    font-size:225%;
  }
  h3{
    font-size:125%;
  }
}

@media(max-width:1199px){
  h1{
    font-size:300%;
  }
  h2{
    font-size:175%;
  }
  h3{
    font-size:125%;
  }
  .topline{
    font-size:110%;
    padding-left:35px;
  }
  .topline::before{
    width:30px;
  }
}

@media(max-width:991px){

  .wrapper{
    margin-top:100px;
  }

}

@media(max-width:601px){
  h1{
    font-size:200%;
  }
  h2{
    font-size:125%;
  }
  h3{
    font-size:100%;
  }

  #friseur, 
  #kosmetik,
  #wimpern,
  #handspa,
  #fusspflege{
    margin-top:-125px;
    padding-top:125px;
  }

}

/*  */
/*  */
/*  */
/*  */
/*  */
/*  */
/*  */