@font-face {font-family: "Appetite"; src: url('../fonts/appetite-pro.ttf') format("truetype");}
@font-face {font-family: "Appetite"; src: url('../fonts/appetite-pro-medium.ttf') format("truetype"); font-weight: bold;}

html{font-size: 100%;}
body{height: 100%; font-size: 100%; font-family: "Verdana", sans-serif; color: #000; overflow-x: hidden;}
h1{font-family: "Appetite", sans-serif; font-size: 6vw; z-index: 2 !important; margin-bottom: 100px}
h1::before{position: absolute; content: ""; z-index: -1; top: 0; left: 0; width: 35%; height: 150%; background: url(../images/tie.png); background-size: contain; background-repeat: no-repeat;}
p{font-size: 1.2vw}
section.bg-pink{background-image: url(../images/woman.png), url(../images/circle.svg); background-repeat: no-repeat, no-repeat; background-position: right top, left bottom; background-size: auto 100%, 100% 35%;}
section div.wrapper{border-top-right-radius: 0 !important; border-bottom-left-radius: 0 !important;}
section div.wrapper img{z-index: 2;}

.bg-pink{background-color: #f11666 !important;}
.text-pink{color: #f11666 !important;}
.btn{font-family: "Appetite", sans-serif;}
.btn:focus, button {box-shadow: none !important;}
.btn:hover{transform: scale(1.1);}

@media (width: 800px) and (height: 600px) {
    
    h1{margin-bottom: 60px;}
    .text-lead{font-size: 1.7vw;}
}

@media (width: 1280px) and (height: 1024px) {
    
    .text-lead{padding-left: 50px !important; padding-right: 70px !important; font-size: 1.2rem;}
}

/* XS */
@media (max-width: 575.98px) {

    body{background-image: url(../images/woman.png); background-repeat: no-repeat; background-position: right top; background-size: 35% auto; overflow-x: hidden; overflow-y: auto;}
    h1{font-size: 2rem; z-index: 2 !important; padding-left: 40px; margin-bottom: 40px;}
    h1::before{width: 100%; height: 150%; background: url(../images/tie.png); background-size: contain; background-repeat: no-repeat;}
    p.text-lead{font-size: 0.85rem;}
    div.row.footer{background-image: url(../images/circle.svg); background-size: contain;}
    .btn:hover{transform: none;}
}

/* SM */
@media (min-width: 576px) and (max-width: 767.98px) {
  
}


/* MD  */
@media (min-width: 768px) and (max-width: 991.98px) {
   
}

/* LG */
@media (min-width: 992px) and (max-width: 1199.98px) {
    
}

/* XL */
@media (min-width: 1200px) and (max-width: 1559.98px) {

}

/* XXL */
@media (min-width: 1600px) {}

/* Minimum resolution */
@media (-webkit-device-pixel-ratio: 1){}

@media (-webkit-device-pixel-ratio: 1.25) {}

@media screen and (prefers-reduced-motion:reduce) {
  .form-control{transition: all 0.3s ease !important;}
  .form-floating > label{transition: all 0.3s ease !important;}
  .btn{transition: all 0.3s ease !important;}
  .fade{transition: all 0.3s ease !important;}
  .collapsing{transition: all 0.3s ease !important;}
  .custom-switch .custom-control-label::after{transition: all 0.3s ease !important;}
  .custom-range::-webkit-slider-thumb{-webkit-transition: all 0.3s ease !important; transition: all 0.3s ease !important;}
  .custom-range::-moz-range-thumb{-moz-transition: all 0.3s ease !important; transition: all 0.3s ease !important;}
  .custom-range::-ms-thumb{-ms-transition: all 0.3s ease !important; transition: all 0.3s ease !important;}
  .custom-control-label::before,
  .custom-file-label,
  .custom-select{transition: all 0.3s ease !important;}
  .badge{transition: all 0.3s ease !important;}
  .progress-bar{transition: all 0.3s ease !important;}
  .progress-bar-animated{-webkit-animation:none; animation:none}
  .modal.fade .modal-dialog{transition: all 0.3s ease !important;}
  .carousel-item{transition: all 0.3s ease !important;}
  .carousel-fade .active.carousel-item-left,
  .carousel-fade .active.carousel-item-right{transition: all 0.3s ease !important;}
  .carousel-control-next,
  .carousel-control-prev{transition: all 0.3s ease !important;}
  .carousel-indicators li{transition: all 0.3s ease !important;}
}