.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }


      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }




      .containerr{
        width: 100%;
        height: auto;
        position: relative;
        text-align: center;
      }


      
      .imagine{
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: 120px!important;
        width: auto;
        padding-bottom: 50px;
      }

      .row{
        display: flex;
        flex-direction:row;
      }

      .column{
        display: flex;
        flex-direction: column;
        width: 33% !important;
        height: auto;
      }



      .flip-card {
        background-color: transparent;
        width: 300px;
        height: 300px;
        perspective: 1000px;
        padding: 20px;
        margin-left: 4% !important;
      }
      
      .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.6s;
        transform-style: preserve-3d;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
      }
      
      .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
      }
    
      .flip-card-front, .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
      }
      
      .flip-card-front {
        background-color: #ffffff;
        color: black;
      }
      
      .flip-card-back {
        background-color: #abbcd6!important;
        color: white;
        transform: rotateY(180deg);
      }

      .product{
        height: 260px;
      }

      .btn{
        background-color: rgb(55, 112, 197);
        border-color: rgb(55, 112, 197);
        border-radius: 25px;
        color: white!important;

      }

      .btn:hover{
        background-color: rgb(150, 172, 212);
        border-color: rgb(117, 188, 255);
        color: black;
      }

      a{
        color: rgb(140, 114, 204)!important;
      }

      .covery{
        position: relative;
        background-size: cover;
        width: 100%!important;
        height: auto;
        -webkit-filter: grayscale(100%);    
      }

      .rowie{
        display: flex;
        flex-direction: row;
      }

      .columnie{
        display: flex;
        flex-direction: column;
      }

      .uno{
        width: 40%;
      }

      .dos{
        width: 60%;
        margin: auto;
        width: 50%;
      }

      .flip-card2 {
        background-color: transparent;
        width: 390px;
        height: 566px;
        perspective: 1000px;
        padding: 20px;
      }

      .product2{
        height: 100%;
        width: auto;
      }

      .product3{
        height: 100%;
      }

      .flip-card3 {
        background-color: none;
        width: 700px;
        height: 400px;
        perspective: 1000px;
        padding: 8px;
        margin: auto;
        width: 100%;
      }

      .character{
        margin: auto;
        width: 95%;
        padding: 10px;
      }

      .textie{
        color: white!important;
      }

      .flippyback{
        margin-top: 20%;
      }

      .portrait{
        width: 80%;
        height: auto;
      }

      .halfie{
        width: 50%;
        padding: 10px;
      }




    
    .item1 {
        background-image: url(../img/quer1.jpeg);
        background-repeat:  no-repeat !important;
        background-size: auto;
        width: 100%!important;
        grid-area: portfolio1;
    }
    
    .item2 {
      background-image: url(../img/hochkant1.jpeg);
      background-repeat: no-repeat !important;
      background-size: auto;
      width: 100%!important;
      height: auto;
      grid-area: podcast;
    }
    
    .item3 {
      background-image: url(../img/quer2.JPG);
      background-repeat:  no-repeat !important;
      background-size: contain;
      max-width: 100%!important;
      grid-area: menu;
    }
    
    .item4 {
      background-image: url(../img/hochkant2.jpeg);
      background-repeat:  no-repeat !important;
      background-size: auto;
      width: 100%!important;        
      grid-area: portfolio2;
    }
    
    .item5 {
      background-image: url(../img/quer3.jpg);
      background-repeat:  no-repeat !important;
      background-size: auto;
      width: 100%!important;        
      grid-area: wordpress;
      overflow: hidden;
    }

    .grid-container>div {
        padding: 20px 0;
        font-size: 30px;
        display: flex;
        justify-content: center;
        /* vertical align*/
        align-items: center;
        /* horizontal align*/
      height: auto;
      width: 100%!important;
    }
    
  /* Medium devices (landscape tablets, 768px and up) */
  @media (min-width: 768px) {

    .grid-container {
    display: grid;
    grid-template-areas: 
    'podcast'  'portfolio1' 
    'wordpress' 'portfolio2' 
    'menu';

        gap: 10px;
        overflow: hidden;
  }
  }

    /* Small devices (portrait tablets and large phones, 600px and up) */
  @media (min-width: 400px) {
  .grid-container {
        display: grid;
        grid-template-areas: 
  'menu'
  'podcast'  'portfolio1' 
  'wordpress' 'portfolio2'; 
  
        gap: 10px;
        padding: 10px;
    }
  }

  /* Large devices (laptops/desktops, 992px and up) */
  @media only screen and (min-width: 992px) {       
    .grid-container {
      display: grid;
      grid-template-areas: 'podcast portfolio1 portfolio1 portfolio1 portfolio1' 'podcast menu menu portfolio2 portfolio2' 'wordpress wordpress wordpress portfolio2 portfolio2';
      gap: 10px;
      padding: 10px;
      width: 100%;
      height: 1000px;
    }
  }


  .colummne{
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .image{
    width: 80%;
    height: auto;
  }