@font-face{
	font-family: "Century Gothic";
	src: url("../font/GOTHIC.woff") format("woff");
}

@font-face{
	font-family: "Century Gothic Bold";
	src: url("../font/GOTHICB.woff") format("woff");
}

body, html{
	width: 100%;
	height: 100%;
	border: 0px;
	margin: 0px;
	padding: 0px;
	font-family: "Century Gothic";
	font-weight: bold;
	background-image: url('../images/templos-background.jpg');
	background-size: cover;
	background-attachment: fixed; 
}
.login-menu{
	color: #c8a949;
	font-family: "Century Gothic";
	font-weight: lighter;
	font-size: 0.9em;
	text-align: center;
	width: calc(100% - 60px);
	margin: 0 10px;
	padding: 10px 20px;
	background: rgba(200,200,200,0.1);
	border-radius: 3px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.login-menu i{
	font-size: 1.3em;
	margin-right: 5px;
}
.close-templo-btn{
	color: #e2e2e2;
	font-weight: normal;
	cursor: pointer;
	background: #222;
	padding: 7px 15px;
	border-radius: 30px;
	position: fixed;
	top: 36px;
	right: 40px;
	z-index: 26;
	font-weight: bold;
}
.menu-toggle-container{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 20;
	right: -100%;
	font-size: 0.85em;
}
.menu-toggle-contain{
	position: absolute;
	right: 0;
	width: 60%;
	max-width: 400px;
	height: 100%;
	right: 0px;
	background-image: -moz-linear-gradient( 120deg, rgb(74,74,74) 0%, rgb(0,0,0) 98%);
	background-image: -webkit-linear-gradient( 120deg, rgb(74,74,74) 0%, rgb(0,0,0) 98%);
	background-image: -ms-linear-gradient( 120deg, rgb(74,74,74) 0%, rgb(0,0,0) 98%);
	box-shadow: 0px 20px 41px 0px rgba(5, 0, 6, 0.4);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	overflow-y: auto;
}
.first-menu{
	flex: 90% 0 0;
}
.first-menu ul{
	display: block;
	margin: 0 auto;
	color: #b0b0b0;
	list-style: none;
	font-family: "Century Gothic Bold";
	font-weight: lighter;
	text-align: center;
	padding-left: 0;
}
.first-menu ul li{
	display: inline-block;
	margin-bottom: 20px;
	cursor: pointer;
	border-bottom: 1px solid #333;
	padding-bottom: 20px;
	width: 90%;
	transition: 0.3s
}
.first-menu ul li a{
	text-decoration: none;
	color: #b0b0b0;
	transition: 0.3s;
}
.first-menu ul li a:hover{
	color: white;
}
.first-menu ul li:hover{
	color: #fff;
}
.first-menu ul li:last-child{
	border-bottom: none;
}
.second-menu{
	flex: 90% 0 0;
	color: #a9a9a9;
}
.second-menu a{
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: #a9a9a9;
	transition: 0.3s;
	padding: 10px 0;
}
.second-menu a:hover{
	color: white;
}
.second-menu ul{
	display: block;
	list-style: none;
	text-align: center;
	padding: 0;
}
.second-menu ul li{
	padding: 0;
	margin: 5px 0;
	border: 1px solid #555555;
	transition: 0.3s;
	color: #555555;
	user-select: none;
}
.second-menu ul li.active{
	border: 1px solid #888888;
	color: #888888;
}
.second-menu ul li.active:hover{
	color: white;
	border: 1px solid white;
}

.top-menu-container{
	width: calc(100% - 60px);
	padding: 30px;
	position: fixed;
	z-index: 10;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.logo-top-container{
	width: 190px;
}
#logo-desktop{
	display: block;
	width: 100%;
	cursor: pointer;
}
#logo-mobile{
	display: none;
	width: 100%;
	cursor: pointer;
}
@media only screen and (max-width: 500px){
	.logo-top-container{
		width: 40px;
	}
	#logo-desktop{
		display: none;
	}
	#logo-mobile{
		display: block;
	}
}
.menu-btn-container{
	color: #e2e2e2;
	font-weight: normal;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}
#menu-btn{
	background: #222;
	padding: 7px 15px;
	border-radius: 30px;
	margin-right: -15px;
}
.container{
	width: 100%;
	min-height: 100%;
	margin: 0px;
	padding: 0px;
}
.container.home{
	position: relative;
	height: calc(100% + 100px);
	overflow: hidden;
	z-index: 1;
}
.home-protect{
	width: 100%;
	min-height: 100%;
	/*max-width: 1520px;*/
	margin: 0 auto;
}
.home-layer-2{
	width: 100%;
	height: 100%;
	background-image: -moz-linear-gradient( -61deg, rgb(74,74,74) 0%, rgb(0,0,0) 98%);
	background-image: -webkit-linear-gradient( -61deg, rgb(74,74,74) 0%, rgb(0,0,0) 98%);
	background-image: -ms-linear-gradient( -61deg, rgb(74,74,74) 0%, rgb(0,0,0) 98%);
	position: absolute;
	z-index: 2;
}
.home-layer-3{
	width: 100%;
	height: 100%;
	background-image: -moz-linear-gradient( 85deg, rgb(91,42,18) 12%, rgba(72,72,72,0) 20%);
	background-image: -webkit-linear-gradient( 85deg, rgb(91,42,18) 12%, rgba(72,72,72,0) 20%);
	background-image: -ms-linear-gradient( 85deg, rgb(91,42,18) 12%, rgba(72,72,72,0) 20%);
	position: absolute;
	z-index: 3;
}
.home-layer-4{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 4;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
@media only screen and (max-width: 500px){
	.home-layer-4{
		margin-top: -40px;
	}
}
.home-layer-4 .title-head-container{
	width: auto;
	height: 320px;
	margin-bottom: 10%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	max-width: calc(100%);
	font-weight: bold;
	position: relative;
}
.home-layer-4 .subtitle-head{
	font-size: 2.5em;
	color: rgba(255, 255, 255, 0.8);
	background: -webkit-linear-gradient(121deg, #5f5f5f, #ffffff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	/*background: red;*/
	font-family: "Century Gothic Bold";
	font-weight: lighter;
	line-height: 1em;
	margin: 0;
	padding: 0;
	position: absolute;
	margin-bottom: 6em;
	margin-right: 12em;
	/*max-width: calc(100% - 12em);*/
	animation: subtitleHome;
	animation-timing-function: ease-in-out;
	animation-duration: 15s;
	animation-iteration-count: 1;
	top: 0;
}
@media only screen and (max-width: 1000px){
	.home-layer-4 .subtitle-head{
		font-size: 1.65em;
	}
}
@media only screen and (max-width: 650px){
	.home-layer-4 .subtitle-head{
		width: 300px;
		font-size: 1.4em;
		margin-right: 5em;
		/*max-width: 100%;*/
		margin-bottom: 0;
		left: 30px;
	}
}
.home-layer-4 .title-head{
	font-size: 15em;
	height: auto;
	font-family: "Century Gothic Bold";
	font-weight: lighter;
	background: -webkit-linear-gradient(121deg, #2f2f2f, #ffffff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1em;
	margin-top: 15px;
	margin-right: 1em;
	padding: 0;
	animation: titleHome;
	animation-timing-function: ease-in-out;
	animation-duration: 10s;
	animation-iteration-count: 1;
	animation-delay: 2s;
	opacity: 0;
	animation-fill-mode: forwards;
}
@media only screen and (max-width: 1000px){
	.home-layer-4 .title-head{
		font-size: 10em;
	}
}
@media only screen and (max-width: 650px){
	.home-layer-4 .title-head{
		font-size: 8em;
		margin-right: 0;
		margin-top: 0;
	}
}
.home-layer-5{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 5;
	display: flex;
	justify-content: center;
	flex-wrap: wrap-reverse;
}
.home-layer-5 img{
	max-height: 700px;
	margin-left: 250px;
	animation: mainImage;
	animation-timing-function: ease-in-out;
	animation-duration: 5s;
	animation-iteration-count: 1;
	opacity: 0;
	animation-fill-mode: forwards;

}
@media only screen and (max-width: 650px){
	.home-layer-5 img{
		margin-left: 100px;
		max-height: 500px;
		max-width: 5000px;
	}
}
.home-layer-6{
	width: 100%;
	height: 100px;
	position: absolute;
	z-index: 6;
	bottom: 0px;
}

/*-----------------misionero-----------------*/

.container.misionero{
	width: 100%;
	min-height: 100%;
	position: relative;
	background: #2f2f2f;
	z-index: 2;
	padding: 30px 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	padding: 100px 0 0 0;
}
.misionero-text{
	flex: 50% 0 0;
	color: #c3c3c3;
}
@media only screen and (max-width: 800px){
	.misionero-text{
		flex: 100% 0 0;
	}
}
.misionero-text h2{
	font-size: 4em;
	font-family: "Century Gothic Bold";
	font-weight: lighter;
	line-height: 1em;
	margin: 0;
}
@media only screen and (max-width: 1130px){
	.misionero-text h2{
		font-size: 2em;
	}
}
.misionero-text h3{
	font-size: 2.5em;
	font-family: "Century Gothic Bold";
	font-weight: normal;
	line-height: 1em;
	margin: 0;
}
@media only screen and (max-width: 1130px){
	.misionero-text h3{
		font-size: 1.5em;
	}
}
.misionero-title-container{
	width: calc(100% - 40px);
	padding: 40px 20px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}
.misionero-title-left{
	padding: 0 40px;
	flex: auto 0 0;
}
@media only screen and (max-width: 1130px){
	.misionero-title-left{
		padding: 0;
		padding-left: 40px;
	}
}
.misionero-title-right{
	flex: 90px 0 0;
}
@media only screen and (max-width: 1130px){
	.misionero-title-right{
		flex: 70px 0 0;
	}
}
@media only screen and (max-width: 800px){
	.misionero-title-right{
		flex: 50px 0 0;
		padding-left: 10px;
	}
}
.misionero-title-right img{
	width: 100%;
}
.misionero-paragraph{
	padding: 0 60px;
	text-align: justify;
	font-weight: lighter;
}
.misionero-image-container{
	flex: 50% 0 0;
	padding-top: 40px;
	position: relative;
}
@media only screen and (max-width: 800px){
	.misionero-image-container{
		flex: 100% 0 0;
		margin-bottom: 150px;
		min-height: 400px;
	}
}
.misionero-image-contain{
	width: 100%;
	position: absolute;
	animation: slider;
	animation-duration: 15s;
	animation-iteration-count: infinite;
}
@media only screen and (max-width: 800px){
	.misionero-image-contain{
		width: 150%;
	}
}
.misionero-image-contain.third{
	animation-delay: 0s;
}
.misionero-image-contain.second{
	animation-delay: 5s;
}
.misionero-image-contain.first{
	animation-delay: 10s;
}
.misionero-image-contain img{
	width: 105%;
}
@media only screen and (max-width: 800px){
	.misionero-image-contain{
		width: 95%;
		margin: 0 auto;
	}
}
.btn-misionero-container{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 120px;
}
@media only screen and (max-width: 800px){
	.btn-misionero-container{
		margin-top: 100px;
		margin-bottom: 100px;
	}
}
.btn-misionero{
	background: #e2e2e2;
	color: #2f2f2f;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 50px;
	border-radius: 30px;
	cursor: pointer;
	transition: 0.3s;
}
.btn-misionero:hover{
	background: #d0d0d0;
}
.misionero-diagonal{
	width: 100%;
	height: 100px;
	position: relative;
	z-index: 2;
	bottom: 0px;
}
/*-----------------misionero-----------------*/

/*-----------------templos-----------------*/

.templos-container{
	width: 100%;
	min-height: 100%;
	position: relative;
}
.templos-contain{
	width: 95%;
	min-height: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	align-items: flex-start;
	flex-wrap: wrap;
	padding: 150px 0 0 0;
}
.buscador-templos-contain{
	flex: 35% 0 0;
}
.templos-title{
	text-align: center;
	font-family: "Century Gothic Bold";
	font-weight: normal;
}
#templos-form{
	width: 100%;
	margin-top: 50px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
}
#templos-form label{
	width: 100%;
	display: inline-block;
	margin: 0 auto;
	text-align: center;
	font-weight: lighter;
	font-family: "Century Gothic Bold";
}

.select-custom {
	width: 300px;
	height: 50px;
	border: 1px solid #2f2f2f;
	background-color: transparent;
	margin-bottom: 20px;
	text-align: center;
	font-family: "Century Gothic";
	font-weight: lighter;
	font-size: 1em;
	background-repeat: no-repeat;
	background-position: 270px 20px;
	position:relative;
	overflow: hidden;
}
select {
	background: transparent;
	border: none;
	font-size: 14px;
	height: 50px;
	padding: 5px;
	width: 302px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-align: center;
	font-family: "Century Gothic";
	font-weight: lighter;
}
select:focus{ outline: none;}

.select-custom::after{
	content:"\025be";
	display:table-cell;
	padding-top:15px;
	text-align:center;
	width:30px;
	height:50px;
	background-color:transparent;
	position:absolute;
	top:0;
	right:0px;	
	pointer-events: none;
}
.templo-card-contain{
	/*max-width: 500px;*/
	flex: 50% 0 0;
	min-height: 400px;
	position: relative;
	color: #2f2f2f;
	overflow: hidden;
	box-shadow: 0px 13px 41px 0px rgba(5, 0, 6, 0.28);
	opacity: 0;
}
@media only screen and (max-width: 800px){
	.templo-card-contain{
		flex: 100% 0 0;
		margin-top: 100px;
		margin-bottom: 100px;
	}
}
.templo-image{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
  	box-shadow: 0px 13px 41px 0px rgba(5, 0, 6, 0.28);
}
.templo-image img{
	width: 100%;
}
.templo-detail-contain{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;
	background-image: -moz-linear-gradient( 90deg, rgba(226,226,226, 1) 50%, rgba(0,0,0,0) 98%);
	background-image: -webkit-linear-gradient( 90deg, rgba(226,226,226, 1) 50%, rgba(0,0,0,0) 98%);
	background-image: -ms-linear-gradient( 90deg, rgba(226,226,226, 1) 50%, rgba(0,0,0,0) 98%);
}
.templo-detail{
	width: 100%;
	/*height: 60%;*/
	bottom: 0;
	position: absolute;
	z-index: 3;
	text-align: center;
	background: #e2e2e2;
}
.templo-detail p{
	font-family: "Century Gothic Bold";
	font-weight: lighter;
	margin: 5px;
}
.templo-title{
	font-family: "Century Gothic Bold";
	font-weight: lighter;
	letter-spacing: 0.0001em;
	margin-bottom: 30px;
	font-size: 1.4em;
}
.btn-templo{
	background: #2f2f2f;
	color: #e2e2e2;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 40px;
	border-radius: 25px;
	cursor: pointer;
	transition: 0.3s;
	margin: 25px auto;
}
.btn-templo:hover{
	background: #000;
}
/*-----------------templos-----------------*/

/*-----------------eventos-----------------*/

.eventos-container{
	width: 100%;
	min-height: 100%;
}
.eventos-title{
	width: calc(80% - 60px);
	max-width: 500px;
	margin: 0 auto;
	margin-bottom: 90px;
	background-color: #e2e2e2;
	padding:20px 30px;
	text-align: center;
	border-radius: 30px;
	box-shadow: 0px 13px 41px 0px rgba(5, 0, 6, 0.28);
	font-family: "Century Gothic Bold";
	font-weight: lighter;
	color: #2f2f2f;
}
.eventos-cards-container{
	width: 100%;
	min-height: 100%;
	padding-bottom: 150px;
	background: #2f2f2f;
	background: rgb(47,47,47);
	background: -moz-linear-gradient(90deg, rgba(47,47,47,1) 90.9%, rgba(47,47,47,0) 91%);
	background: -webkit-linear-gradient(90deg, rgba(47,47,47,1) 90.9%, rgba(47,47,47,0) 91%);
	background: linear-gradienet(90deg, rgba(47,47,47,1) 90.9%, rgba(47,47,47,0) 91%);
}
.eventos-cards-contain{
	width: 95%;
	max-width: 900px;
	margin: 0px auto;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
}
@media only screen and (max-width: 510px){
	.eventos-cards-contain{
		justify-content: center;
	}
}
.evento-card{
	flex: calc(33% - 40px) 0 0;
	max-width: 300px;
	height: 350px;
	border-radius: 30px;
	overflow: hidden;
	position: relative;
	margin: 0px 20px 40px 20px;
	min-width: 200px;
  	box-shadow: 0px 12px 41px 0px rgba(5, 0, 6, 0.7);
}

@media only screen and (max-width: 830px){
	.evento-card{
		margin: 0px 10px 20px 10px;
		flex: calc(50% - 20px) 0 0;
	}
}
@media only screen and (max-width: 510px){
	.evento-card{
		margin: 0px 10px 20px 10px;
		flex: calc(100% - 20px) 0 0;
	}
}
.evento-image{
	width: 100%;
	position: absolute;
	z-index: 1;
}
.evento-image img{
	width: 125%;
	margin-top: -25%;
	margin-left: -12%;
	position: absolute;
}
.evento-detail{
	width: 100%;
	height: 50%;
	position: absolute;
	z-index: 2;
	bottom: 0;
	background: #e2e2e2;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	font-family: "Century Gothic Bold";
	font-weight: lighter;
	color: #2f2f2f;
}
.evento-name{
	width: 90%;
	margin: 0 auto;
	text-align: center;
}
.evento-date{
	width: 100%;
	margin: 0;
	text-align: center;	
}
/*-----------------eventos-----------------*/

/*-----------------contacto-----------------*/

.contacto-container{
	width: 100%;
	background: #2f2f2f;
}
.contacto-subcontainer{
	width: 100%;
	min-height: 100%;
	background-image: url("../images/contacto-background.png");
	background-attachment: fixed;
	background-size: cover;
	background-position: 0px auto;
	padding-top: 100px;
	position: relative;
}
.contacto-contain{
	width: 95%;
	margin: 0 auto;
	max-width: 1000px;
	color: #e0e0e0;
}
.contacto-title{
	font-family: "Century Gothic Bold";
	font-weight: lighter;
	font-size: 1.5em;
	margin: 0 auto 100px auto;
	text-align: center;
}
.contacto-both{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
}
.contacto-paragraph{
	flex: 50% 1 0;
	font-weight: lighter;
	text-align: justify;
}
@media only screen and (max-width: 800px){
	.contacto-paragraph{
		flex: 80% 0 0;
		margin: 50px auto;
	}
}
.social-media{
	width: 100%;
	margin-top: 50px;
	padding-top: 50px;
	/*border-top: 1px solid #e2e2e2;*/
}
.social-media table{
	display: inline;
	list-style: none;
	font-size: 0.9em;
	 font-style: italic;
}
.social-media table tr{
}
.social-media table tr td{
	height: 40px;
	vertical-align: top;
}
.social-media table tr td:first-child{
	width: 20px;
	text-align: center;
	font-size: 1.2em;
}
.social-media table tr td:nth-child(2){
	padding-left: 10px;
}
.contacto-form{
	flex: 50% 1 0;
}
#contacto-form{
	width: 90%;
	margin: 0 auto;
	text-align: center;
}
#contacto-form label{
	width: 100%;
	text-align: center;
	display: inline-block;
}
#contacto-form input{
	width: 100%;
	max-width: 250px;
	margin: 0 auto;
	height: 40px;
	border-radius: 30px;
	border: 1px solid #e3e3e3;
	background: transparent;
	padding: 7px 10px;
	color: #e3e3e3;
	font-family: "Century Gothic";
	font-size: 0.9em;
	font-weight: lighter;
}
#contacto-form textarea{
	width: calc(100% - 20px);
	max-width: 250px;
	padding: 15px 10px;
	margin: 0 auto 20px auto;
	border: 1px solid #e3e3e3;
	color: #e3e3e3;
	border-radius: 30px;
	background: transparent;
	font-family: "Century Gothic";
	font-size: 0.9em;
	font-weight: lighter;
	height: 150px;
}
#contacto-form p{
	margin-bottom: 40px;
	font-size: 0.8em;
	color: #F01D47;
}
.contacto-diagonal{
	font-weight: normal;
	margin-top: 100px;
	width: 100%;
	height: 100px;
	bottom: 0px;
}
.contacto-button{
	background-color: #e3e3e3 !important;
	color: #2f2f2f !important;
	cursor: pointer;
	transition: 0.3s;
	padding: 7px;
	height: 30px;
	width: calc(100% - 14px);
	max-width: 250px;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	margin: 0 auto;
	border-radius: 30px;
}
.contacto-button:hover{
	background-color: #d0d0d0 !important;
}
.sucess{
	color: #e2e2e2 !important;
}
/*-----------------contacto-----------------*/

/*-----------------footer-----------------*/
.footer-contain{
	width: 100%;
	padding: 100px 0;
	background: #222222;
}
.footer-logo{
	width: 100%;
	text-align: center;
}
.footer-logo img{
	width: 40px;
}
.footer-flags{
	width: 95%;
	max-width: 1000px;
	margin: 50px auto 40px auto;
	border-bottom: 1px solid #e0e0e0;
	padding-bottom: 7px;
	text-align: left;
}
.sitemap-container{
	width: 95%;
	max-width: 1000px;
	margin: 0 auto;
	color: #e0e0e0;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	font-size: 0.8em;
}
@media only screen and (max-width: 800px){
	.sitemap-container{
		justify-content: flex-start;
	}
}
.sitemap-container ul{
	flex: 20% 0 0;
	display: inline-block;
	list-style: none;
	margin-left: -40px;
	margin-bottom: 30px;
}
@media only screen and (max-width: 850px){
	.sitemap-container ul{
		flex: 25% 0 0;
	}
}
@media only screen and (max-width: 600px){
	.sitemap-container ul{
		flex: 33% 0 0;
	}
}
.sitemap-container ul li{
	font-weight: lighter;
}
.sitemap-container ul li:first-child{
	font-family: "Century Gothic Bold";
	font-weight: lighter;
}
@media only screen and (max-width: 800px){
	.footer-flags{
		text-align: center;
		margin-top: 100px;
	}
}
.footer-flags img{
	margin-right: 5px;
}
.trademark{
	width: 100%;
	text-align: center;
	margin-top: 100px;
	color: #e0e0e0;
	font-style: italic;
	font-weight: lighter;
	font-size: 0.8em;
}
/*-----------------footer-----------------*/

/*-----------------modal templo-----------------*/

.templo-modal-container{
	position: fixed;
	z-index: 30;
	overflow-y: scroll;
	width: 100%;
	height: calc(100% - 47px);
	padding-top: 47px;
	background-color: rgba(255,255,255,0.8);
	animation: showDiv;
	animation-timing-function: ease-in-out;
	animation-duration: 0.3s;
	animation-iteration-count: 1;
	display: none;
}
.templo-modal-container.show{
	display: block;
}
.templo-modal-contain{
	width: 90%;
	max-width: 800px;
	box-shadow: 0px 12px 95px 0px rgba(5, 0, 6, 0.7);
	background-color: #e0e0e0;
	margin: 0 auto 70px auto;
	padding-bottom: 50px;
}
.templo-modal-image-contain{
	width: 100%;
	position: relative;
	/*min-height: 200px;*/
}
.templo-modal-gradient{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 2;
	background: rgb(4,0,66);
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); 
}
.templo-modal-image{
	height: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.templo-modal-image img{
	width: 100%;
}
.templo-modal-header-container{
	width: 100%;
	position: absolute;
	z-index: 3;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	flex-wrap: wrap;
}
.templo-modal-nombre{
	flex: calc(60% - 40px) 0 0;
	padding: 10px 20px;
}
.templo-modal-nombre h1{
	color: #e2e2e2;
	font-size: 2em;
	margin: 0;
	padding: 0;
	font-family: "Century Gothic Bold";
	font-weight: lighter;
}
@media only screen and (max-width: 600px){
	.templo-modal-nombre h1{
		font-size: 1.1em;
	}

}
.templo-modal-nombre i{
	color: #ff5858 !important;
	margin-right: 5px;
	font-size: 1.5em;
}
.templo-modal-nombre p{
	font-weight: lighter;
	font-size: 0.8em;
	color: #e2e2e2;
	margin: 0;
	padding: 0;
}
@media only screen and (max-width: 600px){
	.templo-modal-nombre p{
		font-size: 0.8em;
	}

}
.templo-modal-contacto{
	flex: calc(40%) 0 0;
	padding: 10px 0px;
	text-align: left;
	color: #e2e2e2;
}
.templo-modal-contacto p{
	font-size: 0.7em;
	margin: 0;;
}
.templo-modal-contacto-container{
	width: calc(90% - 20px);
	background: rgb(27,49,89);
	background: linear-gradient(50deg, rgba(27,49,89,1) 0%, rgba(11,26,51,1) 100%); 
	border-radius: 10px;
	padding: 10px;
	text-align: center;
	font-weight: lighter;
}
.templo-modal-body-container{
	width: 100%;
	min-height: 300px;
}
.templo-modal-description{
	width: calc(100% - 40px);
	padding: 30px 20px;
	font-weight: lighter;
	font-size: 0.9em;
	text-align: justify;
}
.templo-modal-presencial-container{
	width: calc(100% - 40px);
	position: relative;
	margin: 0 auto;
}
.templo-modal-title{
	position: absolute;
	z-index: 2;
	background-color: #2f2f2f;
	padding: 5px;
	text-align: center;
	border-radius: 10px;
	width: 80%;
	margin: 0 auto 0 10%;
	top: -10px;
}
.templo-modal-title p{
	color: #e0e0e0;
	font-weight: lighter;
	margin: 0;
}
@media only screen and (max-width: 600px){
	.templo-modal-title p{
		font-size: 0.8em !important;
	}
}
.templo-modal-body{
	width: calc(100% - 40px);
	background-color: white;
	border-radius: 10px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	padding: 60px 20px 30px 20px;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.templo-modal-body ul{
	flex: calc(30% - 20px) 0 0;
	display: inline;
	list-style: none;
	margin-left: 0px;
	padding: 0px;
	border: 1px solid #e0e0e0;
	/*background: #e0e0e0*/
	font-size: 0.8em;
	min-width: 150px;
	padding: 10px;
	border-radius: 10px;
}
.templo-modal-body ul li{
	font-weight: lighter;
	margin-bottom: 10px;
}
.templo-modal-body ul li:first-child{
	margin-bottom: 20px;
	font-family: "Century Gothic Bold";
	font-weight: lighter;
}
.modal-realiza-online-container{
	width: 95%;
	margin: 20px auto;
	font-weight: lighter;
	font-size: 0.9em;
}
.modal-realiza-online-container i{
	color: #ff5858;
	font-size: 1.2em;
	margin-right: 5px;
}
.templo-modal-footer-container{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 95%;
	margin: 0 auto;
}
.templo-modal-plataformas-container{
	flex: 70% 1 0;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
	font-size: 0.8em;
}
.templo-modal-plataforma-title{
	position: absolute;
	z-index: 2;
	background-color: #c80909;
	padding: 5px;
	text-align: center;
	border-radius: 10px;
	width: calc(80% - 10px);
	top: -10px;
}
.templo-modal-plataforma-title p{
	color: #e0e0e0;
	font-weight: lighter;
	margin: 0;
}
.templo-modal-plataforma-body{
	width: calc(100% - 40px);
	background-color: white;
	border-radius: 10px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	padding: 60px 20px 30px 20px;
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}
.templo-modal-plataforma-list{
	flex: 100% 0 0;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
}
.templo-modal-plataforma-list ul{
	font-weight: lighter;
	display: inline-block !important;
	list-style: none;
	margin: 10px;
	display: inline;
	list-style: none;
	padding: 0px;
	border: 1px solid #e0e0e0;
	min-width: 150px;
	padding: 10px;
	border-radius: 10px;
}
.templo-modal-plataforma-list ul li:first-child{
	margin-bottom: 15px;
	font-family: "Century Gothic Bold";
	font-weight: lighter;
}
.templo-modal-plataforma-list ul li{
	margin-bottom: 7px;
}
.templo-modal-rrss{
	flex: calc(30% - 20px) 1 0;
	min-height: 100%;
	padding: 0 10px;
	margin-top: 20px;
}
.templo-modal-rrss p{
	font-family: "Century Gothic Bold";
	font-weight: lighter;
	margin: 0;
	margin-left: 5px;
}
.templo-modal-rrss table{
	width: 100%;
	font-weight: lighter;
	margin-top: 20px;
	font-size: 0.8em;
}
.templo-modal-rrss table tr td:first-child{
	text-align: center;
	padding: 0;
}
/*-----------------modal templo-----------------*/

/*------------------- blog -------------------*/

.blog-home-container{
	width: 100%;
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
}
.blog-title-container{
	position: absolute;
	bottom: 0;
	margin-bottom: 20px;
	z-index: 3;
	font-family: "Century Gothic Bold";
	font-weight: lighter;
	color: white;
	width: 95%;
	max-width: 800px;
}
.blog-filter-container{
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 1;
	z-index: 2;
	background-image: -moz-linear-gradient( 50deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 98%);
	background-image: -webkit-linear-gradient( 50deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 98%);
	background-image: -ms-linear-gradient( 50deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 98%);
}
.blog-img-container{
	width: 100%;
	background-size: cover;
	background-position: center center;
	position: absolute;
	z-index: 1;
	height: 100%;
	overflow: hidden;
	/*background-attachment: fixed;*/
}
.blog-img-container img{
	width: 100%;
	min-height: 100%;
}
.blog-body-container{
	min-width: 100%;
	min-height: 100%;
	background: #f2f2f2;
}
.blog-body-contain{
	width: 95%;
	padding: 10px 0 100px 0;
	margin: 0 auto;
	max-width: 800px;
	font-weight: lighter;
	text-align: justify;
	font-size: 0.9em;
	line-height: 1.5em;
}
.blog-target-container:first-child{
	margin-top: 100px;
}
.blog-target-container{
	width: 100%;
	margin-bottom: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	background-color: white;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0px 20px 41px 0px rgba(5, 0, 6, 0.2);
}
.blog-target-left{
	flex: 50% 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.blog-target-text{
	flex: 100% 0 0;
}
.blog-target-title{
	width: 95%;
	max-width: 250px;
	margin: 0 auto;
	padding: 10px 0;
	text-align: center;
	font-family: "Century Gothic Bold";
	font-weight: lighter;
	font-size: 1.2em;
	color: #555;
	text-align: center;
}
.blog-target-body{
	width: calc(100% - 20px);
	padding: 15px 10px;
	margin: 0 auto;
	max-width: 340px;
	font-size: 0.95em;
	line-height: 1em;
	color: #555;
}
.blog-target-button{
	width: calc(95% - 40px);
	margin: 0 auto;
	max-width: 300px;
	height: 30px;
	padding: 7px 20px;
	border-radius: 7px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	cursor: pointer;
	font-size: 0.95em;
	background-color: #555;
	color: white;
	transition: 0.3s;
	text-decoration: none;
}
.blog-target-button:hover{
	background-color: #777
}
.blog-target-right{
	flex: 50% 0 0;
	min-height: 250px;
	background-color: #f0f0f0;
	background-size: cover;
	background-position: center center;
}
.blog-target-right img{
	width: 100%;
}
.blog-bajada{
	width: 100%;
	text-align: right;
	font-size: 0.8em;
	margin-top: 20px;
	margin-bottom: 40px;
}
.blog-bajada p{
	margin: 0;
	font-style: italic;
	padding: 0;
	line-height: 1.1em;
}
.blog-body-contain h3{
	font-family: "Century Gothic Bold";
	font-weight: lighter;
	font-size: 1.3em;
	margin: 40px 0;
}

.sugeridos-container{
	width: 100%;
	min-height: 40px;
	background: #e0e0e0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.sugeridos-contain{
	width: 95%;
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	padding: 40px 0;
}
.sugerido-title{
	flex: 100% 0 0;
	margin-bottom: 20px;
	font-family: 'Century Gothic Bold';
	font-weight: lighter;
}
.sugerido-target-contain{
	flex: calc(32% - 10px) 1 0;
	margin: 5px;
	height: 150px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	min-width: 150px;
	background-size: cover;
	background-position: center center;
	text-align: center;
}
.sugerido-target-title{
	text-decoration: none;
	color: white;
	display: block;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	background-color: rgba(0,0,0,0.6);
	text-align: center;
}
/*------------------- blog -------------------*/

@keyframes titleHome{
	0%{
		margin-left: 0px;
		opacity: 0;
	}
	40%{
		margin-left: -40px;
		opacity: 1;
	}
	100%{
		margin-left: 0px;
		opacity: 1;
	}
}

@keyframes subtitleHome{
	0%{
		margin-left: 0px;
		opacity: 0;
	}
	40%{
		margin-left: -20px;
		opacity: 1;
	}
	100%{
		margin-left: 0px;
	}
}
@keyframes mainImage{
	0%{
		opacity: 0;
		margin-right: 20px;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 1;
		margin-right: 0px;
	}
}
@keyframes showDiv{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes slider{
	35%{
		opacity: 1;
	}
	40%{
		opacity: 0;
	}
	95%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}