@font-face {
    font-family: 'champagne__limousinesbold';
    src: url('champagne__limousines_bold-webfont.woff2') format('woff2'),
         url('champagne__limousines_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'champagne__limousinesitalic';
    src: url('champagne__limousines_italic-webfont.woff2') format('woff2'),
         url('champagne__limousines_italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'champagne__limousinesregular';
    src: url('champagne__limousines-webfont.woff2') format('woff2'),
         url('champagne__limousines-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font family: "Brush Script MT";
  src: url('brush script mt kursiv.ttf'),
       url('BRUSHCSI.tff')
}

@font-face {
  font-family: "RageItalic";
  src: url("fonts/RAGE.woff") format("woff"), /* Modern Browsers */
       url("fonts/RAGE.woff2") format("woff2"); /* Modern Browsers */
  /*font-weight: normal;
  font-style: nomal;*/
}


* {font-family: "champagne__limousinesregular", "champagne__limousinesBdIt", "champagne__limousinesbold", "champagne__limousinesitalic" !important};

html, body {font-family: "champagne__limousinesregular", "champagne__limousinesBdIt", "champagne__limousinesbold", "champagne__limousinesitalic" !important};

* {
  box-sizing: border-box;
  }

  .easywear {
    display: block;
  }

@media screen and (min-width: 768px) {

  .top {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:  ". cart"
                          "logo contact"
                          "logo bname"
                          "menu menu";
    background-color: white;
    background-color: white;

    width: 99%;
    border-radius: 20px;
    border-color: lightgrey;
    border-style: inset;
    }

    .logo {
     grid-area: logo;
     padding-top: 1rem;
     justify-self: start;
    }

    .logo img {
      display: block;
      max-width: 100%;
      margin-top: 1rem;
    }

    .name {
      grid-area: bname;
      margin-left: -2.5rem;
      margin-bottom: 2.5rem;
      font-size: 2rem;
    }

    .name>h1 {
      text-align: left;
      padding-top: 1rem;
    }

    .ew.h5 {
      font-size: 16px;
    }

    .ewname {
      grid-area: bname;


    }

    .ewname>h1 {
      font-size: 84px;
      margin-left: -3rem;
      font-weight: 200;
      font-style: normal;
      font-family: "RAGE";
      text-align: left;
    }

    .shopping-cart {
      display: none;
      grid-area: cart;
      text-align: right;
      padding-right: 2rem;
    }

    #shopping-cart img {
      height: 150px;;
      width: auto;
    }

    .checkout-grid {
      display: none;
    }

    .topnav {
      grid-area: menu;
    }

    .contact-container {
      grid-area: contact;
      display: flex;
      justify-content: space-around;
      width: 70%;
      padding-top: 30px;
      justify-self: center;
    }

    .contact-container p {
      display: block;
    }

    .whatsapp {
      display: none;
      width: 45px;
      height: 45px;

    }

    .whatsapp img {
      width: 30px;
      height: 30px;

    }

    .cellphone {

      display: none;
    }

    .cellphone img {
      width: 30px;
      height: 30px;

    }

    .cellphone span {
      margin-left: 10px;
    }

    .cellphonenr {
      display: flex;
    }

    .cellphonenr img {

      width: 30px;
      height: 30px;
      margin-right: 10px;

    }

    .cellphonenr p {
      font-size: 15px;
      margin-top: 0;
    }

    .email {
      display: flex;
    }

    .email img {
      width: 40px;
      height: 25px;

      margin-right: 10px;
    }

    .email p {
      color: black;
      font-size: 20px;
      margin-top: 0;
    }

    .instagram {
      display: flex;

    }

    .instagram p {
      fontsize: 25px;
      margin-left: 10px;
      padding-top: 5px;
    }

    .facebook {
      display: flex;

    }

    .facebook p {
      fontsize: 25px;
      margin-left: 10px;
      padding-top: 5px;
    }


  .banner {
    /*background-color: #bdbdbd;*/
    display: block;
    position: relative;
    margin: 10px auto 15px auto;
    height: 600px;
    width: auto;
    border-radius: 20px;
    background-color: white;
    box-shadow: 5px 10px 1px grey;
    border-radius: 20px;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .bname {
    position: absolute;
    z-index: 999;
    width: 30%;
    left: 35%
  }

  .bname>h1 {

    font-size: 50px;
    /*text-shadow: 3px 3px grey;*/
    font-weight: 200;
    font-style: normal;
  }

  #banner-credit {
    position: absolute;
    bottom: 3px;
    left: 10px;
    color: white;
  }

  .main-slideshow {
     display: block;
     max-width: 100%;
  }

  .slideshow {
    display: none;
    max-width: 100%;
  }

  .mySlides {
    display: block;
   border-radius: 20px;
   justify-self: center;
   margin-top: 2rem;
   margin-left: auto;
   margin-right: auto;
   width: 70%;
  }

  .nav-strip img {
    width: 30%;
  }

  .header-text {
    grid-area: name;
    padding-top: 0;
    margin-left: -4rem;
    font-size: 0.7em;
    padding-top: 1rem;
  }

  .header-text>h1 {
    font-size: 5em;
    padding-top: 2rem;
    text-align: left;
    padding-left: 7rem;
  }

  .top-strip{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    height: 300px;
    width: auto;
    grid-gap: 10px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;;
  }

  .top-strip>img {
    display: inline-block;
    max-width: 100%;
    width: auto;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
  }

  .measurements {
    display: none;
    /*position: absolute;
    top: 0;
    left: 0;*/
    width: 60% !important;
    background-color: lightgrey;
    border: solid black;
    z-index: 999;
  }

  .corona {
    display: block;
    grid-area: corona;
    text-align: center;
    /*padding-bottom: 20px;
    padding-left: 10px;*/
    padding-top: 5px;
    padding-right: 10px;
  }

  div.corona  img {
    max-width: 100% !important;
  }

  .callout-button {
    height: 3rem;
  }

  .index-images {
    display: grid;
    position: relative;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px;

    align-items: center;

  }

  .index-images>img {


    justify-self: center;
  }

  .index-images-easy {
    display: grid;
    position: relative;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;

    align-items: center;

  }

  .index-images-easy>img {


    justify-self: center;
  }

  .specs {
    padding-bottom: 1rem;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
  }

  .specs>tbody {
  width: 60%;
  }




  #index-suvahn {
    position: absolute;
    bottom: 2px;
    left: 7.5%;
    text-align: center;
  }

  #index-leiere {
    position: absolute;
    bottom: 3px;
    color: white;
    left: 40%;
  }

  #danelle {
    margin-top: -310px;
    padding-top: 0;
  }

  .heading {
    font-size: 48px;
    padding: 30px;
    font-family: "champagne__limousinesregular";
    text-align: center;
    box-shadow: 5px 10px 5px grey;
    }

  .index-body-grid {
     padding-top: 0;
  }

  .index-intro {
   text-align: justify;
   padding: 0 1rem;
  }

  .index-main-text {
   padding: 0 1rem;
   position: relative;
   overflow: visible;
  }

  .main-body {
    font-size: 20px;
    padding-top: 10px;
  }


  .main-body {
    padding: 30px;
  }

  .main-body-lana {
    display: block;

    padding: 20px;
  }

  .main-body-lana-about {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "lanaimg lanatxt";

    padding: 20px;
  }

  .lanatxt {
    grid-area: lanatxt;
    align-self: center;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 16px;
  }

  .lana-profile {
    margin-left: 0;
    grid-area: lanaimg;
  }

  .lana-profile > img {
     max-width: 80%;
     text-align: center;
  }

  .signature {
   margin-left: 1rem;
   margin-top: 1rem;
   width: 20% !important;
  }

  .callout {
    display: flex;
    justify-content: center;
    flex-direction: row;
  }

  .callout-form {
    margin-right: 10px;
  }

  #scroll {
    display: flex;
    justify-content: flex-end;
    position: sticky;
    top: 90%;
    right: 0px;
    z-index: 999;
    opacity: 0.5;

  }

  #scroll a {

  }

  #scroll img {
    display: block;
  }

  .tooltiptext {
    visibility: show;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
 }

  #scroll:hover .tooltiptext {
    visibility: visible;
  }

  .process-banner {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   grid-gap: 5px;
   text-align: center;
  }



  .process-banner > div > img {
   justify-self: center;
   border-radius: 20px;
   padding: 5px 0;
  }

  .process-img {
    display: inline-block;
  }

  .process-signature {
   width: 15% !important;
  }

  .process-text {
   text-align: justify;
   padding: 1rem 1rem;
  }

  .process-text > ul > li {
  }

  .process-text-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }

  .corona-img {
    width: 80%;
    padding-top: 5rem;
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto;
  }

  .wedding-grid {
    display: grid;
    position: relative;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
     "intro intro intro"
     ". image review"
     "txt txt txt";
   }

  .wedding-intro {
    grid-area: intro;
  }

  .wedding-img {
    grid-area: image;
  }

  .review {
    grid-area: review;
  }

  .wedding-txt {
    grid-area: txt;
  }

  .forsale-descr-grid {
   display: grid;
   grid-template-columns: 1fr;
   padding: 0 1rem 1rem 1rem;
  }

  .forsale-descr-grid p {
   padding: 0 1rem;
   /*text-align: justify;*/
  }

#pseudotop2 {
  display: block;
  text-align: center;
  background-color: lightgrey;
}

  #navigate-styles {
    display: none;
  }

  .nav-container {
    display: grid;
    grid-template-columns: repeat(4, 300px);
    justify-content: center;
    position: relative;
    padding-bottom: 1rem;
    grid-gap: 0 1rem;
    width: 80%;
    margin-left: 5%;
    margin-left: auto;
    margin-right: auto;
    }

  .nav-container img {
    height: 250px;
    width: auto;
  }

  #nav-bar {
    display: block;
  }

/*
    .forsale-dresses-grid img {
      height: 250px !important;
      width: auto !important;
    }
*/

    .forsale-dresses-grid2 {
      display: grid;
      grid-template-columns: repeat(3, 1fr) ;
      justify-items: center;
      text-align: center;
      position: relative;
      padding-bottom: 1rem;
      grid-gap: 3rem 1rem;
      }

      .forsale-dresses-grid2 img {
        /*height: 250px !important;*/
        /*width: 100%;*/
      }

    .forsale-dress-grid {
     display: grid;
     position: relative;
     grid-template-columns: 1fr 1fr;
     grid-template-areas:
     "items table";
     grid-gap: 0 2rem;
    }

/*
    .forsale-img {
      grid-area: items;
    }
*/
    .mySlides {
      width: 100%;
    }

    .nav {
      display: inline-block;
      cursor: pointer;
    }

    #pants-img {
      height: 450px;
      width: auto;
      margin-left: auto;
      margin-right: auto;
    }

    .model {
      width: 83%;
      display: block:block;
      margin-left: auto;
      margin-right: auto;
    }

    .models {
      border-radius: 10px;
      width: 100%;
      margin-bottom: 10px;
      border: solid black;
    }

    .modelsx {
      border-radius: 10px;
      width: 86% !important;
      margin-bottom: 10px;
      border: solid black;
    }


    .models2 {
      max-width: 100%;
      border-radius: 10px;
      border: solid black;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    .models3 {
      width: 70% !important;
      border-radius: 10px;
      border: solid black;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 10px;
    }

    #fabric-select2 {
      border-radius: 10px;
    }

    .reviews-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      justify-content: center;
      grid-gap: 1rem;
    }

    .review-form {
    padding-left: 40%;
    }

    .gallery-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     justify-items: center;
     text-align: center;
     grid-row-gap: 3rem;
     padding-bottom: 1rem;
     padding-top: 1rem;
     width: 100%;
    }

    #suvahn {

        position: absolute;
        bottom: 40px;
        left: 35px;
    }

    #boho {
      width: 84% !important;
    }

}

/***************************************************************************/
@media screen and (min-width: 992px) {

      .forsale-dress-grid {
        grid-template-areas: 'style table'
                            'strip strip';
      }

      .style {
        grid-area: style;
      }

      .bottom-strip {
        grid-area: strip;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-left: 0;
        text-align: center;
      }

      .bottom-strip img {
        width: 100%;
      }

      .table {
        grid-area: table;
      }



}
/***************************************************************************/
    @media screen and (min-width: 1234px) {

      .topnav {
       grid-area: menu;
       justify-self: end !important;
       align-self: end !important;
       padding-right: 5px;
       }

       .topnav a {
         display: inline-block;
        /*padding: 0 0.6rem;*/
        font-size: 24px;
        padding-left: 5px;
        border-box: 5px 5px 5px lightgrey;
        margin-right: 10px;
        color: black;
      }

      .topnav .icon {
        display: none;
     }

     .topnav a {

      padding: 0 2rem;
      font-size: 24px;
      text-decoration: none;
      border-radius: 5px;
      margin-right: 15px;
      color: black;
      box-shadow: 5px 5px 2px grey;
     }

     /* Change the color of links on hover */
     .topnav a:hover {
      background-color: #c9d4cc;;
      color: black;
     }

     /* Add an active class to highlight the current page */
     .topnav a.active {
      background-color: black;
      color: white;
     }

     #navigate-styles {
       display: none;
     }

      .nav-button {
        display: block;

      }

     .prints {
       display: grid;
       grid-template-columns: repeat(9,1fr);
       margin-left: auto;
       margin-right: auto;
       border: solid;
       margin-bottom: 10px;

     }

     .prints>img {
       width: auto;
       height: 150px;
       justify-self: center;
       margin-top: 5px;
       margin-bottom: 5px;
     }
    /******************************************************************************************/

    .forsale-img {
      margin-top: 2.2rem;
    }

    .forsale-dress-grid {
      display: grid;
      grid-template-columns: 1.5fr 1fr 1.5fr;
      grid-template-areas: 'style strip table';
      /*flex-direction: row;
      justify-content: space-around;*/
      align-items: start;
      margin-top: 2.2rem;
    }

    .style {
      margin-left: 3rem;

    }

    .style>img {

      width:100%;
    }


    .bottom-strip {
      display: flex;
      flex-direction: column;
      padding: 0;
      margin: 0;
      order: 0;
    }

    .bottom-strip>img {
      display: block;
      width: 100%;
      height: auto;
      margin: 0 0 0 15%;
    }

    .rotate {
      transform: rotate(90deg);
    }

    #anna2 {
      margin-top: -5rem;
    }

    #bella2 {
      margin-top: -5rem !important;
    }

    .cathy1 {
      width: 100% !important;
      margin-top: 0 !important;
      margin-left: 15% !important;
    }

    .cathy2 {
      width: 80% !important;
      margin-left: 25% !important;
    }

    .donna2 {
      margin-top: -5rem !important;
    }

    .elsa1 {
      width: 65% !important;
      margin-left: 29% !important;
      margin-top: -2rem !important;
    }

    .elsa2 {
      width: 81% !important;
      margin-left: 21% !important;
    }

    .faith1 {
      width: 72% !important;
      margin-left: 29% !important;
    }

    .faith2 {
      width: 90% !important;
      margin-left: 20% !important;
    }

    .ilze1 {
      margin-top: 0 !important;
      width: 90% !important;
    }

    .ilze2 {

    }

    .judy1 {
      margin-top: 0 !important;
      width: 100% !important;
      margin-left: 15% !important;
    }

    .judy2 {
      width: 100% !important;
      margin-left: 15% !important;
    }

    .lea1 {
      margin-top: 0 !important;
      width: 100% !important;
      margin-left: 16% !important;
    }

    .lea2 {
      width: 100% !important;
      margin-left: 16% !important;
    }


    .bottom-stripeasy {
      padding-top: 1rem;
      display: grid;
      grid-template-columns: repeat(5,1fr);
      justify-items: center;
      grid-gap: 0;
      padding-top: 3rem;
      padding-bottom: 1rem;
    }

    .bottom-stripeasy img {
      display: block;
      width: auto;
      height: 300px;
    }

    .table {
      margin: 0;
    }

    .form-shop {
      border: solid lightgrey;
      position: relative;
      background-color: #f0f0f0;
      text-align: center;
      border-radius: 0;
      margin-top: 0;
      margin-left: 20%;
      width: 60%;
    }

    #size, #cloth2, option {
      font-weight: 800;
    }

    .forsale-dresses-grid {
      display: grid;
      grid-template-columns: repeat(5,1fr);
      justify-items: center;
      text-align: center;
      position: relative;
      padding-bottom: 1rem;
      grid-gap: 0 1rem;
      }

    .forsale-dresses-grid p, .forsale-dresses-grid h3{
      display: block;
    }


    .gallery-button {
      display: flex;;
      align-items: center;
      width: 50%;
      background-color: white;
      border-color: white;
      border-radius: 10px;
      position: relative;
    }

    #filter, #compare, #search {
      justify-content:space-around;
      border: solid;
      border-color: lightgrey;
      background-color: white;
      border-radius: 10px;
    }

    #filter {
      float: left;
      padding: 15px 5px 15px 20px;
    }

    #filter>button {
      margin-left: 10px;
    }


    #compare {
      display: block;

    }

    #compare-button {
      display: flex;
      justify-content:space-around;
      flex-direction: row;
      align-content: space-around;
      }

      #compare>h4, #search>h4 {
        padding-top: 0;
      }

      #search {
        width: 20rem;
      }

      #search>h4 {
        margin: 5px 0 5px 0;
      }

      #search input {
        width: 10rem;
        height: 1.5rem;
        margin-bottom: 10px;
        display: block;
        margin-left: auto;
        margin-right: auto;
      }

      #search button {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
      }

    .gallery-grid {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr 1fr;
       justify-items: center;
       text-align: center;
       grid-row-gap: 3rem;
       grid-column-gap: 5px;
       padding-bottom: 1rem;
       padding-top: 1rem;
       width: 100%;
      }

    #boho {
      width: 84% !important;
    }

    .wedding-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-areas:
       "intro intro intro"
       ". image review"
       "txt txt txt";
     }

    .wedding-intro {
      grid-area: intro;
    }

    .wedding-img {
      grid-area: image;
    }

    .ew-container {
      padding-left: 5px;
      width: 100%;
    }

    .ew-container img {
      height: 350px;
      width: auto;
    }

    .review {
      gridarea: review;
    }

    .wedding-txt {
      grid-area: txt;
    }

     .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      padding-bottom: 1rem;
     }


    .reviews-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      justify-content: center;
      grid-gap: 1rem;
    }

    .review-form {
    padding-left: 40%;
    }

    .footer-grid {
      width: 100%;
    }

    .botnav {
     display: flex;
     flex-direction: row;
     font-size: 15px;
     text-decoration: none;
     text-align: center;
     width: 98%;
     height: 130px;
     background-color: white;
     align-items: center;
     justify-content: space-around;
     /*padding-top: 40px;*/
     margin: auto;
     font-size: 17px;
     font-weight: 400;
     border-radius: 5px;
     box-shadow: 5px 5px 2px grey;
     text-shadow: 1px 1px 2px lightgrey;
     border-style: solid;
    }

    .botnav a {

     padding: 0 2rem;
     font-size: 24px;
     text-decoration: none;
     border-radius: 5px;
     margin-right: 15px;
     color: black;
     box-shadow: 5px 5px 2px grey;
    }

    /* Change the color of links on hover */
    .botnav a:hover {
     background-color: #c9d4cc;;
     color: black;
    }

    /* Add an active class to highlight the current page */
    .botnav a.active {
     background-color: black;
     color: white;
    }

    .list {
      display: grid;
      grid-template-columns: repeat(8,1fr);
      grid-gap: 10px;

    }


    .display-cart {
      display: none;
      background-color: lightgrey;
      position: absolute;
      top: 0;
      left: 2rem;
      z-index: 99;
      width: 50%;
      border: solid white;
    }

  }

  /***************************************************************************/
  @media screen and (min-width: 1600px) {

    .bottom-stripeasy>img {
      width: auto;
      height: 300px;
    }

    .bottom-strip {

    }
/*
    .bottom-strip>img {
      width: 58%;
      margin-left: 38%;
    }
*/
    .donna1 {
      width: 80% !important;
      margin-left: 25% !important;
    }

    .donna2 {
      width: 80% !important;
      margin-left: 25% !important;
    }


    .ilze1 {
      width: 85% !important;
      margin-left: 20% !important;
    }

    .ilze2 {
      width: 85% !important;
      margin-left: 20% !important;
    }
  }