/* CSS Document */
/*=============================================*/
/*========= Code by chcreative.ch =============*/
/*========= Author Cédric Huguenin ============*/
/*========= Thanks for looking at this code ===*/
/*=============================================*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;0,800;1,300;1,400;1,600;1,800&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap');

/*
font-family: 'Montserrat', sans-serif;
font-family: 'Playfair Display', serif;
*/

:root {
		
	/* 	Seeblick Logo Farben */
		--clr-highlight: hsla(351,24%,44%, 1); 
		--clr-highlight-2: hsla(351,24%,28%, 1); 
			
		--clr-background: hsla(53,20%,92%, 1);
		--clr-background-dark: hsla(57,0%,54%, 1); 

		--clr-f-light: hsla(57,0%,54%, 1);
		--clr-f-dark: hsla(337,52%,6%, 1);	

		--fs-ssm: 0.6rem;
		--fs-sm: 0.8rem;
		--fs-m: 1rem;
		--fs-lrg: 1.3rem;
		--fs-slrg: 1.6rem;

		--lineheight: 1.2rem;

		--icon-size-lrg: 2.5rem;
		--icon-size-sm: 1.5rem;
	
		--nav-content-width: 1600px;
		--nav-height: 50px;
		--nav-link-height: 16px;
		
	}

* {
	box-sizing:border-box;
	margin: 0;
	padding: 0;	
	font-family: 'Playfair Display', serif;
}

html {
	height: 100%;
	width: 100%; 
	background-color: var(--clr-background);
	display: grid;
	}

	header {
		z-index: 2222;
		position: relative;
	}

body {
	  position:relative;
	  height:100%;
	  width:100%;
	  margin: 0;
	  padding: 0;
	  flex-flow: column nowrap;
	  justify-content: space-between
	}

li, a, button {		
		font-weight: 500;
		font-size: 1rem;
		color: var(--clr-f-dark);		
		text-decoration: none;
		list-style: none;
	}

	p {
		font-family: 'Montserrat', sans-serif;
		padding: 1rem 0 0 0;
	}

	h2, h3, h4 {
		font-family: 'Playfair Display', serif;
	}

	p {		
		padding-bottom: 1rem;
	}

	/*h2, h3 {		
		padding-top: 1rem;
	}*/

	h3 {
		font-size: var(--fs-slrg);
	}

	img {
		width: 100%;
	}

	.site-container {
		width: 100%;
		height: 100%;
	}

	.flex__content {
		display: flex;
		display: -webkit-flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		padding: 1rem;
	}

	.flex__direction {
		flex-direction: column;

	}

	.height {
		height: 100%;
	}

	.flex {
		display: flex;
		justify-content: center;
	}

	.font__color__dark {
		color: var(--clr-highlight);
	}

	.font__color__light {
		color: var(--clr-background);
	}

	.padding__1 {
		padding: 1rem;
	}

	.filter {
		filter: brightness(.5);
		position: relative;
		width: 100%;
		background-color: rgba(0,0,0,0.5);
		/* filter: brightness(0.5); */
		height: 100%;    
	}


	.top__pad {
		margin-top: 1rem;
	}

	.bttm__pad {
		padding-bottom: 4rem;
	}

	.bold {
		font-weight: bold;
	}


	.check__in ul {
		padding: 1rem;
		width: fit-content;
		margin: 0 auto;
		text-align: left;
	}

	.check__in li {
		font-family: 'Montserrat', sans-serif;
		list-style-type: circle;
		color: var(--clr-background);
		padding-bottom: .5rem;
		font-weight: 600;
		font-size: var(--fs-sm);
	}

	.check__out ul {
		padding: 1rem;
		width: fit-content;
		margin: 0 auto;
		text-align: left;
	}

	.check__out li {
		font-family: 'Montserrat', sans-serif;
		list-style-type: circle;
		color: var(--clr-background);
		padding-bottom: .5rem;
		font-weight: 600;
		font-size: var(--fs-sm);
	}

/*=============================================*/
/*========= NAVIGATION =============*/
/*=============================================*/
	.circle {
		position: fixed;
		top: 0;
		left: 0;
		width: 90px;
		height: 100px;	
/*		outline: 1px solid var(--clr-background);*/
		outline-offset: -6px;
		/*border-bottom-right-radius: 100%;*/
		background-color: var(--clr-highlight-2);
	}

	.btn p {
		color: var(--clr-background);
		font-weight: 600;
	}

	.btn--open p {
		color: var(--clr-highlight);
		font-weight: 600;

	}


	.title {
		margin: 0;
		font-size: 4rem;
		letter-spacing: 1px;
		font-weight: 400;
		padding: 0 15px;
		color: var(--clr-background);
		text-align: center;
		z-index: 8;
	} 

	.title__dark {
		font-family: 'Montserrat', sans-serif;
		margin: 0 auto;
		font-size: var(--fs-lrg);
		letter-spacing: 1px;
		font-weight: 400;
		padding: 0 15px;
		color: var(--clr-f-dark);
		text-align: center;			
	}

	.italic {
		font-style: italic;
	}

		.title__foto__section {
		text-align: center;
		color: var(--clr-highlight);
		font-size: var(--fs-slrg);
		}

	.btn {
		position: fixed;
		top:25px;
		left:25px;
		background-color:transparent;
		border:0;
		padding:0px;
		z-index:1;
		cursor:pointer;
		text-align: center;
		text-align: -webkit-center;
	}

	.link__hover {
		width: 13rem;
		padding: .5rem 0 .5rem 0;
		color: var(--clr-background);
	}


	.link__hover {
		-webkit-transition: all 0.4s;
		transition: all 0.4s;
	}

	.link__hover:hover {
		transform: scale(1.1, 1.1);
		cursor:pointer;
	}


	.btn__line {
		  height:2px;
		  width:32px;
		  display:block;
		  background-color: var(--clr-background);
		  transition: all 0.5s;
		  -webkit-transition: all 0.5s;
		  -moz-transition: all 0.5s;
		  -ms-transition: all 0.5s;
		  -o-transition: all 0.5s;
		  position: relative;
	}

	.btn__line:nth-child(1) {
		  left:-4px;
	}
	.btn__line:nth-child(2) {
		  left:4px;
	}
	.btn__line:nth-child(3) {
		  left:-4px;
	}

	.btn__line + .btn__line {
		  margin-top:6px;
	}

	.btn:hover .btn__line, .btn--open .btn__line {
		  left:0px;
	}

	.btn--open .btn__line { 
		  background-color:var(--clr-highlight-2);
	}

	.nav__list {
			list-style: none;
			margin: 0;
			padding: 0;
			visibilty: hidden;
			transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
			opacity: 0;
			display: flex;
			flex-direction: row;
			-webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
			-moz-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
			-ms-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
			-o-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
			transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
		}

	.nav__item--hover {
		  opacity: 0.25;
		}

	.full-menu {
		  position: fixed;
		  top:0;
		  width: 100%;
		  height:0;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		outline: 1px solid var(--clr-highlight-2);
			outline-offset: -6px;
		  transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
		  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
		  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
		  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
		  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
		}

	.full-menu:before, .full-menu:after {
		  content: '';
		  height: 0;
		  position: fixed;
		  top:0;
		  width: 100%;
		}

	.full-menu:before {
		  z-index: -2;
		  background-color:var(--clr-highlight-2);
		  transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
		  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
		  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
		  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
		  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
		} 

	.full-menu:after {
		  z-index: -1;
		  background-color: var(--clr-background);
		  transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
		  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
		  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
		  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
		  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
		}



	.menu--open:before, .menu--open:after {
		  height: 100%;
		}

	.menu--open:before {
		  transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
		  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
		  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
		  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
		  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
		} 

	.menu--open:after {
		  transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
		  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
		  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
		  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
		  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
		}

	.menu--open {
		  height:100%;
		  transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
		  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
		  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
		  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
		  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
		}

	.nav__item {
		  padding: 0 20px;
		  visibility: hidden;
		  transition: all 0.4s;
		  -webkit-transition: all 0.4s;
		  -moz-transition: all 0.4s;
		  -ms-transition: all 0.4s;
		  -o-transition: all 0.4s;
		}

	.menu--open .nav__item{
		  visibility: visible;
		}

	.menu--open .nav__list{
		  visibilty: visible;
		  opacity: 1;
		  -webkit-transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
		  -moz-transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
		  -ms-transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
		  -o-transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
		  transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
		}

	.nav__link {
		  text-decoration: none;
		  color: var(--clr-highlight-2);
		  font-size: 30px;
		  letter-spacing: 1px;
		}

	.nav__item:hover {
		  transform: scale(1.1, 1.1);

		}
	.nav__item:hover .nav__link {
		  font-weight:700;
		}

	.nav__item-not-hover {
		  opacity:0.3;
		}

	@media screen and (max-width:767px) {
	  .nav__list {
			flex-direction:column;
			text-align:center;
		  }
	  .nav__item {
			padding:8px 0;
		  }
	}

	@media screen and (max-width:480px) {
		  .nav__link{
			font-size:26px;
		  }
	}

	/*=============================================*/
	/*========= STARTSITE HEADER STACKED ==========*/
	/*=============================================*/


	.stacked {
		display: grid;
		place-items: center;
		/*isolation: isolate;*/
	}

	.stacked > * {
		grid-column: 1 / -1;
		grid-row: 1 / -1;
	}

	.stacked > .start__screen {
		z-index: -1;
	}

	.start__screen {
		height: 100vh;
		object-fit: cover;
		filter: brightness(40%);
		animation-name: darken;
		animation-duration: 4s;
		/*animation-iteration-count: 0;*/
	}

	@keyframes darken {
		0%   {
			filter: brightness(1);       
			-webkit-filter: brightness(1);

		}

		100% {
			filter: brightness(0.4);       
			-webkit-filter: brightness(0.4);

		}
	}

	.border__bttm {
		border-bottom: 1px solid var(--clr-highlight-2);
		width: 80%;
		margin-inline: auto;
	}

	.site__header {
	padding: 0 1.5rem 0 1.5rem;
	}

	.site__header img {
		max-height: 300px;
		object-fit: cover;
	}


/*=============================================*/
/*================ CARDS ======================*/
/*=============================================*/


	.grid__cards {
		padding: 1rem;
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
		/*grid-auto-flow: dense;*/
	}


	.card {
		background-color: var(--clr-highlight);
		color: var(--clr-background);
		padding: 1rem;
		margin: .5rem;		
	}

	.card ul {
		padding: 1rem;
		width: fit-content;
		margin: 0 auto;
		text-align: left;
	}

	.card li {
		font-family: 'Montserrat', sans-serif;
		list-style-type: circle;
		color: var(--clr-background);
		padding-bottom: .5rem;
		font-weight: 600;
		font-size: var(--fs-sm);
	}

	.btn__to__more {

	}

	.btn__to__more__site {
		text-align: center;
	}

	.btn__more {
		width: 100%;
		padding: .5rem 0 .5rem 0;
		color: var(--clr-highlight);
	}

	.btn__more h4 {
		-webkit-transition: all 0.4s;
		transition: all 0.4s;
	}

	.btn__more h4:hover {
		transform: scale(1.1, 1.1);
		cursor:pointer;
	}

	.btn__more__site {
		width: 13rem;
		padding: .5rem 0 .5rem 0;
		color: var(--clr-highlight);
	}

	.btn__more__site h4 {
		-webkit-transition: all 0.4s;
		transition: all 0.4s;
	}

	.btn__more__site h4:hover {
		transform: scale(1.1, 1.1);
		cursor:pointer;
	}


	/*=============================================*/
	/*============ FOTO SECTION ==============*/
	/*=============================================*/

	.foto__section {

	}

	.background__img {
		/*background-image: url("../bilder/champagne-romantic-background.png");
		background-position: center; 
		background-repeat: no-repeat; 
		background-size: cover; */



		border: 2px solid var(--clr-highlight);
		margin: 1.5rem;
	 }


	.fancy__container {
		/*display: grid;
		grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );*/
		margin: 0 auto;
		display:flex;
		gap: 1.5rem;
		padding: 2.5rem;
		flex-wrap: wrap;

	}


	.flex__box {
		filter: brightness(100%);
		-webkit-filter: brightness(100%);
		margin: 0 auto;
		/*width: clamp(9rem, 28.5vw, 44rem);*/
		width: 15rem;
		transition:filter 1s;
		transition:box-shadow 1s;

		box-shadow:  0 0 0 black;
	}

	.flex__box:hover {
		filter: brightness(115%);
		-webkit-filter: brightness(115%);
		box-shadow:  0 0 20px black;
		transition:filter 1s;
		transition:box-shadow 1s;
	}


	/*=============================================*/
	/*============ LOVE WORD CONTENT ==============*/
	/*=============================================*/


	.love__content {
		padding: 1.5rem;
	}

	.love__container {
		position: relative;
		background-color: var(--clr-highlight);
	}

	.love__word {

	}

	.love_word__class__top {
		position: absolute;
		top: -3.7rem;
		font-size: 6rem;
		color: var(--clr-background);
		left: 0;
	}

	.love_word__class__bottom {
		position: absolute;
		bottom: -2rem;
		font-size: 6rem;
		color: var(--clr-background);
		right: 0;
	}

	.dark__background {	
		padding: 1.5rem;
		text-align: center;
	}

	.light__background {
		background-color: var(--clr-background);
		padding: 1.5rem;
	}

	.love__content_p {
		color: var(--clr-background);

	}

	.love__word_headtitle {
		color: var(--clr-background);
		padding-top: 3rem;
	}

	.love__word_headtitle_nopad {
		color: var(--clr-background);
		padding-top: 0;
	}

	.check__in {

	}

	.check__out {

	}

	.flex__box__btn {
		display: flex;
		width: 100%;
		justify-content: center;
		padding-bottom: 4.5rem;
	}

	.btn__buchen {
		margin-inline: .5rem;
	}

	.book__btn {
		width: 13rem;
		color: var(--clr-highlight);
			font-weight: 600;
		padding: .5rem 0.5rem .5rem 0.5rem;
	}


	.book__btn h4 {
		-webkit-transition: all 0.4s;
		transition: all 0.4s;
	}

	.book__btn h4:hover {
		transform: scale(1.1, 1.1);
		cursor:pointer;
	}


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

		.flex__box__btn {		
			flex-direction: column;
			padding-bottom: 4.5rem;
			justify-content: center;
			width: 100%;		
		}

		.btn__buchen {
			text-align: -webkit-center;
			text-align: center;
			margin-inline-end: unset;
			padding-bottom: 1rem;
		}


	}

	/*=============================================*/
	/*============ B AND B CONTENT ==============*/
	/*=============================================*/


	.b_and_b__content {
		padding: 1.5rem;
		overflow: hidden;
	}

	.b_and_b__container {
		position: relative;
		/*overflow: hidden;
		outline: 2px solid var(--clr-highlight);*/
		background-color: var(--clr-highlight);
	}

	.b_and_b__word {

	}

	.b_and_b_word__class__top {
		position: absolute;
		top: -4.5rem;
		font-size: 6rem;
		color: var(--clr-background);
		left: 0;
	}

	.b_and_b_word__class__bottom {
		position: absolute;
		bottom: -2rem;
		font-size: 6rem;
		color: var(--clr-background);
		right: 0;
	}

	.dark__background {
		background-color: var(--clr-highlight);
		padding: 1.5rem;
	}

	.light__background {
		background-color: var(--clr-highlight);
		padding: 1.5rem;
	}

	.b_and_b__content_p {
		color: var(--clr-highlight);
		padding-bottom: 3.5rem;
	}

	.b_and_b__word_headtitle {
		color: var(--clr-highlight);
		padding-top: 3rem;
	}


	.btn__b_and_b {
		margin-inline-end: auto;
	}

	.bandb__btn {
		/*width: 12rem;*/
		color: var(--clr-highlight);
			font-weight: 600;
		padding: .5rem 0.5rem .5rem 0.5rem;
	}


	.bandb__btn h4 {
		-webkit-transition: all 0.4s;
		transition: all 0.4s;
	}

	.bandb__btn h4:hover {
		transform: scale(1.1, 1.1);
		cursor:pointer;
	}


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

		.flex__box__btn {		
			flex-direction: column;
			padding-bottom: 4.5rem;
			justify-content: center;
			width: 100%;		
		}

		.btn__buchen {
			text-align: -webkit-center;
			text-align: center;
			margin-inline-end: unset;
			padding-bottom: 1rem;
		}


	}

	/*=============================================*/
	/*============ SLIDER ==============*/
	/*=============================================*/

.slider {
	position: relative;
	overflow: hidden;
	height:100%; 
	/*width: 100vw;*/
}

.slide {
	background-position: center center;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 100%;
	height: 100%;
	width: 100%;
}

.slide.active {
	transform: translateX(-100%);
}

.slide .info {
	background-color: var(--clr-background);
	color: var(--clr-highlight);
	padding: 20px 15px;
	position: absolute;
	opacity: 0.1;
	top: 80px;
	left: 40px;
	text-align: center;
	width: 300px;
	max-width: 100%;
}

.slide.active .info{
	opacity: 1;
	transform: translateY(-40px);
	transition: all 0.5s ease-in-out 0.8s;
}

.slide .info h1 {
	margin: 10px 0;
}

.slide .info p {
	letter-spacing: 1px;
	color: var(--clr-highlight);
}

.eraser {
	background: var(--clr-highlight-2);
	position: absolute;
	transition: transform 0.5s ease-in-out;
  opacity: 0.95;
	bottom: 100%;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 100;
}

.eraser.active {
	transform: translateY(100%);
}

.buttons-container {
	position: absolute;
	bottom: 50px;
	right: 60px;
/*   display: flex; */
  
}

.buttons-container button {
	border: 2px solid var(--clr-background);
	background-color: transparent;
	color: var(--clr-background);
	cursor: pointer;
	padding: 8px 30px;
  margin-right: 10px;
}

.buttons-container button:hover {
	background-color: var(--clr-background);
	color: var(--clr-highlight-2);
  opacity: 0.9;
}

.img__quad {
	padding: .5rem;
}


@media (max-width: 400px) {
	.slide .info {
		top: 100px;
		left: 10px;
	}
}


	/*=============================================*/
	/*============ FOOTER ==============*/
	/*=============================================*/

	footer {
		background-color: var(--clr-highlight);
		margin-inline: 1.5rem;
	}

	.herz__svg {
		position: absolute;
		overflow: hidden;
		width: 10vh;
		left: calc(0rem + -2rem);
		transform: rotate(348deg);
	}

	.herz__bttm__svg {
		position: absolute;
		overflow: hidden;
		width: 8vh;
		right: 0;
		transform: rotate(35deg);
		bottom: -1.5rem;
	}

	.herz__svg img{

	}

	.footer__container {
		overflow: hidden;
		width: 100%;
		position: relative;
		padding: 1rem;
		justify-content: space-evenly;
	}

	.footer_txt {
		color: var(--clr-background);

	}

	.footer_txt h5 {
		font-size: var(--fs-lrg);
		color: var(--clr-background);

	}

	.footer__by__side {
		text-align: center;
	}

	.footer_txt a, p{
		font-size: var(--fs-m);
		color: var(--clr-background);
	}

	.footer_links {
		flex-direction: column;
		flex-basis: min-content;
	}

	.footer__banner {
		background-color: var(--clr-highlight-2);
		position: relative;
		color: var(--clr-background);
		border-top: 2px solid var(--clr-background);
		flex-direction: column;
		margin: 0 auto;
		place-items: center;

	}

	.footer__banner h2, h3, p, a {
		color: var(--clr-background);
		
		text-align: center;	
	}

	.footer__title {
		font-size: var(--fs-lrg);
		color: var(--clr-background);
	}

	.copyright {
		width: 50%;
		font-size: var(--fs-sm);
	}

	.site__by {
		width: 50%;
		font-size: var(--fs-ssm);
	}
	.agbs {
		position: absolute;
	}

	.small__txt {
		font-size: var(--fs-ssm);
	}

	.hover__effect {

	}


	.hover__effect {
		-webkit-transition: all 0.4s;
		transition: all 0.4s;
	}

	.hover__effect:hover {
		transform: scale(1.1, 1.1);
		cursor:pointer;
	}



	/*=============================================*/
	/*============ MAIN WITH SIDEBAR ==============*/
	/*=============================================*/


	.parent {
		outline: 3px solid hotpink;
		padding: 1rem;
	}

	.main__with__sidebar {
		display: flex;
		gap: 1em;
		align-items: start;
	}

	.children {
		padding: 1rem;
		background-color: var(--clr-highlight);
		color: var(--clr-background);
	}

	.main__with__sidebar > :first-child {
		flex-basis: 500px;
		flex-grow: 999;
	}

	.main__with__sidebar > :last-child {
		flex-basis: 300px;
		flex-grow: 1;
	}



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

		.img__quad {    
			padding: 0.5rem;
			min-height: 400px;
		}
	}

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

		.dark__background {
			width: fit-content;
			margin: 0 auto;
		}

		.footer__banner {
			flex-direction: row;

		}
	}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #aca49c;
  font-size: 0.875em;
}

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
  color: #bbb5af;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #aca49c;
  font-size: 0.875em;
}

input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
  color: #bbb5af;
}

input::placeholder, textarea::placeholder {
  color: #aca49c;
  font-size: 0.875em;
}

input:focus::placeholder, textarea::focus:placeholder {
  color: #bbb5af;
}

input::-ms-placeholder, textarea::-ms-placeholder {
  color: #aca49c;
  font-size: 0.875em;
}

input:focus::-ms-placeholder, textarea:focus::-ms-placeholder {
  color: #bbb5af;
}

/* on hover placeholder */

input:hover::-webkit-input-placeholder, textarea:hover::-webkit-input-placeholder {
  color: #e2dedb;
  font-size: 0.875em;
}

input:hover:focus::-webkit-input-placeholder, textarea:hover:focus::-webkit-input-placeholder {
  color: #cbc6c1;
}

input:hover::-moz-placeholder, textarea:hover::-moz-placeholder {
  color: #e2dedb;
  font-size: 0.875em;
}

input:hover:focus::-moz-placeholder, textarea:hover:focus::-moz-placeholder {
  color: #cbc6c1;
}

input:hover::placeholder, textarea:hover::placeholder {
  color: #e2dedb;
  font-size: 0.875em;
}

input:hover:focus::placeholder, textarea:hover:focus::placeholder {
  color: #cbc6c1;
}

input:hover::placeholder, textarea:hover::placeholder {
  color: #e2dedb;
  font-size: 0.875em;
}

input:hover:focus::-ms-placeholder, textarea:hover::focus:-ms-placeholder {
  color: #cbc6c1;
}


/*
header {
  position: relative;
  margin: 100px 0 25px 0;
  font-size: 2.3em;
  text-align: center;
  letter-spacing: 7px;
}
*/

#form {
  position: relative;
  width: 100%;
  margin: 50px auto 100px auto;
}

input {
  font-family: 'Lato', sans-serif;
  font-size: 0.875em;
  width: 100%;
  height: 50px;
  padding: 0px 15px 0px 15px;
  
  background: transparent;
  outline: none;
  color: var(--clr-highlight);
  
  border: solid 2px var(--clr-highlight);
  border-bottom: none;
  
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

input:hover {
  background: var(--clr-highlight);
  color: var(--clr-background);
}

textarea {
  width: 100%;
  
  height: 110px;
  max-height: 110px;
  padding: 15px;
  
  background: transparent;
  outline: none;
  
  color: var(--clr-highlight);
  font-family: 'Lato', sans-serif;
  font-size: 0.875em;
  
  border: solid 2px var(--clr-highlight);
  
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}

textarea:hover {
  background: var(--clr-highlight);
  color: var(--clr-background);
}

#submit { 
  padding: 0;
  margin: -5px 0px 0px 0px;
  
  font-family: 'Lato', sans-serif;
  font-size: 0.875em;
  color: var(--clr-highlight);
  
  outline:none;
  cursor: pointer;
  
  border: solid 2px var(--clr-highlight);
  border-top: none;
	
	    width: 100%;
}

#submit:hover {
  color: var(--clr-background);
}