/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

:root {
	--cnvs-body-font: "Jost", sans-serif;
	--cnvs-primary-font: "Great Vibes", cursive;
	--cnvs-secondary-font: "Cinzel", serif;
}



body{
	color: #6c757d;

}

.title-top{
	letter-spacing: 1px;
}
.color-secondary{
	color:#be9a65;
}


.color-tertiary{
	color:#c8a898;
}


.section{
	background-color: white;     background-position: bottom left;
    background-repeat: no-repeat;      position:relative;
}

.section > .section-mask{
		position:absolute; width:100%; height:100%;        
		background-repeat: no-repeat;
		min-height: 100vh; min-width:100vw;
		top:0;
		left:0;
}
.section-fs{
	min-height: 100vh;
}
.section-description{
	font-weight: 300;
	font-size: 20px;
}

.font-special {
    font-family: 'Salty-feathers', serif !important;
}

.evidenzia-parole{
	position:relative;
	display: inline-block;
	color:inherit !important;
}
.evidenzia-parole:before{
	content: '';
    display: block;
    position: absolute;
    height: .5rem;
    width: 100%;
    background: #657150;
	opacity: .5;
    bottom: .3rem;
    right: -1px;
}


.display-6 {
	font-size: calc(1.6rem + .5vw);
	font-weight: 400;
	line-height: 1.2;
  }
  @media (min-width: 1200px) {
	.display-6 {
	  font-size: 1.4rem; 
	}
  }


  .countdown-section {
	flex-basis: 0;
	flex-grow: 1;
	max-width: 100%;
	font-size: var(--cnvs-countdown-section);
	line-height: 1;
	text-align: center;
	border-left:none !important;
	
  }

  .countdown-amount{
	font-family: var(--cnvs-primary-font) !important;
	color: #657150;
  }
  .countdown-period{
	font-family: var(--cnvs-body-font) !important;
	font-weight: 400;
  }

  #wrapper{
	/*background-color: #f1f3ee;*/
	background-color:#f1f3ee80;
  }
	#slider{
		min-height: 100vh;
		background-position: bottom left;
		background-repeat: no-repeat;

	}

	.cornice-bianca{
		background-color: white;
		max-width:60%;
		margin: auto;
		position: relative;

		-webkit-box-shadow: 5px 5px 17px -10px rgba(0,0,0,0.82);
-moz-box-shadow: 5px 5px 17px -10px rgba(0,0,0,0.82);
box-shadow: 5px 5px 17px -10px rgba(0,0,0,0.82);
	}

	.cornice-floreale{
		padding:15px;
		background-color: transparent;
		width:100%;
		position: relative;
	}

	.cornice-floreale-sopra {
		transform: rotate(272deg);
		position: absolute;
		top: -15%;
		left: -8%;
		z-index: 0;
		display: block;
		max-width: 50%;
	}

	.cornice-floreale-sotto {
		transform: rotate(185deg) scale(.9);
		position: absolute;
		top: 65%;
		z-index: 0;
		display: block;
	}

	.cornice-floreale-main{
		z-index:1;
		padding:15px;
	}


	/* TIMELINE */

	  /* The actual timeline (the vertical ruler) */
	  .timeline {
		position: relative;
		max-width: 1200px;
		margin: 0 auto;
	  }
	  
	  /* The actual timeline (the vertical ruler) */
	  .timeline::after {
		content: '';
		position: absolute;
		width: 1px;
		background-color: transparent;
		top: 0;
		bottom: 0;
		left: 50%;
		margin-left: 0px;
		border-left: 1px dashed #dfb8a26f;
	  }
	  
	  /* timeline-container around content */
	  .timeline-container {
		padding: 10px 40px;
		position: relative;
		background-color: inherit;
		width: 50%;
	  }
	  
	  /* The circles on the timeline */
	  .timeline-container::after {
		content: "\f59e";
		font-family: 'bootstrap-icons';
		position: absolute;
		width: 32px;
		height: 32px;
		color: #c8a89878;
		right: -17px;
		background-color: #f0f3ee;
		border: 1px solid #c8a89878;
		top: 15px;
		border-radius: 50%;
		z-index: 1;
		text-align: center;
		padding-top: 4px;
	  }
	  
	  /* Place the timeline-container to the left */
	  .left {
		left: 0;
	  }
	  
	  /* Place the timeline-container to the right */
	  .right {
		left: 50%;
	  }
	  
	  /* Add arrows to the left timeline-container (pointing right) */
	  .left::before {
		content: " ";
		height: 0;
		position: absolute;
		top: 22px;
		width: 0;
		z-index: 1;
		right: 30px;
		border: medium solid white;
		border-width: 10px 0 10px 10px;
		border-color: transparent transparent transparent white;
	  }
	  
	  /* Add arrows to the right timeline-container (pointing left) */
	  .right::before {
		content: " ";
		height: 0;
		position: absolute;
		top: 22px;
		width: 0;
		z-index: 1;
		left: 30px;
		border: medium solid white;
		border-width: 10px 10px 10px 0;
		border-color: transparent white transparent transparent;
	  }
	  
	  /* Fix the circle for timeline-containers on the right side */
	  .right::after {
		left: -16px;
	  }
	  
	  /* The actual content */
	  .timeline-content {
		padding: 20px 30px;
		background-color: white;
		position: relative;
		border-radius: 12px;
	  }
	  
	  /* Media queries - Responsive timeline on screens less than 600px wide */
	  @media screen and (max-width: 600px) {
		/* Place the timelime to the left */
		.timeline::after {
		left: 31px;
		}
		
		/* Full-width timeline-containers */
		.timeline-container {
		width: 100%;
		padding-left: 70px;
		padding-right: 25px;
		}
		
		/* Make sure that all arrows are pointing leftwards */
		.timeline-container::before {
		left: 60px;
		border: medium solid white;
		border-width: 10px 10px 10px 0;
		border-color: transparent white transparent transparent;
		}
	  
		/* Make sure all circles are at the same spot */
		.left::after, .right::after {
		left: 15px;
		}
		
		/* Make all right timeline-containers behave like the left ones */
		.right {
		left: 0%;
		}
	  }



	  .col-timeline{
		background: rgb(241,243,238);
		background: linear-gradient(0deg, rgba(241, 243, 238, 1) 0%, rgba(241, 243, 238, 1) 36%, rgba(255, 255, 255, 0) 100%);
		height: 30%;
		z-index: 1;
		position: absolute !important;
		width: 100%;
		bottom: 0;
		left: 0;
	  }

	  

	  .timeline-step-complete::after{
		content: "\f59d";
		color: #dec953;
		background-color: #fff;
		border: 1px solid #dec953;
	  }

	  @media (min-width: 600px) {
		.wrapper-countdown{
			width: 80%;
		}
	}

	.slider-padding{
		padding: 2rem;
	}

	@media (min-width: 600px) {
		.slider-countdown{
			padding: 4rem;
		}
	}

	.slider-img-col{
		padding-top: 8rem;
		padding-bottom: 12rem;
	}

	@media (min-width: 600px) {
		.slider-img-col{
			padding-top: 0rem;
			padding-bottom: 0rem;
		}
	}

	.slider-img-soprasotto{
		max-width: 150px;
	}

	@media (min-width: 600px) {
		.slider-img-soprasotto{
			max-width: 200px;
		}
	}


	.display-1 {
		font-size: calc(2rem + 4.5vw);
	}
	@media (min-width: 600px) {
		.display-1 {
			font-size: calc(1.625rem + 4.5vw)
		}
	}


	.col-slider-main{
		min-height: 100vh;
	}



	/* buttons */
	.btn.btn-primary{
		background-color: #496360 !important;
		border-color:  #496360 !important;
		color: white !important;
	}

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

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

	.border-square{
		border-radius: 0 !important;
	}
	

	/* scroll down */

.scrolldown {
	display: none !important;
	position: absolute;
	bottom: 20px;
	left: 50%;
	z-index: 2;
	display: inline-block;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	color: #fff;
	font : normal 400 20px/1 'Josefin Sans', sans-serif;
	letter-spacing: .1em;
	text-decoration: none;
	transition: opacity .3s;
  }
  .scrolldown:hover {
	opacity: .5;
  }
  
  

  .scrolldown {
	padding-top: 70px;
  }
  .scrolldown span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb05 1.5s infinite;
	animation: sdb05 1.5s infinite;
	box-sizing: border-box;
  }
  @-webkit-keyframes sdb05 {
	0% {
	  -webkit-transform: rotate(-45deg) translate(0, 0);
	  opacity: 0;
	}
	50% {
	  opacity: 1;
	}
	100% {
	  -webkit-transform: rotate(-45deg) translate(-20px, 20px);
	  opacity: 0;
	}
  }
  @keyframes sdb05 {
	0% {
	  transform: rotate(-45deg) translate(0, 0);
	  opacity: 0;
	}
	50% {
	  opacity: 1;
	}
	100% {
	  transform: rotate(-45deg) translate(-20px, 20px);
	  opacity: 0;
	}
  }

  /* presentation-section */
  #presentation-section{
  background-color: #f9f2f3; 
}
  #presentation-section > .section-mask{
      background-position-y: 15%;
    background-position-x: right; 
	background-color:none;

  }

  #presentation-section   .scrolldown span {
	border-left: 1px solid #496360;
	border-bottom: 1px solid #496360;

  }

  /* modal */
  .modal-dialog{
	border: 1px solid   #be9a65;
	background-color: transparent;
	padding: 1.5rem;
  }
  .modal-content{
	text-align: center;
	background-color: #fff; 
	border: 1px solid #e4e2e2;
	border-radius: 0;
	padding: 1rem;
  }
  .modal-header{
	text-align: center;
	border: none;	
  }
  .popover-header{
	background: white;
	font-family: var(--cnvs-body-font) !important;
	font-weight: normal;}

	.campo-iban{
		font-size: .8rem;
		padding: 1rem 1.5rem;
                        background: #efefef;
                        color: black;
						margin-bottom:.5rem;
	}

	.copyButton{
		border: none;
	}
	.textToCopy{
		font-weight: 600;
	}
  /* location-letter  */
  #location-section{
	background-color: #fff; 
  }
  .location-letter{

	max-width: 700px;
    border: 1px solid   #be9a65;
    padding: 1.5rem;
    text-align: center;
	z-index: 1;

	
  }
  .location-letter-wrap{
	border: 1px solid #e4e2e2;
	background-color: white;
	padding: 2rem 4rem;
	position: relative;
	/*padding-right:200px;*/
  }

  .location-letter-image{
	position:relative; 
	width: 100%;
	z-index: 0;
  }
  .location-letter-image > img{
	width:100%;
  }




  


  @media (max-width: 599px) {
	.col-slider-main{
		min-height: 70vh;
	}
}