@charset "UTF-8";
/* CSS Document */

/* lora-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lora-v35-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lora-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/lora-v35-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lora-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: bold;
  font-weight: 600;
  src: url('../fonts/lora-v35-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* lora-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lora';
  font-style: bolder;
  font-weight: 700;
  src: url('../fonts/lora-v35-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
	--color-light-shades: #afa892;
	--color-dark-shades: #4D0F15;
	--color-light-accent: #d6d1c3;
	--color-dark-accent: #ab212c;
	--color-main-brand: #E0B52E;
	
}

.mainbrand{
	background-color: var(--color-main-brand);
}

.mainbrand-text{
	color: var(--color-main-brand);
}

.light-shades{
	background-color: var(--color-light-shades);
}

.dark-shades{
	background-color: var(--color-dark-shades);
	color: #fff;
}

.light-accent{
	background-color: var(--color-light-accent);
}

.dark-accent{
	background-color: var(--color-dark-accent);
}

.row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.section{
	padding-bottom: 10vh;
	padding-top: 5vh;
	min-height: 50vh;
}

.content{
	padding-left: 5vw;
	padding-right: 5vw;
}


.headline{
	width: 30vw;
	position: relative;
	top: -10vh;
	padding: 2vh;
	padding-top: 5vh;
	padding-bottom: 5vh;
}

@media only screen and (max-width: 768px){
	.headline{
		width: 50vw;
	}
}

.talkbubble {
      width: 100%;
      height: auto;
      background: var(--color-light-accent);
      position: relative;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
	  padding: 2vh;
	  -webkit-box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0); 
	  box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0);
    }
    .talkbubble:before {
      content: "";
      position: absolute;
      right: 100%;
      top: 26px;
      width: 0;
      height: 0;
      border-top: 13px solid transparent;
      border-right: 26px solid var(--color-light-accent);
      border-bottom: 13px solid transparent;
    }

.twocolumn{    
	-webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
	-webkit-column-gap: 10vw;
    -moz-column-gap: 10vw;
    column-gap: 10vw;
	column-rule: 1px solid;
	text-align: justify;
	margin-top: 2vh;
	margin-bottom: 5vh;
}

.headline2{
	margin-top: 10vh;
}

body{
	font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
	font-family: 'Lora', serif;
	color: var(--color-dark-shades);
	margin: 0; 
	padding: 0;
}


#head_bg_gradient{
	background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0) 20%, rgba(175,168,146,1) 80%);
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	z-index: -5;
}


#head_bg_picture{
	position: absolute;
	top: 20vh;
	z-index: -10;
	
}

@media (max-width: 768px){
	#head_bg_gradient{
	height: 50vh;
	}
	
}

#head_bg_picture img{
	width: 100vw;
	height: auto;

}

#header{
	position: fixed;
	top: 0;
	display: flex;
	
	animation: scale3 0.15s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);

    animation-iteration-count: 1;
    animation-fill-mode: both;
	
	z-index: 100;
}

@keyframes scale3{
  to {

	-webkit-box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0); 
	box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0);
  }
}

@media (max-width: 768px){
	#header{
		-webkit-box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0); 
		box-shadow: 0px 10px 13px -7px #000000, 3px 3px 5px 3px rgba(0,0,0,0);
	}
}


#logo{
	width: 20vw;
	float: left;
	
	animation: scale1 0.15s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);

    animation-iteration-count: 1;
    animation-fill-mode: both;
}

@keyframes scale1{
  to {
    	width: 10vw;
	    background-color: var(--color-main-brand);
	  
  }
}


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

	#logo{
		width: 40vw;
		animation: scale1mobile 0.15s linear infinite;
   		animation-play-state: paused;
		animation-delay: calc(var(--scroll) * -1s);

		animation-iteration-count: 1;
		animation-fill-mode: both;
		
		background-color: var(--color-main-brand);
	}

}

@keyframes scale1mobile{
  to {
    	width: 40vw;
	    background-color: var(--color-main-brand);
	  
  }
}



#mainmenu{
	width: 80vw;
	float: left;
	animation: scale2 0.15s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);

    animation-iteration-count: 1;
    animation-fill-mode: both;
	padding-top: 5vh;
}

@keyframes scale2{
  to {
    width: 90vw;
	padding-top: 3vh;
	background-color: var(--color-main-brand);

  }
}

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

	#mainmenu{
	width: 60vw;
	float: left;
	animation: scale2mobile 0.15s linear infinite;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);

    animation-iteration-count: 1;
    animation-fill-mode: both;
	padding-top: 5vh;
		
	background-color: var(--color-main-brand);
	}
}

@keyframes scale2mobile{
  to {
    	width: 60vw;
	    background-color: var(--color-main-brand);

	  
  }
}

#mainmenu .nav-link{
	font-size: 1.2em;
	font-weight: 700;

	
}


#mainmenu .container-fluid{
	justify-content: end;
	padding-right: 5vw;
}

#mainmenu .navbar-collapse{
	text-align: right;
}


#about{
	min-height: 130vh;
	margin-top: 100vh;
	position: relative;
}

@media only screen and (max-width: 768px){
	#about{
	margin-top: 50vh;
	}		
}

#about .headline2{
	padding: 1vh;
	padding-left: 5vh;
	margin-left: -5vh;
	margin-top: 0;
}

#aboutcontent{
	position: relative;
}

#about .pic{
	height: 80vh;
	width: 30%;
	background-color: black;
	float: right;
	z-index: 2;
	margin: .5vw;
	overflow: hidden;
}

#about .text{
	top: 10vh;
	width: 40%;
	position: absolute;
	left: 7vw;
	z-index: 20;
	background-color: white;
	padding: 2vh;
}

#about .pic img{
	height: 100%;
	width: auto; 
	position: relative;
	left: -50%;
}

#menu{
	
}

#menu iframe{
	width: 100%;
	height: 70vh;
}

#feedback{
	min-height: 70vh;
}

#carouselExampleIndicators{
	min-height: 40vh;
}

#gallery{
	min-height: 70vh;
}

#gallery .gallery-pic{
	height: 40vh;
	overflow: hidden;
	margin: 2vw;
	border: 2px solid var(--color-light-accent);
	border-radius: 2px;
}

#gallery .gallery-pic img{
	height: 100%;
	width: auto;
}

#footer a{
	color: #ffffff;
}



@media only screen and (max-width: 991px) {
.twocolumn{    
	-webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
	-webkit-column-gap: 10vw;
    -moz-column-gap: 10vw;
    column-gap: 10vw;
	column-rule: 1px solid;
	text-align: justify;
	margin-top: 2vh;
	margin-bottom: 5vh;
}

#head_bg_picture{
	position: absolute;
	top: 10vh;
	z-index: -10;
	
	
}

#head_bg_picture img{
	width: 100vw;
}
	
	#about{
		min-height: 200vh;
		margin-top: 40vh;
	}

	#about .text{
		top: -10vh;
	}
	
	#about .pic{
	height: 80vh;
	width: 100%;
	background-color: black;
	float: right;
	z-index: 2;
	margin: .5vw;
	overflow: hidden;
	}
	#about .text{
	height: auto;
	top: 30vh;
	width: 80%;
	left:12vw;

	}
	
	#feedback .col-2{
		margin-right: 20px;
	}

	.carousel-indicators{
		bottom: -5vh;
	}
	
	#gallery .gallery-pic{
		height: 20vh;
	}
	
}