/* regex for searching two returns: ^(\s*\r?\n){2,} */
/* regex for missing space behind colon: :[\S] */
/* regex for missing space before swingy bracket: [\S]\{ */
@media only screen and (min-width: 320px) {
  /* For mobile phones:  */
  @font-face {
    font-family: arquitecta;
    src: url("../../assets/fonts/arquitecta-5_medium.woff2");
  }
.shopify-buy__btn-wrapper {
margin-top: -11px;
}

  * {
    box-sizing: border-box;
  }
    
  html {
    font-size: 10px;
  }

  body {
    font-family: arquitecta;
    // color: black;
  }

  /* NAV */
  .navbar-toggle .icon-bar {
    background-color: black;
    height: .3rem;
    border-radius: 25px;
  }

  .navbar {
    position: absolute;
    right: 0;
    z-index: 1;
  }
  /* END NAV */

  /* POPUP */
  .popup-overlay {
    width: 100%;
    height: 100vh;
    z-index: 1;
    position: absolute;
    left: 0;
    text-align: center;
    background-color: #262626;
    background-color: rgba(0,0,0,0.9);
  }

  .modal-gans {
    background-color: white;
    z-index: 2;
    position: relative;
    margin: auto;
    top: 5%;
    width: 90%;
    opacity: 1;
    padding: 2rem;
  }

  .modal-gans .s1 {
    font-size: 1.6rem;
    padding-bottom: 2rem;
  }

  .modal-gans .modal-buttons button {
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
  }
  /* POPUP END */


  .flex-container {
    width: 50%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    left: 25%;
  }

  .flex-container > div {
    text-align: left;
  }

  #navbutton {
    margin-right: 0;
  }

  #mobile-collapse-front {
    background-color: white;
  }

  .nav .nav-divider {
    background-color: black;
  }

  .nav li a {
    color: black;
    font-size: 1.5rem;

  }

  /* GENERICS */
  .s1 {
    font-size: 1.5rem;
    font-weight: 400;
  }

  .s2 {
    font-family: "Poppins", "sans-serif";
    font-size: 2rem;
    line-height: 3rem;
    padding-top: 2.5rem;
    text-align: left;
    margin: 0 2.5rem 1rem 0rem;
  }

  h0 {
    font-size: 1.5rem;
    line-height: 3rem;
  }

  h1 {
    font-size: 4rem;
    // color: black;
    padding-bottom: 2.5rem;
    margin: 0;
  }

  .h1-custom {
    font-family: "Baron";
    font-size: 1.8rem;
    line-height: 2.3rem;
    margin-top: 0;
    margin-bottom: 1rem;
    text-align: center;
  }

  .h2-custom {
    font-size: 1.6rem;
    margin-bottom: 2rem;
	  margin-top: 0;
  }

  .p-custom {
    font-size: 1.4rem;
    padding-bottom: 1rem;
  }

  .rubric {
    font-weight: 800;
    font-size: 1.5rem;
    padding-bottom: 1.5rem;
  }
    
  .btn-standard {
    border: 0.1rem solid black;
    background-color: transparent;
    padding: 1.5rem 4.0rem 1.5rem 4.0rem;
    margin-bottom: 2rem;
    border-radius: 0;
    font-size: 2rem;
  }
    
  .white {
    color: white;
  }

  .red {
	color: #FF0000;	
  }

  .blue {
    color: #0078AA;
  }

  .black {
    color: black;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }
    
  .text-center {
    text-align: center;
  }

  .right {
    float: right;
  }

  .left {
    float: left;
  }
    
  .bold {
    font-weight: 600;
  }

  .flex-row {
    flex-direction: row;
  }
    
  .flex-container > .flex-row {
    flex-direction: row;
    padding: 0 .5rem .5rem 0;
  }

  .module {
    padding-left: 2rem;
    padding-right: 2rem;

  }
    
  .module-black {
    background-color: black;
  }

  .module-red {
    background-color: #FF0000;
    padding: 2rem;
  }

  .module-blue {
    background-color: #0078AA;
  }

  .hide-mobile {
    display: none;
  }

  .hide-desktop {
    display: block;
  }

  .main-header {
    height: 20rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .main-cluster h0 {
    line-height: 3rem;
    letter-spacing: .2rem;
    font-weight: 600;
  }

  .main-cluster img {
    padding-bottom: 1rem;
  }

  .tax {
    font-size: 1.6rem;
  }

  .main-cluster h0 strong {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: .3rem;
  }

  .shop-header {
    // color: white;
    padding-bottom: 6rem;
    padding-top: .1rem;
  }

  .shop-header-pic {    
    overflow: hidden;
    //height: 20rem;
    margin-bottom: 2rem;
  }

  .shop-header-pic img {
    width: 100%;
    padding-bottom: 3rem;
    position: relative;
    top: -30%;
  }

  .shop {
    padding-bottom: 12rem;
  }

  .shop .rubric {
    padding-bottom: .5rem;
  }

  .shop .s1 {
    color: grey;
    padding-bottom: 1.5rem;
  }

  .shop iframe {
    height: 100vh;
  }

  .shop .flex-item {
    padding-bottom: 5rem;
    width: 100%;
    max-width: 100%;
  }

  .voucher {
    background-color: #262626;
    padding: 2rem;
    margin-bottom: 12rem;
  }

  .voucher .rubric {
    color: orange;
    font-size: 1.5rem;
    width: 90%;
  }

  .voucher h1 {
    color: white;
    padding-bottom: 0;
    font-size: 3.8rem;
  }

  .voucher .voucher-contact {
    width: 40%;
    text-align: center;
    margin: auto;
    background-color: #1a1a1a;
    position: relative;
    top: 3rem;
    padding: 1rem;
  }
  .voucher .voucher-contact a {
    color: white;
    font-size: 1.5rem;
  }

  .recipes {
    padding-bottom: 6rem;
  }

  .recipe-pic img {
    position: relative;
    z-index: 1;
  }

  .recipe-body {
    background-color: orange;
    padding: 8rem 2rem 1rem 2rem;
    position: relative;
    top: -5rem;
  }

  .recipe-body img {
    width: 2rem;
    padding-bottom: 3rem;
  }

  .recipe-body h1 {
    padding-bottom: 1.5rem;
  }

  .recipe-body .arrows {
    display: inline-block;
    padding-top: 2rem;
  }

  #arrow-left {
    padding-right: 2rem;
    width: 3.5rem;
    position: relative;
  }

  #arrow-right {
    padding-left: 2rem;
    width: 3.5rem;
  }

  footer {
    background-color: grey;
    color: white;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  footer .links-inside a {
    color: white;
    font-weight: 600;
  }

  footer .links-inside {
    padding-bottom: 1rem;
  }

  footer .links-inside > div {
    padding-bottom: 2rem;
  }

  footer .links-outside img {
    padding: 0 1rem 3rem 1rem;
  }

  footer .rights {
    padding-bottom: 3rem;
  }

  #recipe-2, #recipe-3, #recipe-4, #recipe-5 {
    display: none;
  }

  .shop-header h1 {  
    color: black;
  }



}


@media only screen and (min-width: 576px) {
  /* For tablet */
  .flex-container {
    width: 100%;
    left: 0;
  }

  .modal-gans {
    width: 80%;
    top: 19.5%;
  }

  .shop-header-pic img {
    top: -50%;
  }

  .shop .flex-container .flex-item {
    width: 50%;
  }

  .voucher h1 {
    font-size: 4rem;
  }

}


@media only screen and (min-width: 768px) {
  /* For portrait tablets and large phones: */
  .hide-mobile {
    display: block;
  }

  .hide-desktop {
    display: none;
  }

  .modal-gans {
    width: 60%;
  }

  .shop h1 {
    font-size: 4rem;
    padding-bottom: 0;
  }

  .shop-header-pic img {
    top: 0%;
  }

  .nav-divider {
    display: none;
  }

  .navbar {
    right: unset;
  }

  .navbar-nav > li {
    float: none;
  }

  .shop-header-pic {
    height: 40rem;
  }

  .shop-header > .module {
    position: relative;
    top: -33rem;
    left: 8%;
    width: 90%;
    height: 0;
  }

  .shop .flex-container .flex-item {
    width: 30%;
  }

  .voucher {
    text-align: center;
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .voucher .rubric {
    width: 100%;
  }

  .voucher .voucher-contact {
    width: 12rem;
  }

  .recipe-pic {
    float: right;
  }

  .recipe-body {
    width: 80%;
    padding: 8rem 8rem 1rem 4rem;
  }

  .recipes > header > h1 {
    padding-bottom: 0;
  }

  .recipes .rubric {
    padding-bottom: 10rem;
  }

  .recipe-body {
    height: 60rem;
  }

  footer .links-inside > div {
    display: inline-block;
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .shop-header h1 {  
    color: white;
  }
}


@media only screen and (min-width: 840px) {
  .recipe-body {
    width: 70%;
  }

  .shop .flex-container .flex-item {
    width: 33%;
  }

  .shop {
    padding-left: 10%;
    padding-right: 10%;
  }
}


@media only screen and (min-width: 992px) {
  /* For smaller desktops and laptops: */
  .recipes {
    padding-left: 10%;
    padding-right: 10%;
  }

  .modal-gans {
    width: 50%;
  }

}


@media only screen and (min-width: 1200px) {
  /* For desktops: */
  html, body {
    max-width: 120rem;
    margin: auto;
  }
  .shop-header {   color: white;
  }

  .modal-gans {
    width: 40%;
  }

  .recipe-body .recipe,
  .recipe-body .arrows {
    width: 70%;
  }

  .recipe-body h1 {
    width: 70%;
  }

  .shop-header-pic {
    height: 60rem;
  }

  .shop-header > .module {
    top: -50rem;
    left: 10%;
    width: 90%;
  }
   
  .shop {
    padding-left: 15%;
    padding-right: 15%;
  } 

  .recipe {
    width: 55%;
  }

  .recipe-pic img {
    width: 90%;
    position: relative;
    left: 9rem;
  }

  .recipe-body .arrows {
    display: block;
    text-align: left;
    padding-left: 30%;

  }
    .shop-header h1 {  
    color: white;
  }
}


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

}


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

}


@media only screen and (min-width: 1500px) {
  .modal-gans {
    width: 30%;
  }
}


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

}


@media only screen and (min-width: 1900px) {
  /* For pretty large desktops: */

}