@import url('https://fonts.googleapis.com/css?family=Oxygen:700');
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

#paca{
 height: 400px;
}

.about h2{
	font-size: 90px;
	color: #fff;
	margin-top: 80px;
	font-family: 'Roboto', sans-serif;
}
.about h4{
	font-size: 24px;
	color: #fff;
	margin-bottom: 45px;
	font-family: 'Roboto', sans-serif;
}
.about-img img{
	width: 100%;
}
.single-about-detail{
	position: relative;
}
.pentagon-text h1{
	font-size: 40px;
	color: #383838;
	margin-top: 0;
	transition: all .7s ease 0s;
	-webkit-transition: all .7s ease 0s;
	-moz-transition: all .7s ease 0s;
	-o-transition: all .7s ease 0s;
	-ms-transition: all .7s ease 0s;
	position: absolute;
	  left: 15%;
	  width: 50px;
	  top: -6%;
}
.pentagon-text {
  width: 70px;
  height: 52px;
  background: #fff;
  position: relative;
   top: -30px;
  left: 39%;
}
.pentagon-text:before {
  content: "";
  position: absolute;
  top: -15px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 34px solid transparent;
  border-right: 35px solid transparent;
  border-bottom: 15px solid #fff;
}
.pentagon-text:after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 0;
  height: 0px;
  border-left: 36px solid transparent;
  border-right: 34px solid transparent;
  border-top: 15px solid #fff;
}
.about-details{
	background: #2a2a2a;
	height: 300px;
	border-top: 2px solid #fff;
	transition: all .7s ease 0s;
	-webkit-transition: all .7s ease 0s;
	-moz-transition: all .7s ease 0s;
	-o-transition: all .7s ease 0s;
	-ms-transition: all .7s ease 0s;
}
.about-details h3{
	font-size: 36px;
	color: #fff;
	margin-top: 0;
}
.about-details p{
	font-size: 20px;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	padding: 0 25px;
	padding-bottom: 30px;
}

.about-details2{
	background: #fff;
	height: 100px;
	border-top: 2px solid #fff;
	transition: all .7s ease 0s;
	-webkit-transition: all .7s ease 0s;
	-moz-transition: all .7s ease 0s;
	-o-transition: all .7s ease 0s;
	-ms-transition: all .7s ease 0s;
}

.about-details2 h3{
	font-size: 36px;
	color: #000;
	margin-top: 0;
}
.about-details2 p{
	font-size: 20px;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	padding: 0 25px;
	padding-bottom: 30px;
}

.about-details3{
	background: #2a2a2a;
	height: 100px;
	width: 100%;
	border: 13px solid #fff;
	transition: all .7s ease 0s;
	-webkit-transition: all .7s ease 0s;
	-moz-transition: all .7s ease 0s;
	-o-transition: all .7s ease 0s;
	-ms-transition: all .7s ease 0s;
}
.about-details3 h3{
	font-size: 36px;
	color: #fff;
	margin-top: 0;
}
.about-details3 p{
	font-size: 20px;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	padding: 0 25px;
	padding-bottom: 30px;
}

.about-details4{
	background: #2a2a2a;
	height: 180px;
	border-top: 2px solid #fff;
	transition: all .7s ease 0s;
	-webkit-transition: all .7s ease 0s;
	-moz-transition: all .7s ease 0s;
	-o-transition: all .7s ease 0s;
	-ms-transition: all .7s ease 0s;
}
.about-details4 h3{
	font-size: 36px;
	color: #fff;
	margin-top: 0;
}
.about-details4 p{
	font-size: 20px;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	padding: 0 25px;
	padding-bottom: 30px;
}



.single-about-detail:hover .about-details{
	background: rgba(246, 13, 13, 0.9);
}
.single-about-detail:hover .pentagon-text h1{
	color:black;
}

.single-about-detail:hover .about-details3{
	background: rgba(246, 13, 13, 0.9);
}


.single-about-detail:hover .about-details4{
	background: rgba(246, 13, 13, 0.9);
}

/*--------------------
Modales
--------------------*/

.modal-content {
	border-radius: 0;	
}
.modal-header .close {
	font-size: 30px;	
}
.modal-title {    
	text-transform: uppercase;
	font-size: 23px;
}

.modal-body {
	padding: 0;
}

.modal-body p {
	margin: 30px 20px;
	color: #2D2D2D;		
}

.modal-works {
font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
    color: #fff;
    margin: 25px 20px;
}

.modal-works span {
	background-color: #FED136;
    margin-right: 15px;
    padding: 5px 10px;
}

@media (max-width: 991px) {
.about h2{
	font-size: 50px;
	color: #fff;
	margin-top: 80px;
	font-family: 'Roboto', sans-serif;
}

#paca{
 height: 300px;
}

.about h4{
	display: none;
}

}