/*Generales*/
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;   
  font-family: -apple-system,system-ui,BlinkMacSystemFont,Roboto,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
  text-decoration: none;
  list-style: none;
  font-size: 1em;
}


/*Encabezados*/
h1{
	font-size: 1.75em;
	margin-top: -0.3em;
	margin-bottom: 0.65em;
	margin-left:1em;
	font-weight: bold;
	text-align: left;
}

h2{
	font-size: 1.35em;
	margin-top: 0.7em;
	margin-bottom: 0.7em;
	font-weight: bold;
}
h3{
	font-size: 1.15em;
	margin-top: 1em;
	margin-bottom: 1em;
	font-weight: bold;
}
h4{
	font-size: 1em;
	margin-top: 0.5em;
	margin-bottom: 0.2em;
	font-weight: bold;
}
h5{
	font-size: 0.83em;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	font-weight: bold;
}

p{
	margin-top: 1em;
	margin-bottom: 1em;	
}

.breadcrumb{
	margin-top: -0.1em;
	margin-left: 1.9em;
}

/*Layout*/

header{grid-area: header}
main{grid-area: main}
footer{grid-area: footer}

.container{
	display: grid;
	grid-template-columns: 33.3% 33.3% 33.3%;
	grid-template-areas: 'header header header'
 						 'main main main'
 						 'footer footer footer';
}

/*Start Menu*/
header {
  height: 68px;
  position: fixed;
  /* Set the navbar to fixed position */
  top: 0;
  /* Position the navbar at the top of the page */
  width: 100%;
  /* Full width */
  background: #F58E03;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  z-index: 1000;
}

.logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  padding: 5px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.logo img {
  padding-bottom: 4px;
  width: 98%; }

.social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.social img {
  padding-top: 5px;
  padding-right: 15px;
  width: 90%; }

.logo img:hover, h1:hover, .social img:hover {
  opacity: 0.85; }

header h1 {
  font-size: 1em;
  padding-left: 5px; }

header h1 a {
  color: #fff; }

header h2 {
  font-size: 1em;
  padding-left: 5px; }

header h2 a {
  color: #fff; }

header ul li a {
  font-weight: 550; }

.logo img {
  padding-top: 4px; }

#btn-menu {
  display: none; }

header label {
  font-size: 30px;
  cursor: pointer;
  display: none; }

.menu ul {
  background: #F58E03;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.menu ul ul {
  display: none; }

.menu ul ul li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.4); }

.menu a {
  display: block;
  padding: 15px 10px;
  color: #fff; }

.menu a:hover {
  background: rgba(0, 0, 0, 0.3); }

.menu a span {
  margin-left: 5px; }

.menu ul li:hover ul {
  display: block;
  position: absolute; }

/*End Menu NAV*/
/*MAIN-CONTAINER*/

main ul{
	padding-left: 40px;
}

main ul li{
  list-style-type: disc;   
}

main ul li ul li{
  list-style-type: circle;
}

.emoj{font-size: 1.3em}

/*Layout main*/
.tour-hero{grid-area: hero}
.tour-summary-box{
	grid-area: summary;
	border: 1px solid #F58E03;
	border-radius: 0.5em;
}
.spiritual-highlights{
	grid-area: spiritual;
	border: 1px solid #F58E03;
	border-radius: 0.5em;	
}

.tour-cta{
	text-align: center;	
}

.tour-cta a{
	background: #F58E03;
	border: 1px solid #6B3704;
	border-radius: 0.5em;
	padding: 0.5em;
	color: #FFFFFF;	
}
.tour-cta a:hover{
background: rgba(0, 0, 0, 0.7);
}

.tour-itinerary{grid-area: itinerary}
.who-this-tour-is-for{grid-area: who}
.mass-arrangements{grid-area: mass}
.included-services{
	grid-area: included;
	margin-top: -2em;
}
.customization-options{grid-area: customization}
.faq-section{grid-area: faq}
.final-cta{
	grid-area: cta;
	border: 1px solid #F58E03;
	border-radius: 0.5em;
}
.aside{grid-area: aside}

.mass-arrangements h2, .customization-options h2{
	border: 1px solid #F58E03;
	border-radius: 0.5em;
	padding: 0.5em
}

section{
	 /*<!--border: 1px solid #F58E03;-->*/
	padding: 1em;
}

section h2{text-align: center}

.pilgrimage-tour-page{
  width: 90%;
  margin-top: 68px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 1.5em;
  display:grid;
  grid-template-areas: 
	  "hero hero hero hero hero"
	  "summary summary spiritual spiritual aside"
	  "itinerary itinerary itinerary itinerary aside"
	  "included included included included aside"
	  "who who who who aside"	  
	  "mass mass customization customization aside"
	  "cta cta cta cta aside"	  
	  "faq faq faq faq faq";
	gap:1em;
}

.slider { 
  width: 90%; 
  margin: auto;
}

.slider img {
  width: 100%; 
  border: 1px solid #459D37; }

.items_container{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 1em;
}

.button {
  background: black;
  width: 45%;
  margin: auto;
  border-radius: 0.5em;
  -webkit-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
  margin-top: 1.5em;
  margin-bottom: 0.7em; }

.button a {
  display: block;
  color: #fff;
  font-weight: 700;
  text-align: center;
  padding: 0.5em}

.button:hover {
  background: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  /*box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);*/ }

.faq-section h2{
	padding: 0.5em;
	width: 50%;
	margin: auto;
	border: 1px solid #459D37;
	border-radius: 0.8em;	
	color: #000;    
}

.faq-section h3{
	font-size: 1.1em;
	border: 1px solid #459D37;
	border-radius: 0.5em;
	padding: 0.4em;
	text-align: center	
}

.faq-item h3{
	border: 1px solid #459D37;
	background: #459D37;
	color: #FFF;
    min-height: 3.5em;    
}


/*ASIDE*/

aside {
  text-align: center;
  border: 1px solid #459D37;
  background: #CCC; }

aside h2 {
  font-size: 1.1em;
  margin-top: 0;
  background: #459D37;  
  height: auto;
  min-height: 3em;
  padding: 0.15em;
  width: 100%;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 0.5em; }

aside h3{
	text-align: left;	
	padding: 0.15em;
	margin-left: 0.5em;
	margin-top: 0.1em !important;
	margin-bottom: 0.1em !important
}

aside p {
  text-align: left;
  padding-left: 0.5em;
  padding-right: 0.5em;
  margin-top: 0.5em;
  margin-bottom: 1.5em;
  font-size: 0.90em;	
}

.why-choose-this-tour h3{
  margin-top: -0.3em !important;
  margin-bottom: -0.2em !important;
}

.why-choose-this-tour p{
  margin-top: 0.2em !important;
  margin-bottom: 1em !important;	
}

aside h4{
  
  mergin-top: 0.5em;
  margin-bottom: 0.5em;}

aside em {
  font-weight: 600;
  display: block;
  text-align: center; }

aside ul li{
 font-size: 0.9em;
 margin-left: -1em;
 list-style-type: disc;
 text-align: left;
 padding-right: 0.3em;
 line-height: 1.35em;
}

aside .emoj{margin-right: -0.6em;}

/*FOOTER*/
.slogan {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
  grid-area: slogan; }

.asta {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
  grid-area: asta; }

.address {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: address; }

.copy {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 5;
  grid-area: copy; }

footer {
  margin-top: 0.5em;
  background: rgba(0, 0, 0, 0.9);
  padding: 0em;
  color: #fff;
  display: -ms-grid;
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr;  
  grid-template-rows: 0.2fr 0.3fr 0.2fr;
  grid-template-areas: 'slogan slogan slogan'
 'address address address'
 'copy copy copy';
  gap: 0em; }

footer p {
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 0.5em
}

footer a {
  color: #fff; }

footer img {
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.4em; }

.address, .slogan, .copy {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; } 

/*RESPONSIVE*/
/*Start Menu*/
@media (max-width: 768px) {
  h1{
	font-size: 1.45em;
	margin-top: 0em;
	margin-left: -0.2em;
	margin-bottom: 0.60em;	
	text-align: center;
}	
	
  h2{
	font-size: 1.25em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	}
	
/*Main Container*/
  .container {
    width: 100%;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
	grid-template-areas: 'header'
 						 'main'
 						 'footer';    
     }
	
	main ul{padding-left: 20px;}
	
	section{
		padding: 0.3em
	}
	
  header label {
    display: block; }
  * {
    font-size: 14px; }
  header h1 {
    display: none; }
  header h2 {
    display: none; }
  .menu {
    position: absolute;
    top: 68px;
    left: 0;
    width: 100%;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; }
  .menu ul {
    display: block;
    background: #555; }
  .menu ul li:hover ul {
    display: none;
    position: static; }
  .menu a span {
    position: absolute;
    right: 5px; }
  .social img {
    width: 83%;
    padding-right: 5px; }
  #btn-menu:checked ~ .menu {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%); }
  .menu ul ul {
    background: rgba(0, 0, 0, 0.6);
    position: static; }
  .menu ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
  .menu ul ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
  .menu ul ul a {
    padding: 15px 40px; }
  header ul li a {
    font-weight: 500; }
  /*End Menu*/
	
   .breadcrumb{	
	margin-left: -0.5em;
	margin-bottom: 0.5em;
	text-align: left;
   }
  
  .slider {
    -ms-grid-column-align: center;
    justify-self: center;
	width: 100%;}
  /*SECTION*/
	
   .included-services{margin-top: 1em;}
	
  .pilgrimage-tour-page {   
    grid-template-columns: 1fr;
    -ms-grid-rows: auto;   
    gap: 10px;
	grid-template-areas:
		'hero'
		'summary'
		'spiritual'
		'itinerary'
		'included'
		'who'
		'mass'		
		'customization'
		'cta'
		'faq'
		'aside';
	  gap:0.5em;
	}
	
	.items_container{	
	grid-template-columns: 1fr;
	gap: 0.5em;
}  
  .button {
    width: 75%; }
	
  .faq-section h2{
	padding: 0.3em;
	width: 75%;
	margin-top: 1em;
	margin-bottom: 0.7em;
	}
	.faq-item h3{
		margin-top: 0.3em;
		margin-bottom: 0.5em;
	}	
	

  /*ASIDE*/
	
 aside ul{margin-left: 1.3em;}
	
  /*FOOTER*/
  footer {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: 0.5fr 0.5fr 0.5fr;
    grid-template-rows: 0.5fr 0.5fr 0.5fr;
    grid-template-areas: 'slogan'
 'address' 
 'copy'; }
 }