/*_______________SECTION 1____________________*/
.section1_container, .templateContainer, .confirm_container{
	max-width: 500px;
	margin: 0 auto;
	margin-top: -10px;
}
.section1{
	background:url("../images/1.3.png") no-repeat center;
	background-size: cover;
	height: 680px;
}
.section1 img{
	display: block;
	transform: translate(0, 55%);
	width: 85%;
	margin:auto;
}
.section1_info{
	transform: translate(-0%, -55%);
	text-align: center;
}
.section1_info>h5{
	font-size: 20px;
	font-weight: 100;
}
.section1_info hr{
	margin: 0vw 1vw;
	height: 0.2vh;
	width: 40px;
	display:inline-block;
	background: rgb(29, 29, 29);
}
.section1_info h1{
	font-size: 4vw;
	font-weight: 100;
	line-height: 1vw;
}
/*_______________margin common____________________*/

.section2, .section7, .section9, .guest_info{
	padding: 6%;
}
.section3, .section5, .section8{
	padding: 10%;
}
/*_______________SECTION 2____________________*/

.section2, .section12{
	background-color: rgb(255, 255, 255);
	text-align: center;
	font-size: 25px;
	line-height: 40px;
}
.section2 img{
	width: 30%;
}

/*________________SECTION 3____________________*/
.section3, .section5{
	background: url("../images/fondo4.png");
	text-align: center;
}
.section3>div{
	border-color: #AE9366;
	border-style: double;
	border-width: 0.4vw;
	margin:0 -5%;
	padding: 5%;
}
.section3 .title{
	font-size: 35px;
	line-height: 45px;
	margin: 25px;
}
.section3 .subtitle{
	font-size: 20px;
	line-height: 44px;
}

/*________________SECTION 4____________________*/
.section4{
	background: url("../images/fondo5.png") no-repeat center;
	background-size:cover;
	text-align: center;
	min-height: 450px;

}
.section4>p{
	font-size: 60px;
	padding:25px;
	margin: 0 ;
}
.section4 .title{
	font-size: 40px;
}
.section4 .subtitle{
	font-size: 25px;
}
/*----------------CONTADOR------------------*/
.p1_contador{
	margin-top: 2vw;
	position: relative;
	width: 100%;
	display: flex;
    justify-content: space-evenly;
}
/*cuadros del contador*/
.p1_cartel { 	
	float:left;
	width: 15%;
	text-align: center;
	margin: 0.5vw;
	border: 2px solid #2020208f;
	border-radius: 5px;
}
.p1_cartel span{
	animation: fade 3s;
}

@keyframes fade {
	0%   {opacity: 0;}
	30%  {opacity: 0;}  
	100% {opacity: 1;}
}

/*___________SECTION 5___________________*/
.section5{
	text-align: center;
}
.section5>p{
	position: relative;
	top:-40px;
	margin-bottom: -20px;
	font-size: 55px;
}
.section5 img{
	/*margin: 40px 0 0;*/
	width: 60%;
}
.section5 .title{
	font-size: 40px;
	margin: 15px 0 0 0;
}
.section5 .subtitle{
	font-size: 22px;
	/* margin-bottom: 35px; */
	 line-height: 35px; 
}
.btn{
	margin-bottom: 70px;
}
.p1_primaryBtn{
	background-color: #AE9366;
	border-radius: 10px;
	color: white;
	padding: 13px;
	text-decoration: none;
	font-size: 18px;
	letter-spacing: 8px;
	border: none;
}

/*________________SECTION 6____________________*/

/*----------------TIMELINE------------------*/	
.section6{
	background: url("../images/fondo6.png");
	padding: 10%;
}
.section6>p{
	font-family: 'MonteCarlo';
	text-align: center;
	margin-bottom: 100px;
	font-size: 45px;
}
.item-text-container p{
	margin: 0;
}
.section6 .title{
	font-size: 39px;
}
.section6 .subtitle{
	font-size: 25px;
}
.timeline_item {  /* Estilo de la linea del timeline ante el circulo */
	margin-bottom: 100px;  
	position: relative;
}
.timeline_last_item{
	margin-bottom: 0;
}
.timeline {  /* Estilo de la linea del timeline  */
	position: relative;
}
.timeline_line { /* Estilo vertical de la linea del timeline  */
	width: 3px;
	background-color: #FDF5F4;  
	position: absolute;
	left: 11%;  
	overflow: hidden;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
}
.timeline_line-progress { /* relleno de la progressbar  */
	background-color: #D9BBB4; /*color de la linea*/
}
.ag-timeline-card_point-box { /* posicion circulo centrado en la linea */
	display: inline-block;
	margin: 5%;
}
.timeline-card_point { /* Forma en circulo del indicador */
	background-color: #F1EDE7; /*color del borde del circulo antes del efecto*/
	padding: 10px;
	width: 25px;
	height: 25px;
	text-align: center;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.js-ag-active .timeline-card_point { /* Efecto de cambio de color */
	background-color: #D9BBB4; /*color del centro del circulo*/
	padding: 10px;
	width: 25px;
	height: 25px;
}
.item-text-container { /* posicion del titulo */
	position: relative;
	display: inline-block;
	top: -30px;
	margin-left: 35px;
	color: #826029;
}
.item-img-container { /* formato del cuadro que contiene la imagen y el texto */
	width: 9%;
	opacity: 0;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	-webkit-box-shadow: 0 0 0 0 rgba(0,0,0,.5);
	-moz-box-shadow: 0 0 0 0 rgba(0,0,0,.5);
	-o-box-shadow: 0 0 0 0 rgba(0,0,0,.5);
	box-shadow: 0 0 0 0 rgba(0,0,0,.5);
	-webkit-transition: -webkit-transform .5s, opacity .5s;
	-moz-transition: -moz-transform .5s, opacity .5s;
	-o-transition: -o-transform .5s, opacity .5s;
	transition: transform .5s, opacity .5s;
}
.timeline_item .item-img-container { /*animación de elementos derecha a izq*/
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	-ms-transform: translateX(100%);
	-o-transform: translateX(100%);
	transform: translateX(100%);
}
.js-ag-active.timeline_item .item-img-container { /*hace que aparezcan los elementos*/
	opacity: 1;  
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
}
.timeline-item-img { /*Estilos de la imagen*/
	width: 150px;
	height: auto;
	margin-left: 145px;
	margin-top: -3vw;
}

/*________________SECTION 7____________________*/
.section7{
	background: white;
}
.guest_info{
	display: flex;
    flex-direction: column;
    align-items: center;
	background: #fbf4f5;
	box-shadow: 0 0 2vw rgb(139, 139, 139);
}
.section7 .title{
	text-align: center;
	font-size: 50px;
	margin: 0;
}
.section7 .subtitle{
	font-size: 25px;
}
.section7 li{
	font-size: 25px;
	list-style: none;
	margin-left: -20px;
}
.section7 input{
	margin-right: 10px;
}
.dropdown{
	display: inline-block;
	background-color: #ffffff00;
	padding: 10px;
	font-size: 18px;
	cursor: pointer;
	border: 1px solid;
	border-radius: 5px;
	text-align: left;
}	
.p7_primaryBtn{
	display: inline-block;
	background-color: #AE9366;
	border-radius: 10px;
	color: white;
	padding: 13px;
	text-decoration: none;
	font-size: 17px;
	letter-spacing: 5px;
	border: none;
	margin: 5%;
}
.dropdown_info{
	margin-top: 10%;
}
.dropdown_info button{
	font-size: 17px;
	color: white;
	background: #AE9366;
	padding: 10%;
	border: none;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	letter-spacing: 5px;
	line-height: 25px;
	box-shadow: 0px 1px 10px 4px rgba(0,0,0,0.2);
}

.guest_content_info{
	display: none;	
	background: #ffffff;	
	padding: 40px 0;
}
.guest_content_info>div{
	width: 90%;
	margin: 0 auto;
	padding: 25px;
	background-color:#fbf4f5;
	box-shadow: 0px 0px 7px 4px rgba(0,0,0,0.2);
}
.guest_form label{
	display: block;
	font-size: 18px;
}
.guest_form>input, .guest_form>select{
	height: 40px;
    width: 98%;
    margin: 15px 0;
}
.guest_form>div{
	position: relative;
	text-align: center;
}
.section7>p{
	text-align: center;
	margin-top: 80px;
	font-size: 24px;
}
/*_____________SECTION 8___________________*/
.section8, .section9{
	background: url("../images/fondo6.png");
	text-align: center;
}
.section8 .title{
	margin: 0px;
	font-size: 50px;
}
.section8 .subtitle{
    font-size: 25px;
    /* margin-bottom: 60px; */
}
.section8 img{
	width: 60%;
}
.section9 .title{
	margin-top: 0;
	font-size: 50px;
}
.section9>.subtitle{
	font-size: 25px;
	margin-bottom: 100px;
}
.gift_account{
	margin:20% 10%;
}
.gift_account, .dropdown_suggest1, .dropdown_suggest2{
	box-shadow: 0px 0px 7px -1px rgba(0,0,0,0.2);
	background: #fbf4f5;
	border-bottom: 2px solid #AE9366;
}
.gift_account button, .suggest1_btn, .suggest2_btn{
	background: none;
	border: none;
	font-size: 20px;
	padding: 8%;
}
.account_image_btn{
	width: 20px;
	margin-right: 20px;
	float: left;
}
.sobre{
	width: 20%;
	margin: -5%;
}
.amazon{
	width: 50%;
	margin-top: 10%;
	display: inline-block;
}
.gift_account_info, .suggest1_container, .suggest2_container{
	display: none;
	text-align: left;
	padding: 0 8%;
	display: none;
	transition: 1s ease height;
	font-size: 18px;
	line-height: 27px;
}
.account_title, .suggest1_title, .suggest2_title{
	margin-left: 20px;
	float: left;
}
.gift_table{
	padding-bottom: 60px;
}
.gift_table p{
 font-size: 18px;
 color: black;
}
.suggest1_btn, .suggest2_btn{
	width: 100%;
}
.section10{
	background: url("../images/fondo7.png");
	text-align: left;
}
.suggest1_container a{
	color:#755d33;
}
.dropdown_suggest2, .dropdown_suggest1{
	margin-bottom: 15%;
}
.section12{
	background: url("../images/fondo4.png");
	margin-top: -20px;
	margin-bottom: -6px;
	padding: 0 10%;

}
.section12 p{
	font-size: 20px;
	display: inline-block;
}




.slider-box{
	width: 500px;
	height: auto;
	margin: -20px auto 0;
	overflow: hidden;
}

.slider-box ul{
	display: flex;
	padding: 0;
	width: 500%;
	animation: slide 10s infinite alternate ease-in-out;
}

.slider-box li{
	width: 100%;
	list-style: none;
	position: relative;
}


.slider-box img{
	width: 100%;
}

@keyframes slide{
	0% {margin-left: -0%;}
	20% {margin-left: -0%;}

	25% {margin-left: -100%;}
	40% {margin-left: -100%;}

	45% {margin-left: -200%;}
	65% {margin-left: -200%;}
	
	70% {margin-left: -300%;}
	85% {margin-left: -300%;}

	95% {margin-left: -400%;}
	100% {margin-left: -400%;}
}



.confirm_container .title{
	padding: 0 8%;
	font-size: 50px;
	line-height: 50px;
	margin-bottom: 4%;
}























.show {display: block;}

/*FONTS*/
.main_title
{
	font-family: "ABeeZee", sans-serif;
}
.showhim,.showme a
{
	font-family: "Aboreto", system-ui;
}

.section2,.section1_info>h5,.subtitle, button, label, .section7>p, .btn a, .guest_info a,.main_container{
	font-family: "Philosopher", sans-serif;
}
.section1_info h1, .title, .section4>p, .section5>p, .section6>p{
	font-family: "MonteCarlo", Sans-serif; 
}

.banner_title, .page_title{
	font-family: 'kgPrimary';
}


/*TELEFONO*/
@media screen and (max-width: 1000px) { 
    .section1_container, .templateContainer,.confirm_container {
		max-width: none;
		height: fit-content;
    }
	.section1{		
		height: 80vh
	}
	.section1>div{
		padding-top: 20%;
	}
	.section1_info{
		transform: translate(0vw, -55%);
	}
	.section1_info h5{
		font-size: 5vw;
	}
	.section1_info h1{
		font-size: 10vw;
	}
	.templateContainer{
		margin-top: 0;
	}
	.section2{
		font-size: 40px;
		line-height: 80px;
	}
	.section3 .title{
		font-size: 70px;
		line-height: 80px;
	}
	.section4>p{
		padding: 5vw;
		font-size: 12vw;
	}
	.p1_cartel{
		width: 20vw;
		margin: 1.5vw;
	}
	.section4 .title{
		font-size: 10vw;
	}
	.section4 .subtitle{
		font-size: 6vw;
	}
	.section5>p{
		font-size: 100px;
	}
	.section5 .title{
		font-size: 90px;
	}
	.section5 .subtitle{
		font-size: 35px;
		line-height: 80px;
		margin-bottom: 80px;
	}
	.p1_primaryBtn {
		padding: 30px;
		font-size: 35px;
	}
	.btn {
		margin-bottom: 200px;
	}
	.section5_info {
		margin-bottom: 70px;
	}
	.section6>p{
		font-size: 10vw;
		margin-bottom: 300px;
	}
	.section6 .title{
		font-size: 80px;
	}
	.section6 .subtitle{
		font-size: 50px;
	}
	.timeline_item {  /* Estilo de la linea del timeline ante el circulo */
		margin-bottom: 250px;
	}
	.js-ag-active .timeline-card_point {
		width: 70px;
		height: 70px;
	}
	.timeline_line{
		width: 10px;
	}
	.timeline-item-img{
		width: 250px;
		margin-left: 300px;
	}
	.section7 .title{
		margin-top: 5vw;
		font-size: 12vw;
		line-height: 12vw;
	}
	.section7 .subtitle{
		width: 100%;
		text-align: center;
		font-size: 6vw;
	}
	.section7 li{
		line-height: 10vw;
		font-size: 5vw;
	}
	.section7 input{
		width: 3vw;
		height: 3vw;
		margin-right: 2vw;
	}
	.dropdown{
		font-size: 40px;
		padding: 20px 40px;
	}
	.guest_info{
		left: -70px;
	}
	.dropdown_info button {
		font-size: 40px;
		line-height: 55px;
	}
	.guest_form>input, .guest_form>select{
		height: 75px;
		font-size: 40px;
		margin: 25px 0;
	}
	.section7>p {
		font-size: 50px;
		margin-top: 100px;
	}
	.section7 select{
		font-size: 5vw;
	}
	
	.p7_primaryBtn{
		width: auto;
		font-size: 5vw;
        text-align: center;
	}
	.section8 .title, .section9 .title{
		font-size: 110px;
	}

	.section8 .subtitle{
		font-size: 40px;
		margin-bottom: 150px;
	}
	.section9 .subtitle{
		font-size: 35px;
	}
	.gift_account{
		margin: 20% 0%;
	}
	.gift_account button, .suggest1_btn, .section12 p{
		font-size: 55px;
	}
	.gift_account_info{
		line-height: 60px;
	}
	.gift_table{
		padding-bottom: 160px;
	}
	.slider-box{
		width: 100%;
	}
	
	.section12 p{
		line-height: 70px;
	}
	.slider-box ul{
		animation: slide 40s infinite alternate ease-in-out;
	}
	
	.confirm_container{
		background-attachment: fixed;
		height: 92vh;
	}

}