:root{
	--primary-color		  : #9B0C1E;
	--secondary-color		: #035A0C;
	--text-color				: #0D0C0A;
  --black-color		    : #0D0C0A;
  --beige-color				: #FBEBBF;
	--white-color				: #FFFFFF;
  --active-color      : #FFD301;
  --brown-color       :#67430C;
	--title-font				: "DancingScript-Semibold";
  --body-font				  : "OpenSans-Regular";
  --button-font				: "OpenSans-Bold";
  --bold-font				  : "OpenSans-Bold";
}

@font-face {
  font-family: "DancingScript-Semibold";
  src: url(../font/DancingScript-SemiBold.ttf);
}




@font-face {
  font-family: "OpenSans-Regular";
  src: url(../font/OpenSans-Regular.ttf)
}

@font-face {
  font-family: "OpenSans-Bold";
  src: url(../font/OpenSans-Bold.ttf)
}

body{
   font-family: var(--body-font);
   overflow-x: hidden;
}

/* Popup notifications */
#succes-cart{
    position: fixed;
    top:-120px;
    right: calc(50% - 142px);
    background: linear-gradient(62deg, #9B0C1E, #67430C);
    color:white;
    border-radius: 20px;
    padding: 20px 18px;
    z-index: 10000;
    box-shadow: 0 22px 43px -7px rgba(6, 24, 55, 0.2);
    transition: 300ms ease-in-out;
}
#succes-cart.active{
    top:10px;
}
#alert-cart{
    position: fixed;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    background: linear-gradient(62deg, #921b1b, #dc4242);
    color: white;
    border-radius: 20px;
    padding: 20px 18px;
    box-sizing: border-box;
    z-index: 10000;
    box-shadow: 0 0 43px 0 rgb(99, 16, 16);
    transition: 300ms ease-in-out;
}
#alert-cart.active{
    top:10px;
}

.hero{
      background: url(../img/header-img.png) no-repeat center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      padding-top: 50px;
      width: 100%;
      position: relative; /* fontos az ::after pozicionálásához */
      height: 1240px;
}

.hero h1{
  color: var(--white-color);
}

.treasures-of-italy{
      background: url(../img/treasures-of-italy-bg.png) no-repeat center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      padding-top: 150px;
      width: 100%;
}



.wallpaper{
      background: url(../img/blanket-bg.png) no-repeat center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      padding-top: 120px;
      width: 100%;
      height: 1080px;
  }

  .blanket-topbar{
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    z-index: 2000;
    width: 100%;
  }

  .blanket-body{
     display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--white-color);
    border-radius: 30px;
    padding-top: 120px;
  }

  .wallpaper .footer-copyright{
    position: fixed;
    bottom: 0;
    width: 100%;
  }

  .mini-logo{
    width: 60%;
  }

  .blanket-ikon{
    font-size: 40px;
    text-align: center;
  }

  .blanket-cancel{
    color: var(--primary-color);
  }

  .blanket-success{
    color: var(--secondary-color);
  }

  .blanket-tanks{
    color: var(--active-color);
  }

  .cart-contents h5{
    color: var(--black-color);
  }

  .cart-contents .card-body{
    width: 100%;
  }

.introduction{
      padding-top: 80px;
      padding-bottom: 80px;

    }

.hero::after{
      content: ""; /* kötelező az ::after megjelenítéséhez */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('../img/introduction-bg.png'); /* itt jön a háttérkép */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: -1; /* a háttér mögé kerül, ha kell */
      height: 2193px;
      opacity: 0.5;
}

.hero h1{
  padding-top:80px;
}

h1,h2,h3 {
 font-family: var(--title-font);
}

h1{
  font-size: 95px;
  line-height: 1.2em;

}

h2{
 font-size: 48px;
}

h3{
  font-size: 34px;
}


p{
  font-size: 16px;
  font-family: var(--body-font);
  line-height: 2em;
}

.lead{
  font-size: 25px;
}

.logo{
  width: 20%;
}

.img-design{
  border-radius: 10px;
}

.btn{
  text-transform: uppercase;
  border-color: none;
  border-radius: 10px;
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
}

.btn-primary{
  background-color: var(--primary-color);
  padding-right: 30px;
  padding-left: 30px;
  font-family: var(--button-font);
}

.btn-primary:hover{
  background-color: var(--secondary-color);
}

.treasures-of-italy h2{
  color: var(--brown-color);
}

.treasures-of-italy{
  background-color: var(--beige-color);
   padding-top: 80px;
  padding-bottom: 120px;

}

.treasures-of-italy p{
  color: var(--text-color);

}

.italian-dessert{
       background: url(../img/italian-dessert-bg.png) no-repeat center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      padding-top: 120px;
      width: 100%;
      position: relative;
      height: 850px;
}


.italian-dessert::after{
      content: ""; /* kötelező az ::after megjelenítéséhez */
      position: absolute;
      top: 0px;
      left: 0;
      width: 100%;
      background: url('../img/products-bg.png'); /* itt jön a háttérkép */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: -1; /* a háttér mögé kerül, ha kell */
      height: 4000px;
      opacity: 0.5;
}


.italian-dessert h2{
  color: var(--active-color);
}

.product-packages{
  padding-top: 20px;
  padding-bottom: 80px;
}

.products{
  padding-bottom: 80px;
}

.btn-shipping input, .btn-shipping:checked {
  appearance: none;
}
.products h2 {
  color: var(--brown-color);
  padding-bottom: 50px;
  padding-top: 80px;
}
.list-group {
    flex: 1;
}

.list-icon{
  color: var(--brown-color);
}

.products .card-price{
  font-size: 22px;
  color: var(--secondary-color);
  font-family: var(--bold-font);
}

.products .card-title{
  font-size: 30px;
  color: var(--brown-color);
}

.products .card-text, .product-packages .card-subtitle{
  color: var(--text-color);
}

.list-group-item {
    color:var(--text-color);
    background-color: transparent;
    border: none;
    font-size: 15px;
    font-family: var(--body-font);
    display: flex;
    line-height: 1.2em;
}

.fa-solid {
   width: auto !important;
  }

.btn-cart{
  background-color: var(--active-color);
  color: var(--black-color);
  padding-right: 30px;
  padding-left: 30px;
  font-family: var(--button-font);
}

.btn-cart:hover{
  background-color: var(--secondary-color);
  color: var(--white-color);
}

.products .card{
  border-radius: 10px;
  border: solid 1px var(--black-color);
  padding: 15px;
  width: 26rem;
}

.products .card .list-icon{
  font-size: 24px;
  margin-right: 5px;
}

.btn-cancel{
  background-color: var(--primary-color);
  width: 50px;
  height: 50px;
  color: var(--white-color);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
}

.btn-cancel:hover{
  background-color: var(--black-color);
   color: var(--white-color);
}

.cart-contents{
  border-radius: 10px;
  border: solid 1px var(--black-color);
}

.cart-contents h5 {
  font-size: 22px;
}

.cart-contents h3{
   color: var(--brown-color);
 }

.cart-contents .card {
  border: none;
  border-bottom: solid 1px var(--black-color);
  border-radius: 0;
 }




.treasures-of-italy .btn-primary{
  width: 50%;
}


.cart-contents .card-amount, #totalAmount {
  font-size: 20px !important;
  font-family: var(--bold-font);
}

.cart-contents .card-price{
  color: var(--primary-color);
  font-family: var(--bold-font) !important;
 }

.cart-contents .card-title{
  color: var(--secondary-color);
}

.cart-contents  .btn-cancel{
  height: 30px;
  width: 30px;
  font-size: 13px;
}

.card-body{
  padding: 0;
}

.cart-contents img{
  width: 80%;
}

.cart-contents .cart-header{
  border-bottom: solid 1px var(--black-color);
}

.cart-contents h4{
  color: var(--primary-color);
  font-family: var(--bold-font);
}

#totalAmount{
  color: var(--text-color);
  padding-right: 10px;
}

.cart-contents-footer, .cart-header{
  padding: 5px;
}

.btn-minus{
  background-color: var(--primary-color);
  color: var(--white-color);
}

.btn-plus{
  background-color: var(--secondary-color);
  color: var(--white-color);
}

.btn-outline-secondary{
  border-color: var(--black-color);
  font-family: var(--button-font);
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fa-plus, .fa-minus{
    font-size: 12px;

}

.captcha-text{
  margin-left: 15px;
}


.cart-contents input{
   height: 30px;
}

.btn-outline-secondary:hover{
  background-color: var(--black-color);
}

.form-buttons .btn-shipping {
  height: 100%;
}

.form-buttons .col{
  margin-right: -9px;
}

.form-check-input:checked {
  background-color: var(--active-color); /* pl. Bootstrap success */
  border-color: var(--beige-color);
}


.form-check-input:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}


.custom-radio:checked {
    background-color: var(--primary-color) !important;
}





 .form-control.line-input {
      border: none !important;
      border-bottom: 1px solid var(--white-color) !important;
      border-radius: 0;
      box-shadow: none;
      color: var(--beige-color);
    }

    .form-control.line-input:focus {
      border-color: var(--white-color); /* Bootstrap kék */
      box-shadow: none;
    }

   .cart-contents .form-control:focus {
      background-color: var(--beige-color) !important;

    }

    .btn-outline-secondary{
      padding: 5px;
    }

    .btn-cancel{
      margin-right: 15px;
    }



    .btn-shipping{
      background-color: var(--active-color);
      color: var(--black-color);
      font-size: 12px;
  }

    .btn-shipping:hover, .btn-order:hover, .btn-shipping.active{
      background-color: var(--black-color);
      color: var(--white-color);
    }

    .text-black{
      color: var(--black-color);
    }

    .text-green{
      color: var(--secondary-color);
    }

    .text-red{
      color: var(--primary-color);
    }

    .order-form-box h4{
      font-family: var(--bold-font);
      color: var(--white-color);
      text-transform: uppercase;
      font-size: 15px;
      padding-bottom: 10px;
      padding-top: 10px;
      margin-left:15px;
    }

    .order-form-box{
      background-color: var(--secondary-color);
      border-radius: 10px;
      padding-bottom: 60px;
      padding-left: 15px;
      padding-right: 15px;
    }

    .order-form-box .form-box{
      margin-left:15px;
    }

    .form-control{
      background-color: transparent;
    }

    ::placeholder{
      color: var(--beige-color) !important;
      font-size: 13px;
    }

    .btn-order{
      background-color: var(--active-color);
      color: var(--black-color);
      font-family: var(--bold-font);
    }

    .form-control:focus{
       background-color: var(--black-color);
    }

    .order-form-box-sections{
      padding-top: 80px;
    }

    .footer-copyright{
      background-color: var(--black-color);
    }

    .btn-order:not(.new){
      width: 30%;
    }

    .dont-forget{
      background-color: var(--beige-color);
      padding-top: 80px;
      padding-bottom: 80px;
     }

    .dont-forget h2{
      color: var(--brown-color);
    }

    .dont-forget{
      background: url(../img/dont-forget-bg.png) no-repeat center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      height: 850px;
      padding-top: 120px;
      width: 100%;
      position: relative;
    }

    .dont-forget::after{
      content: ""; /* kötelező az ::after megjelenítéséhez */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('../img/package-cart.png'); /* itt jön a háttérkép */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: -1; /* a háttér mögé kerül, ha kell */
      height: 2195px;
      opacity: 0.5;
}



.dont-forget h2{
  padding-bottom: 20px;
}


    hr{
      color: var(--white-color);
    }

    .cart-contents {
       background-color: white;
    }

   .btn-cancel {
    margin-left: 15px;
}

.text-red{
  color: var(--primary-color);
}

.subpage-list h3{
  color: var(--brown-color);
}

.subpage-list p{
  color: var(--text-color);
}

.subpage-list .list-group-item{
  color: var(--text-color);
}

.subpage{
  padding-top: 80px;
}

.subpage h1 {
   padding-bottom: 30px;
    padding-top: 60px;
}

.subpage .list-icon{
  color: var(--primary-color);
  margin-right: 10px;
}

.subpage h4{
  color: var(--brown-color);
  font-size: 20px;
  font-family: var(--bold-font);
}

.subpage b{
  margin-right: 10px;
}

table{
  border: solid 1px var(--black-color);
  border-collapse: collapse;
}

th,td{
   border: solid 1px var(--black-color);
}



@media only screen and (max-width: 1100px) {
  .btn-primary{
    width: 100%;
  }

  .form-buttons .col {
    width: 48%;
    margin-bottom: 10px;
    font-size: 11px;
   }

   .treasures-of-italy .btn-primary {
    width: 80%;
   }

   .hero{
    height: 1300px;
   }



}


@media only screen and (max-width: 800px) {
  body{
    overflow-x: hidden;
  }
  h1{
    font-size: 40px;
  }

  .logo{
    width: 50%;
  }

  .lead{
    font-size: 18px;
  }

  .container, .row{
    padding-right: 20px;
    padding-left: 20px;
  }

  .pistachio-chocolate{
    text-align: center;
    width: 80%;
  }

  .btn-primary{
    width: 100%;
  }

  .treasures-of-italy h2{
    padding-top: 20px;
    padding-bottom: 15px;
  }

  .italian-chocolate{
    margin-top: 15px;
  }


.treasures-of-italy .btn-primary{
  width: 100%;
}

.card{
  margin-top: 20px;
  margin-bottom: 20px;
}


.btn-order{
  width: 100%;
}

.order-form-box{
  margin-top: 35px;
}

.cart-contents h4{
  font-size: 20px;
 }

.cart-mobil{
  flex-direction: column;
}

.cart-contents{
  text-align: center;
}

.cart-contents img{
  width: 80%;
}

.cart-contents .card-body{
  padding: 15px;
}

.cart-contents .card-amount{
  font-size: 20px !important;
}

.order-form-box{
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 50px;
}

.hero{
  height: 500px;
  text-align: center;
  background-position: right;
}



.order-form-box{
  width: 100%;
}

.hero::after{
    height: 1331px;
    background-position: left;
}

.dont-forget::after{
   background-position: right;
}

.italian-dessert::after, .wallpaper{
  background-position: right;
}

.italian-dessert, .dont-forget{
  padding-bottom: 60px;
  height: 1000px;
}

.form-buttons .col {
    width: 100%;
    font-size: 13px;
  }

  .hero h1{
    padding-top: 30px;
    color: var(--beige-color);
  }

  .subpage .mobil-flex .list-group-item{
  flex-direction: column;
 }

 .subpage b{
    margin-right: 0;
 }

 .subpage .list-icon {
    color: var(--primary-color);
    margin-right: 10px;
    justify-content: start;
    display: flex;
    position: relative;
    left: -23px;
    top: 16px;
}

.subpage .list-group-item {
  line-height: 1.3em;
}

.subpage h3{
  font-size: 28px;
}

.mobil-list{
   display: flex;
   flex-direction: column;
}

.btn-order:not(.new) {
    width: 100%;
}

.subpage table{
  width: 100%;
}

.dont-forget::after{
   height: 3000px;
}

}