@charset "UTF-8";

@font-face{
	font-family: bebasNeueBook;
	src:url(../fonts/BebasNeueBook.otf);
}

@font-face{
	font-family: bebasNeue;
	src:url(../fonts/BebasNeue.otf);
}

@font-face{
	font-family: helveticaNeue;
	src:url(../fonts/HelveticaNeue.otf);
}

#section03Color{
	background-color: #133165;
}

#proyectosMainContentBackground{
	width: 100%;
	height: auto;
}

.proyectosContainer{
	width: 1000px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-top: 80px;
}

.proyectosPartnerContainer{
	width: 32%;
	height: auto;
	display: inline-block;
	border-right: solid;
	border-right-width: 1px;
	border-right-color: #a9a5a6;
	border-bottom: none;
	border-bottom-width: 0px;
	border-bottom-color: #a9a5a6;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.proyectosPartnerContainerImage{
	width: 100%;
	height: auto;
}

.proyectosPartnerContainerImage img{
	width: 70%;
}

.proyectosDescriptionContainer{
	width: 32%;
	height: auto;
	display: inline-block;
	vertical-align: top;
	margin-bottom: 0px;
}

.proyectosDescriptionTitle{
	width: calc(100% - 40px);
	margin-left: 20px;
	margin-right: 20px;
}

.proyectosDescriptionTitle h1{
	padding: 0px;
	margin: 0px;
	color: #27a8e1;
	font-size: 18px;
	text-align: center;
}

.proyectosDescriptionInfo{
	width: calc(100% - 40px);
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 10px;
}

.proyectosDescriptionInfo h1{
	padding: 0px;
	margin: 0px;
	font-size: 18px;
	text-align: left;
}

.proyectosImageContainer{
	width: 32%;
	height: auto;
	display: inline-block;
	margin-bottom: 0px;
}

.proyectosImageContainer video{
	width: 100%;
	height: auto;
}

.proyectosImageContainer img{
	width: 100%;
}

.proyectosPartnerIconsContainer{
	width: calc(100% - 20px);
	margin-left: 10px;
	margin-right: 10px;
	height: auto;
	text-align: right;
}

.proyectosPartenrIcon{
	width: 28px;
	height: 28px;
	display: inline-block;
	margin-top: 4px;
	margin-right: 4px;
}

.proyectosPartenrIcon img{
	width: 100%;
	height: auto;
}

.proyectosPhrase{
	width: 100%;
	height: auto;
	margin-top: 70px;
	margin-bottom: 40px;
}

.proyectosPhrase h1{
	width: 600px;
	color: #e70f88;
	text-align: center;
	padding: 0px;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	font-size: 28px;
}

.proyectosPhrase h2{
	font-family: bebasNeue;
	width: 120px;
	color: #27a8e0;
	text-align: center;
	font-size: 22px;
	padding: 0px;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}

.proyectosPhrase h2:hover{
	color: #5fba46;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}


/* Responsive Breakpoints */
/* Breakpoint 01 */ 
@media (max-width: 1020px){
	
	.proyectosContainer{
		width: calc(100% - 40px);
		margin-left: 20px;
		margin-right: 20px;
	}
	
}

/* Breakpoint 02 */ 
@media (max-width: 800px){
	
	.proyectosPartnerContainer{
		width: 48%;
		margin-bottom: 14px;
	}
	
	.proyectosDescriptionContainer{
		width: 48%;
		margin-bottom: 14px;
	}
	
	.proyectosDescriptionTitle h1{
		text-align: left;
	}
	
	.proyectosDescriptionInfo h1{
		font-size: 14px;
	}
	
	.proyectosImageContainer{
		width: calc(80% - 40px);
		margin-left: 20px;
		margin-right: 20px;
	}
	
	.proyectosPhrase h1{
		width: calc(100% - 40px);
		margin-left: 20px;
		margin-right: 20px;
	}

	.proyectosPhrase h2{
		width: calc(100% - 40px);
		margin-left: 20px;
		margin-right: 20px;
	}
	
}

/* Breakpoint 03 */ 
@media (max-width: 500px){
	
	.proyectosContainer{
		margin-top: 40px;
	}
	
	.proyectosPartnerContainer{
		width: 100%;
		border-right: none;
		border-right-width: 0px;
		border-bottom: solid;
		border-bottom-width: 1px;
		padding-bottom: 20px;
	}
	
	.proyectosDescriptionContainer{
		width: 100%;

	}
	
	.proyectosDescriptionTitle{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.proyectosDescriptionInfo{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.proyectosDescriptionInfo h1{
		font-size: 16px;
	}
	
	.proyectosPartnerIconsContainer{
		text-align: center;
	}
	
	.proyectosImageContainer{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.proyectosPhrase{
		margin-top: 40px;
	}
	
	.proyectosPhrase h1{
		font-size: 22px;
	}

	.proyectosPhrase h2{
		font-size: 18px;
	}
	
}