:root {
  /* CSS HEX */
  --honeydew: #f1fceeff;
  --raisin-black: #171a21ff;
  --cadet: #617073ff;
  --cultured: #D9EEFD;
  --maximum-blue-purple: #afb3f7ff;
  --hdred: #c83737;
  --hdred: darkorange;
}

:root,html,body { font-family: 'Fira Sans Extra Condensed', sans-serif };
--bs-font-sans-serif: 'Fira Sans Extra Condensed'!important;


body {
  background-image: url("../img/ladauze_bg.svg");
  background-size: 325%;
  background-position: 0% 70%; 
  z-index: 1;
  background-attachment: fixed;
}

.maincontent {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  margin-bottom:  0;
}


.colorred {
  color: red;
  font-weight: 700;
}

.cardwithsvg {
  overflow: hidden;
  z-index: 1;
  background-image: url("../img/ladauze_bg.svg");
  /*background-color: #ffffff99;*/
  background-size: 55%;
  background-position: bottom right;
  background-position: 135% 100%; 
  background-repeat: no-repeat;
  /*padding: 2%;*/
  /*filter: grayscale(70%);*/
  /*filter: contrast(99%);*/
}


@keyframes svgactive {
  from {
    background-size: 55%;
  }

  to {
    background-size: 100%;
  }
}

@keyframes btnactive {
  from {
    border-radius: 20px;
  }

  to {
    border-radius: 10px;
  }
}

.cardwithsvg {
  border-radius: 2%;
}

.cardwithsvg:hover {
  filter: grayscale(0%);
  /*filter:drop-shadow(1px 1px 1px black);*/
  /*filter:hue-rotate(210deg); // sepia(60%);*/
  /*filter: grayscale(100%);*/
  /*background-size: 39%;*/
  animation-name: svgactive;
  animation-duration: 0.5s;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-timing-function: ease-out;
  /*cursor: pointer*/
}

.cardwithsvg .moreinfo:hover {
  animation-name: btnactive;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in;
}

.cardwithsvg .btn,
.modal-footer .btn {
  font-size: 100%;
  font-weight: 600;
  padding-left: 3%;
  padding-right: 3%;

}

.cardwithsvg .card-text{
  font-size: 1.1rem;
  line-height: 1.8rem;
  opacity: 1;
}

.cardwithsvg .badge {
  font-size:  65%;
}

.cardwithsvg .card-title {
  font-size: 2.4rem;
  font-weight: 800;
}

.imgintxt {
  vertical-align: baseline;
  height: 200px;
}

.smallimgintxt {
  vertical-align: baseline;
  height: 50px;
}

.btn-red,
.btn-red:hover {
  color: white;
  background-color: #ff7d1f;
}

.btn {
  border: none;
  box-shadow: none !important;
}

.svgiconholder {
  position: fixed;
  z-index: 9999;
}
#feedbackModal {
  z-index: 99991;
}

.svgicon {
  width: 40%;
  vertical-align: middle;
}

.svgiconsmall {
  width: 30%;
  vertical-align: middle;
}

.rfstitle {
  margin-top: 8px;
  margin-bottom: 2px;
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 1.2;
  color: #115060;
  font-size: 2rem;
  text-shadow: 0.8px 0.8px 1px white;
}

@media (max-width: 1200px) {
  .rfstitle {
    font-size: calc(1rem + 0.5vw);
  }
}

.nowrap,
.custom-control-label {
  white-space: nowrap;
}

.custom-control-label {
  padding-top: 2px;
}

.subtitle {
  font-size: 1.6em;
  padding-top: 0;
  opacity: 0.8;
}

.btn.btn-warning {
  background-color: #ff7d1f;
  color: white;
  position: relative;
  right: 0;
  left: auto;
}

.badge {
  /*opacity: 0.5;*/
  background-color: var(--bs-gray-500);
  /*background : linear-gradient(90deg, var(--bs-gray-500) 0%, var(--bs-gray-800) 100%);*/
}
.badge.Scaleway { background-color: #7b047b; }
.badge.Cloudflare { background-color: #530d53; }
.badge.Hetzner { background-color: #00cafd; }
.badge.Edge { background-color: #ce00ce; }
.badge.PayPal { background-color: #530d53; }
.badge.AI { background-color: #8a06f6; }
.badge.Bun { color: black;background-color: rgb(249 241 225) }

.badge.Backoffice { background-color: #4a45ca }
.badge.Bootstrap { background-color: #322f88 }
.badge.CSS { background-color: #e38e6c }
.badge.CMS { background-color: #bb7559 }
.badge.Dashboard { background-color: lightsalmon; }
.badge.Forms { background-color: #1ce6c0; }
.badge.Hosting { background-color: #17bd9e; }
.badge.HTML { background-color: #11806b; }
.badge.Headless { background-color: lightsalmon; }
.badge.Invoicing { background-color: #5550ea }
.badge.Images { background-color: #5550ea }
.badge.Jamstack { background-color: #5550ea }
.badge.Javascript { background-color: purple }
.badge.Maps { background-color: blue }
.badge.Multilanguage { background-color: black }
.badge.Nodejs { background-color: red }
.badge.PHP { background-color: red }
.badge.SEO { background-color: cyan; color: black}
.badge.Serverless { background-color: #400080 }
.badge.Usability { background-color: teal;}
.badge.Webcomponents { background-color: #ff7d1f }
.badge.Webscraping { background-color: #ff7d1f }
.badge.webworkers { background-color: #371137; }
.badge.WooCommerce { background-color: lightcoral; }
.badge.WordPress { background-color: yellow; color: black }

  

.lld {
  height: 20px;
}
.ftbdx {
  display: block;
  max-height: 100px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  /*filter: grayscale(100%); */
  /*opacity: 0.4;*/
}


@media (max-width: 600px) {
  .container, .container-fluid, .jumbotron {
    padding-left: 0;
    padding-right: 0;
  }

  .varih1 {
    font-size: calc(3.5rem);
    font-weight: 600;
  }

  .varih3 {
    font-size: calc(1.75rem);
  }

      .st4 {
        font-size: 100%;
        margin-left: 2%;
        margin-right: 2%;
        line-height: 140%;
      }
}

@media (min-width: 601px) {
  .varih1 {
    font-size: calc(4rem + 1.2vw);
    font-weight: 700;
  }

  .varih3 {
    font-size: calc(3rem + 1.2vw);
  }

      .st4 {
        font-size: 110%;
        margin-left: 10%;
        margin-right: 10%;
        line-height: 150%;
      }
}

@media (min-width: 1000px) {

  .dtfixed-top {
    /*position: fixed;*/
    /*top: 0;*/
    /*right: 0;*/
    /*left: 0;*/
    /*z-index: 1030;*/

    /*max-width: 100%;*/
    /*width: 100%;*/
  }

  .st4 {
        font-size: 130%;
        margin-left: 20%;
        margin-right: 20%;
        line-height: 150%;
  }

  .btn-flg {
    padding: 0.5rem 1rem;
    font-size: 1.171875rem;
    line-height: 1.5;
    border-radius: 0px;

  }


  .varih1 {
    font-size: calc(6rem + 2.2vw);
    font-weight: 700;
  }

  .varih3 {
    font-size: calc(1rem + 1.2vw);
  }

  .ctabtns .btn {
    margin-left: 5px;
    margin-right: 5px;
  }

  .ctabtns a, .ctabtns summary {
    width: 170px;
  }
}

/* logos */


#msg2usert small {
  font-size: 70%
}

#msg2usert table {
  line-height: 1
}

#logos img {
  max-width: 150px;
  max-height: 90px;
  display: flex;
  padding: 20px;
  filter: grayscale(100%);
}
#logos img:hover {
  filter: none !important;
}

@media (max-width: 400px) {
  #logos img {
    max-width: 150px;
    max-height: 80px;
    display: flex;
    padding: 10px;
    filter: grayscale(100%);
  }
 
}



@keyframes rotate360 {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}

svg.icon {
  height: 25px;
  width: 80px;
}