* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* temporary styles for structural html */
/* section {
  padding: 0.5rem;
  border: 5px solid rgb(240,240,240);
} */

body {
  font-family: 'Cormorant', serif;
  overflow-x: hidden;
}


/* Gallery */

[class*=bg-image] {
    background-color: rgb(240,240,240);
    background-image: url('/images/momentscatering-dessert-glas.jpg');
    background-position: center;
    background-repeat: no-repeat;
}

.gallery [class*=col-] {
  padding: 0.5%;
}

.bg-cover {
  background-size: cover;
}

/* Aspect Ratio */
.portrait-tall { padding-bottom: 175%; }
.portrait { padding-bottom: 125%; }
.square { padding-bottom: 100%; }
.landscape { padding-bottom: 66%; }
.landscape-wide { padding-bottom: 56% }

/* Background Position */
.bg-pos-t { background-position: top; }
.bg-pos-b { background-position: bottom; }
.bg-pos-l { background-position: left; }
.bg-pos-r { background-position: right; }

/* Background Position */
.bg-pos-t-l { background-position: left top; }
.bg-pos-b-r { background-position: right bottom; }

/* Background Position */
.bg-pos-t-l { background-position: 35% 20%; }
.bg-pos-b-r { background-position: 55% 100%; }

/* Image Styles */

.bg-header {
  background-image: url('/images/momentscatering-matcha.jpeg');
  background-size: cover;
  background-position: 50% 10%;
  position: absolute;
  height: 90%;
  width: 70%;
  z-index: 0;
}

.bg-header-about {
  background-image: url('/images/momentscatering-banner-portrait-outdoor.png');
  background-size: cover;
  background-position: 60% 30%;
}

.bg-header-dessert {
  background-image: url('/images/momentscatering-dessert.png');
  background-size: cover;
  background-position: center;
  position: absolute;
  height: 90%;
  width: 70%;
  z-index: 0;
}

/* Universal styles & utility classes */

.padded       { padding: 5%; }
.padded-xs    { padding: 1rem; }
.padded-sm    { padding: 2rem; }
.padded-md    { padding: 3rem; }
.padding-t    { padding-top: 5rem; }
.padding-b    { padding-bottom: 2rem; }
.padding-b-l  { padding-bottom: 4rem; }
.padding-frame {  padding-left: 5rem;
                  padding-right: 5rem;
                  padding-bottom: 1rem;
                  padding-top: 1rem;
                }
.padding-form { padding-left: 15%;
                padding-right: 15%;
                padding-bottom: 5%;
                padding-top: 5%; }
.pt-text-gallery { padding-top: 10%; }
.pt-text-gallery2 { padding-top: 20%; }

.relative     { position: relative; }


.bg-dark {
  background-color: #1a1a1a;
  color: #f2f2f2;
}

.bg-bright {
  background-color: #f2f2f2;
  color: #1a1a1a
}

.margin       { margin: 5%; }
.margin-sm    { margin: 1rem; }
.margin-top   { margin-top: 12rem; }
.margin-bump-up { margin-top: -2rem; }

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

.tall-40    { min-height: 40vh; }
.tall-50    { min-height: 50vh; }
.tall-60    { min-height: 60vh; }
.tall-70    { min-height: 70vh; }
.tall-80    { min-height: 80vh; }
.tall-90    { min-height: 90vh; }
.tall-100    { min-height: 100vh; }


/* Font Styles */

h1, h2, h3, h4 {
  font-size: 2.5rem;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  word-wrap: break-word;
}

p { font-size: 1.5rem;
    line-height: 1.4; 
  }

span {  font-weight: bold;
        font-size: 1.5rem;
        text-decoration: underline;
}

a {
  text-decoration: none;
  color: inherit;
  font-weight: light;
  font-size: 1.5rem;
}

a:hover {
  text-decoration: underline;
  font-weight: bold;
}

.form-confirmation {
  font-family: 'Cormorant', serif;
}

/* Navigation Style */
.navigation {
  color: #f2f2f2;
	text-decoration: none;
  font-weight: lighter;
	display: inline-block;
	letter-spacing: 0.05em;
	padding: 0.5rem 0.8rem;
	margin: 0.5rem;
}

.navigation:hover {
  color: #f2f2f2;
	text-decoration: underline;
  font-weight: lighter;
	display: inline-block;
	letter-spacing: 0.05em;
	padding: 0.5rem 0.8rem;
	margin: 0.5rem;
}

.footer-nav {
  line-height:1.8;
}

.copyright {
  font-size: 1rem;
}

/* Logo styles */
.header-logo {
  max-width: 400px;
}

.footer-logo {
  width: 550px;
  max-width: 100%;
  background-position: left;
}


/* Gallery Images */

.bg-image-stephan {
  background-image: url('/images/momentscatering-cooking-with-fire.png');
}

.bg-image-catering {
  background-image: url('/images/momentscatering-catering.png');
}

.bg-image-work {
  background-image: url('/images/momentscatering-work-mode.png');
  background-size: cover;
  background-position: 50% 13%;
}

.bg-image-colorful {
  background-image: url('/images/momentscatering-kochen-mit-farbe.jpeg');
}

.bg-image-about {
  background-image: url('/images/momentscatering-work-mode.png');
  background-size: cover;
  background-position: 50% 20%;
}

.bg-image-sandwich {
  background-image: url('/images/momentscatering-fingerfood-service.jpg');
  background-size: cover;
  background-position: 50% 43%;
}

.bg-image-truffes {
  background-image: url('/images/momentscatering-truffe-mushroom.jpg');
  background-size: cover;
  background-position: 50% 43%;
}

.bg-image-dessert1 {
  background-image: url('/images/momentscatering-dessert-glas.jpg');
}

.bg-image-dessert2 {
  background-image: url('/images/momentscatering-dessert.png');
}

.bg-image-octopus {
  background-image: url('/images/momentscatering-octopus.jpg');
  background-size: cover;
  background-position: 50% 50%;
}

.bg-image-soup {
  background-image: url('/images/momentscatering-soup.jpeg');
  background-size: cover;
  background-position: 50% 75%;
}

.bg-image-amuse {
  background-image: url('/images/momentscatering-amuse.jpeg');
  background-size: cover;
  background-position: 50% 55%;
}

.bg-image-barbecue {
  background-image: url('/images/momentscatering-barbecue.jpeg');
  background-size: cover;
  background-position: 50% 65%;
}

.bg-image-platesdish {
  background-image: url('/images/momentscatering-plate-service.jpeg');
  background-size: cover;
  background-position: 50% 50%;
}

.bg-image-carpaccio-gallery {
  background-image: url('/images/momentscatering-carpaccio.jpg');
  background-size: cover;
  background-position: 20% 50%;
}

.bg-image-plateservice {
  background-image: url('/images/momentscatering-fine-food.jpg');
  background-size: cover;
  background-position: 50% 50%;
}

.bg-image-tomato {
  background-image: url('/images/momentscatering-tomato-salad.jpg');
  background-size: cover;
  background-position: 50% 15%;
}

.bg-image-salad {
  background-image: url('/images/momentscatering-springsalad.jpg');
  background-size: cover;
  background-position: 50% 65%;
}

.bg-image-schnitte {
  background-image: url('/images/momentscatering-schnitte.jpeg');
  background-size: cover;
  background-position: 50% 65%;
}

.bg-image-pasta {
  background-image: url('/images/momentscatering-pasta.jpg');
}

.bg-image-carpaccio {
  background-image: url('/images/momentscatering-carpaccio.jpg');
  background-size: cover;
  background-position: center;
  position: absolute;
  height: 90%;
  width: 70%;
  z-index: 0;
}

.bg-image-fine {
  background-image: url('/images/momentscatering-fine-food.jpg');
  background-size: cover;
  background-position: center;
  position: absolute;
  height: 90%;
  width: 70%;
  z-index: 0;
}

.bg-banner-salad {
  background-image: url('/images/momentscatering-springsalad.jpg');
  background-size: cover;
  background-position: center;
  position: absolute;
  height: 90%;
  width: 70%;
  z-index: 0;
}

.bg-image-right {
  right: 0;
}

.bg-about-banner {
  background-image: url('/images/momentscatering-cooking-with-fire.png');
  background-size: cover;
  background-position: center;
  position: absolute;
  height: 90%;
  width: 70%;
  z-index: 0;
}

/* Button Styles */
.button-light {
  color: #1a1a1a;
  font-weight: lighter;
  background-color: #f2f2f2;
	text-decoration: none;      
	letter-spacing: 1px;          
	padding: 0.6rem 1.5rem;    
	display: inline-block;
}

.button-light:hover {
  color: #f2f2f2;
  background-color: #1a1a1a;
  font-weight: light;
	text-decoration: none; 
  border: 1px solid #f2f2f2;     
	letter-spacing: 1px;          
	padding: 0.6rem 1.5rem;    
	display: inline-block;
}

.button-dark {
  color: #f2f2f2;
  font-weight: lighter;
  background-color: #1a1a1a;
	text-decoration: none; 
  border: 1px solid #f2f2f2;     
	letter-spacing: 1px;          
	padding: 0.6rem 1.5rem;    
	display: inline-block;   
}

.button-dark:hover {
  color: #1a1a1a;
  background-color: #f2f2f2;
  font-weight: light;
	text-decoration: none;     
	letter-spacing: 1px;          
	padding: 0.6rem 1.5rem;    
	display: inline-block;
}

form input,
form textarea {
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.5rem;
  border: 2px solid #f2f2f2;
  outline: none;
  font-family: 'Cormorant', serif;
  font-size: 0.9rem;
}

form input:focus,
form textarea:focus {
  border-color: #410303;
  font-family: 'Cormorant', serif;
}

textarea {
  min-height: 8rem;
  font-family: 'Cormorant', serif;
}

form label {
  margin-top: 1rem;
  display: block;
  color: inherit;
  /* font-weight: bold; */
  font-size: 1.5rem;
  font-family: 'Cormorant', serif;
}

form button {
  border: none;
  padding: 0.5rem 2rem;
  margin: 0.5rem 0;
  font-family: 'Cormorant', serif;
}

/* Custom Grids */
.three-column-gallery {
  display: grid;
  grid-template-columns: 2fr 400px 3fr;
}

.three-column-gallery2 {
  display: grid;
  grid-template-columns: 3fr 500px 3fr;
}

#cookie-notice {
  padding: 0.5rem 1rem;
  display: none;
  text-align: left;
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 0;
  /* width: calc(100% - 2rem); */
  background: #f2f2f2;
  color: #1a1a1a;
}
#cookie-notice a {
  display: inline-block;
  cursor: pointer;
  border: solid #1a1a1a;
  padding: 0.2rem 2rem 0.2rem 0rem;
}
#cookie-notice .button-subtle {
border: none;
text-decoration: underline;
padding: none;
}

#cookie-notice .button {
  display: inline-block;
  cursor: pointer;
  border: solid #1a1a1a;
  padding: 0.5rem 1rem;
}

#close-cookie-banner {
padding: 0.5rem 2rem;
display: inline-block;
cursor: pointer;
font-size: 1rem;
text-decoration: none;
color: #1a1a1a;
}

/* Media Queries */
@media (
  max-width: 768px
)
{
  .mobile-text-center {
    text-align: center;
  }

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

  .bg-header {
    position: relative;
    height: initial;
    width: 100%;
    z-index: 0;
    aspect-ratio: 1;
  }

  .bg-image-fine {
    position: relative;
    height: initial;
    width: 100%;
    z-index: 0;
    aspect-ratio: 1;
  }

  .bg-header-dessert {
    position: relative;
    height: initial;
    width: 100%;
    z-index: 0;
    aspect-ratio: 1;
  }

  .mobile-bump-up {
    margin-top: -2rem;
  }

  .mobile-hide {
    display: none;
  }

  .padding-mob {
    padding-left: 5%;
    padding-right: 5%;
  }

  .mobile-square {
    min-height: 40vh;
  }
}