/* Import Bootstrap */
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css");

@font-face {
    font-family: 'jmh';
    src: url('../fonts/JMHTypewriter.otf') format('opentype'),
         url('../fonts/JMHTypewriter.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html {
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
}

body {
    font-family: 'jmh', sans-serif;
    font-size: 20px;
    line-height: 1.6;
	height: 100%;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.one {
	background-color: #e1815d;/*#e28566;*/
	color: white;
    justify-content: space-around;
}

.three {
	background-color: #fff5ef;
	color:#813d49;/*#ae756f;*/
    min-height: 10vh;
    justify-content: center;  /* Vertically center the content */
    align-items: center;  /* Horizontally center the content */
}

#confirm {
	padding-top: 5rem;
	
	min-height: 20vh;
}

.container-fluid {
    padding: 2rem;
}

#aqui{
    color: white !important;
    
}

#capela, #palacio{
	width: 30vh;
}



/* Buttons */
.btn.btn-outline-secondary {
    border-color: white !important;
    color: white !important;
    padding: 0.75rem;
    margin: 1rem;
    border-radius: 5px;
}

.btn.btn-outline-secondary:hover {
    background-color: white !important;
    color:#bb6347 !important;
    border-color: white !important;
}

#clickable {
    background-color:#bb6347 !important;
    color: white !important;
    border-color: white !important;
}

#clickable:hover {
    background-color: white !important;
    color:#bb6347 !important;
    border-color:#bb6347 !important;
}

#aqui {
	color:#8baf71;
}

#aqui:hover {
	color: #bb6347;
}

/* Forms */
.form-control {
    background-color: #F6F3E6;
    color: #44515e;
}

#myForm, #ModalLabel, #myModal {
    color: #bb6347;
}

.carousel-inner {
    display: flex;
  }

.carousel-item {
    justify-content: center;
    align-items: center;

}
  .card {
    margin: 0 0.5em;
    box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
    border: none;
    justify-content: center;
    align-items: center;
  }
  
  
    .carousel-item {
      margin: 0;
      flex: 0 0 15%;
      display: block;
      justify-content: center;
      align-items: center;
    }

  
  .card .img-wrapper {
	padding-top: 1vh;
      height: 5em;
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
  }

  .card .card-body {
    justify-content: center;
    align-items: center;
    text-align: center;

  }


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

	  .card .img-wrapper {
		  height: 6em;
		  display: -webkit-inline-box;
		  max-height: fit-content;
		  max-width: auto;
	  }

	  .card .card-body {
		height: 7em;
		justify-content: center;
		align-items: center;
		text-align: center;
	
	  }
	


  }

#footer {
	background-color:none;
	color: black;
}


/** non bootstrao **/


	body.is-loading *, body.is-loading *:before, body.is-loading *:after {
		-moz-animation: none !important;
		-webkit-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
		-moz-transition: none !important;
		-webkit-transition: none !important;
		-ms-transition: none !important;
		transition: none !important;
	}

/* Banner */

	#banner {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		cursor: default;
		height: 100vh;
		min-height: 35em;
		overflow: hidden;
		position: relative;
		text-align: center;
	}



		#banner .more {
			-moz-transition: -moz-transform 0.75s ease, opacity 0.75s ease;
			-webkit-transition: -webkit-transform 0.75s ease, opacity 0.75s ease;
			-ms-transition: -ms-transform 0.75s ease, opacity 0.75s ease;
			transition: transform 0.75s ease, opacity 0.75s ease;
			-moz-transition-delay: 3.5s;
			-webkit-transition-delay: 3.5s;
			-ms-transition-delay: 3.5s;
			transition-delay: 3.5s;
			-moz-transform: translateY(0);
			-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
			transform: translateY(0);
			border: none;
			bottom: 0;
			color: inherit;
			font-size: 0.8em;
			height: 8.5em;
			left: 50%;
			letter-spacing: 0.225em;
			margin-left: -8.5em;
			opacity: 1;
			outline: 0;
			padding-left: 0.225em;
			position: absolute;
			text-align: center;
			text-transform: uppercase;
			width: 16em;
			z-index: 1;
		}

			#banner .more:after {
				background-image: url("images/arrow.svg");
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
				bottom: 4em;
				content: '';
				display: block;
				height: 1.5em;
				left: 50%;
				margin: 0 0 0 -0.75em;
				position: absolute;
				width: 1.5em;
			}

		#banner:after {
			-moz-pointer-events: none;
			-webkit-pointer-events: none;
			-ms-pointer-events: none;
			pointer-events: none;
			-moz-transition: opacity 3s ease-in-out;
			-webkit-transition: opacity 3s ease-in-out;
			-ms-transition: opacity 3s ease-in-out;
			transition: opacity 3s ease-in-out;
			-moz-transition-delay: 1.25s;
			-webkit-transition-delay: 1.25s;
			-ms-transition-delay: 1.25s;
			transition-delay: 1.25s;
			content: '';
			background:  #44515e;;
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
		}


	body.is-loading #banner .more {
		-moz-transform: translateY(8.5em);
		-webkit-transform: translateY(8.5em);
		-ms-transform: translateY(8.5em);
		transform: translateY(8.5em);
		opacity: 0;
	}

	body.is-loading #banner:after {
		opacity: 1;
	}




/* Landing */

	body.landing #page-wrapper {
		background-image: url("../../images/Convite_casamento.png");background-attachment: fixed;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		padding-top: 0;
	}

	#page-wrapper {
		min-height: 100vh; /* Ensures it covers the full viewport */
		width: 100%;
	}

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

		#banner {
			padding: 7em 3em 5em 3em ;
			height: auto;
			min-height: 0;
		}

		#banner .more {
			display: none;
		}
		
		body.landing #page-wrapper {
			background-size: contain;
			background-position: center top; 
		}

	}

	  
		.grid-item {
		  background: #fff5ef;

		}
		
	  
		.items {
		  position: relative;
		  width: 100%;
		  overflow-x: scroll;
		  overflow-y: hidden;
		  white-space: nowrap;
		  transition: all 0.2s;
		  will-change: transform;
		  user-select: none;
		  padding-top: 4vh;
		  padding-bottom: 4vh;
		}
	  
		.items.active {
		  background: #fff5ef;;
		  transform: scale(1);
		}
	  
		.item {
		  display: inline-block;
		  background: transparent;
		  min-height: 250px;
		  min-width: 400px;
		  
		}

		.item img {
			position: center;
			max-width: 400px;
			max-height: 250px;
			padding-left: 1vh;
		}