body {
	background-color: rgb(245, 245, 245);	 
	font-family: "Poppins", sans-serif;  
}
#masthead{
	padding-top: 200px;
	padding-bottom: 200px; 
	text-align: center;
	background-image: url("/assets/img/fcobuelna_DSC9130.jpg");
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: center center;
	background-size: cover;		
	margin-bottom: 50px;
	position: relative;
	z-index: -1;	
}

.banner-masthead {
	background-color: white;
	position: relative;
	margin: 0 auto;
	max-width: 1400px;
	bottom: -15rem;
	padding: 20px;
	border-radius: 5px;
    box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.1);
	color: #004d0b;
	width: 300px;	 
}  

#masthead .masthead-heading {
    font-size: 25px; 
    font-weight: 700;
    font-family: "Poppins", sans-serif;
}

@media (min-width: 768px) {
	.banner-masthead {width: 300px;}  
	.masthead .masthead-heading {font-size: 80%;}	
}

/*---------------------------------------------------------------------------------------*/
/* ANTECEDENTES
/*---------------------------------------------------------------------------------------*/

#precedents{
	max-width: 1700px; 
	margin-right: auto;  
	margin-left: auto;	
	margin-top: 6rem;
	margin-bottom: 5rem;
}

#title  h2 {	
	margin-top: 30px;
	padding-left: 10%;
}

#content{
	margin-top: 8rem;
	padding-left: 10%;
	padding-right: 10%;	
}



#content p {
	text-align: justify;
	line-height: 30px;
}

#content > .card{
	border: none;	
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
	border-radius: 5px;	
}

#content p,
#content div,
#content h3 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

#content p.in-view,
#content div.in-view,
#content h3.in-view {
    opacity: 1;
    transform: translateY(0);
}


.hover-scale {
	transition: transform 0.3s ease;
}

.hover-scale:hover {
	transform: scale(1.1);
}

.pentagon-right{
    position: absolute;  
    width: 400px; 
    height: 80px; 
    background-color: black; 
    clip-path: polygon(0% 0%, 75% 0%, 80% 50%, 75% 100%, 0% 100%);
    z-index: 1; 
}

.pentagon-shadow {
    position: absolute;  
    width: 400px; 
    height: 80px; 
    background-color: rgb(183, 167, 78); 
    clip-path: polygon(0% 0%, 75% 0%, 80% 50%, 75% 100%, 0% 100%);
    z-index: 0;
    top: 20px;     
}

@media (min-width: 768px) {		
	.pentagon-right{
		position: absolute;  
		width: 800px; 
		height: 100px; 
		background-color: black; 
		clip-path: polygon(0% 0%, 75% 0%, 80% 50%, 75% 100%, 0% 100%);
		z-index: 1; 
	}
	
	.pentagon-shadow {
		position: absolute;  
		width: 800px; 
		height: 100px; 
		background-color: rgb(183, 167, 78); 
		clip-path: polygon(0% 0%, 75% 0%, 80% 50%, 75% 100%, 0% 100%);
		z-index: 0;
		top: 20px; 		
	}	
}