.media { float:left; width:100%; padding:55px 0 160px; }
.media h2 { float:left; width:100%; font-size:83px; line-height:83px; padding-bottom:70px; color:#1a1819; font-family: 'helveticaneuebold';}
.media h4 { font-size:24px; color:#000000; font-family: 'helveticaneuebold'; line-height:28px; border-left:9px solid #7eaacf; display: inline-block; padding-left:20px; margin-bottom:60px; }
.media ul { float:left; width:100%; display: flex; flex-flow: wrap;}
.media ul li { float:left; width:32%; margin-right:2%; margin-bottom:20px; transition:all .5s ease; border: 3px solid transparent;}
.media ul li.gran {width:66%;}
.media ul li.mr-0 {margin-right: 0;}
.media ul li .media-img { float:left; width:100%;}
.media ul li .media-img img { float:left; width:100%;object-fit: cover;}
.media ul li .media-cont { float:left; width:100%; background:#ffffff; border-top:0px solid #ffffff; padding:26px 24px; transition:all .5s ease;}
.media ul li .media-cont h2 { float:left; width:100%; font-size:24px; color:#000000; font-family: 'helveticaneuemedium'; line-height:28px; padding-bottom:15px;}
.media ul li .media-cont p { float:left; display: none; width:100%; font-size:16px; color:#000000; line-height:28px; padding-bottom:65px;}
.media ul li .media-cont span { float:left; width:100%; background:url(../images/clock-date.svg) no-repeat left center; font-size:12px; color:#000000; font-family: 'helveticaneuebold'; line-height:28px; padding-left:25px;}

.media ul li:not(.cita):hover .media-cont { background:#f9f9f9;}
.media ul li a {display: flex; height: 100%; flex-direction: column}
.media ul li a .media-cont {flex: 1; display: flex; flex-flow: wrap; flex-direction: column;}
.media ul li a .media-cont h2 {flex: 1;}

.media ul li.negre .media-cont { background:#1a1819; /* border:3px solid #1a1819; */ border-top:0px solid #1a1819;}
.media ul li.negre:hover .media-cont { background:#ffffff; border-top:0px solid #ffffff;}
.media ul li.negre .media-cont h2, .media ul li.negre .media-cont p, .media ul li.negre .media-cont span { color:#ffffff;}
.media ul li.negre:hover .media-cont h2, .media ul li.negre:hover .media-cont p { color:#1a1819;}
.media ul li.negre:hover .media-cont span { background:url(../images/clock-date-blk.svg) no-repeat left center; color:#1a1819;}
.media ul li.negre:hover {border: 3px solid #1a1819;}

.media .media-ogr ul li:last-child { width:66%;}
.media .media-ogr ul li:last-child .media-cont p {display: block;}

.media ul li.vermell .media-cont { background:#e15c57; /* border:3px solid #e15c57; */ border-top:0px solid #e15c57;}
.media ul li.vermell:hover .media-cont { background:#ffffff; border-top:0px solid #ffffff;}
.media ul li.vermell .media-cont h2, .media ul li.vermell .media-cont p, .media ul li.vermell .media-cont span { color:#ffffff;}
.media ul li.vermell:hover .media-cont h2, .media ul li.vermell:hover .media-cont p { color:#e15c57; }
.media ul li.vermell:hover .media-cont span { background:url(../images/clock-date-org.svg) no-repeat left center; color:#e15c57;}
.media ul li.vermell:hover {border: 3px solid #e15c57;}


.media-btn { float:left; width:100%; text-align:center; margin-top:60px;}
.media-btn a { background: #1a1819 none repeat scroll 0 0; color: #ffffff; padding:25px 50px; display: inline-block; float: none; display:inline-block; font-size: 24px; line-height: 18px; border:1px solid #1a1819; font-family: 'helveticaneuebold'; width: 235px; cursor:pointer; transition:all .5s ease; -moz-transition:all .5s ease; -webkit-transition:all .5s ease; -o-transition:all .5s ease;}
.media-btn a:hover {background: #e15c57; color:#ffffff; border:1px solid #e15c57;}

.media ul li .media-qt { float:left; width:100%; padding:26px 24px; height:100%;}
.media ul li .media-qt h5 { float:right; width:100%; text-align:right; color:#9fa3a7; font-family: 'helveticaneueitalic'; font-size:16px; padding-bottom:65px;}
.media ul li .media-qt h3 { float:left; width:100%; text-align:center; font-size: 42px; line-height: 54px; padding: 0 15%; position:relative; z-index:1;}
.media ul li .media-qt h3::after { position:absolute; content:""; background:url(../images/Shape.svg) no-repeat left center; margin:0 auto; width:227px; height:150px; left:0; right:0; top:16%; z-index:-1;}

.media.main { padding:80px 0 100px;}
.media.main h4 { text-transform:uppercase;}
.media-btn-mob { float:left; width:100%; text-align:center; margin-top:60px; display:none;}
.media-btn-mob a { background: #1a1819 none repeat scroll 0 0; color: #ffffff; padding:25px 50px; display: inline-block; float: none; display:inline-block; font-size: 24px; line-height: 18px; border:1px solid #1a1819; font-family: 'helveticaneuebold'; width: 235px; cursor:pointer; transition:all .5s ease; -moz-transition:all .5s ease; -webkit-transition:all .5s ease; -o-transition:all .5s ease;}
.media-btn-mob a:hover {background: #e15c57; color:#ffffff; border:1px solid #e15c57;}

@media screen and (min-width:1024px) and (max-width:1279px) {
	.media {padding: 55px 0 80px;}
	.media h1 {padding-bottom: 40px; font-size: 53px; line-height: 53px;}
	.media h4 { font-size: 22px;margin-bottom: 40px;}
	.media-btn {margin-top: 30px;}
	.media ul li .media-qt h3 { padding:0;}
	.media ul li .media-qt h5 {padding-bottom: 27px;}

	.media.main { padding: 50px 0 70px;}
}

/* Smaller than standard 1024 (devices and browsers) */
@media screen and (min-width:768px) and (max-width:1023px) {
	.media {padding: 55px 0 80px;}
	.media h1 {padding-bottom: 40px; font-size: 53px; line-height: 53px;}
	.media h4 { font-size: 20px; margin-bottom: 40px;}
	.media-btn {margin-top: 30px;}
	.media ul li .media-qt h5 {padding-bottom: 29px;}
	.media ul li .media-qt h3 { padding:0; font-size: 35px; line-height: 54px;}
	.media ul li .media-qt h3::after { left:-20px;}
	.media.main { padding: 50px 0 70px;}

}

@media screen and (max-width:767px) {
	.media {padding: 15px 0 40px;}
	.media h1 {font-size: 40px; line-height: 40px; padding-bottom:20px;}
	.media h4 {font-size: 20px; line-height: 28px; padding-left: 0; border-left: none; margin-bottom:25px;}
	.media-btn { display: none;}
	.media-btn-mob { display:block; margin-top: 0px;}
	.media-btn-mob a { width:100%;font-size: 18px;padding: 15px 50px;}
	.moretext { display: none;}
	.media ul {float: none;}
	.media ul li.gran,
	.media ul li { width:48%;}
	.media ul li:nth-child(2n) { margin-right:0!important;}
	.media .media-ogr ul li:first-child { margin-right:0;}
	.media .media-ogr ul li:last-child { width:100%;}

	.media .media-blk ul li:first-child .media-cont { background:#e15c57; border:3px solid #e15c57; border-top:0px solid #e15c57;}
	.media .media-blk ul li:first-child:hover .media-cont { background:#ffffff; border-top:0px solid #ffffff;}
	.media .media-blk ul li:first-child .media-cont h2, .media .media-blk ul li:first-child .media-cont p, .media .media-blk ul li:first-child .media-cont span { color:#ffffff;}
	.media .media-blk ul li:first-child:hover .media-cont h2, .media .media-blk ul li:first-child:hover .media-cont p { color:#e15c57;}
	.media .media-blk ul li:first-child:hover .media-cont span { background:url(../images/clock-date-org.svg) no-repeat left center; color:#e15c57;}

	.media .media-ogr ul li:first-child .media-cont { background:#ffffff; border:3px solid #ffffff; border-top:0px solid #ffffff;}
	.media .media-ogr ul li:first-child:hover .media-cont { background:#f9f9f9; border:3px solid #f9f9f9; border-top:0px solid #f9f9f9;}
	.media .media-ogr ul li:first-child .media-cont h2, .media .media-ogr ul li:first-child .media-cont p, .media .media-ogr ul li:first-child .media-cont span { color:#000000;}
	.media .media-ogr ul li:first-child:hover .media-cont h2, .media .media-ogr ul li:first-child:hover .media-cont p { color:#000000;}
	.media .media-ogr ul li:first-child:hover .media-cont span { background:url(../images/clock-date.svg) no-repeat left center; color:#000000;}

	.media ul li .media-qt h3 {padding: 0 5%;}
	.media ul li .media-qt h5 {padding-bottom: 61px;}
	.media ul li:nth-child(2n+1) { margin-right: 4%;}

	.media.main { padding: 40px 0 50px;}
	.media.main h4 { text-align:center;float: left;width: 100%;}
}

/* Mobile Landscape Size (devices and browsers) */
@media screen and (max-width:639px) {
.media ul li { width:100%!important; margin-right:0!important;}
.media ul li:last-child { margin-right: 0;}
.media ul li .media-qt h5 {padding-bottom: 30px;}
.media ul li .media-cont p {padding-bottom: 30px;}
.media ul li .media-qt h3 br { display:none;}
.media ul li .media-qt h3 { padding: 0;}
}