@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);
}

#section01Color{
	background-color: #e71089;
}

#section02Color{
	background-color: #f05a2a;
}

.donarSectionContainerBackground{
	width: 100%;
	height: auto;
	margin-top: 80px;
}

.donarSectionContainer{
	width: 800px;
	height: auto;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 100px;
}

.donarSectionImage{
	width: 100px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	display: inline-block;
	vertical-align: top;
}

.donarSectionImage img{
	width: 80px;
}

.donarSectionDescription{
	width: 600px;
	height: auto;
	margin-left: 14px;
	display: inline-block;
}

.donarSectionDescription h1{
	width: 100%;
	height: auto;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	letter-spacing: 2px;
	font-size: 32px;
}

.donarSectionDescription p{
	width: 100%;
	height: auto;
	text-align: left;
	margin-top: 0px;
	margin-bottom: 4px;
	padding: 0px;
}

#donarTitle01{
	color: #5fba46;
}

#donarTitle02{
	color: #27a8e1;
}

#donarTitle03{
	color: #e71089;
}

#donarTitle04{
	color: #f15a2b;
}

/* Donar Section 01 */
.donarSection01Container{
	width: 100%;
	height: auto;
	text-align: left;
}

#donarSection04Container{
	margin-top: 28px;
}

.donarSection01Divisions{
	width: 49%;
	height: auto;
	display: inline-block;
	vertical-align: top;
}

.donarSection01Divisions h1{
	font-size: 20px;
	letter-spacing: 0px;
	border-right: solid;
	border-right-width: 1px;
	border-right-color: #5a4952;
}

.donar01TextColor{
	color: #5fba46;
}


/* Donar Buttons */
.donarButton{
	width:240px;
	height: 44px;
	cursor: pointer;
	margin-top: 28px;
	border-radius: 4px;
	margin-left: auto;
	margin-right: auto;
	vertical-align: top;
}

.donarButton h1{
	width: auto;
	font-size: 22px;
	padding-top: 10px;
	letter-spacing: 2px;
	font-weight: 400px;
	text-align: center;
	color: #FFFFFF;
	border-right: none;
}

#donarButton01{
	margin-left: auto;
	margin-right: auto;
	background-color: #5fba46;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}

#donarButton01 h1{
	margin-top: 0px;
}

#donarButton01:hover{
	background-color: #77dc5b;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}

#donarButton02{
	margin-left: 0px;
	margin-right: auto;
	background-color: #27a8e1;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}

#donarButton02:hover{
	background-color: #14baf4;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}

#donarButton03{
	margin-left: 0px;
	margin-right: auto;
	background-color: #e70f88;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}

#donarButton03:hover{
	background-color: #f90897;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}

#donarButton04{
	margin-left: 0px;
	margin-right: auto;
	background-color: #f15a2b;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
	text-align: center;
}

#donarButton04:hover{
	background-color: #fc7146;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}

#donarButton04 h1{
	display: inline-block;
	margin-right: 8px;
}

#donarButton04 img{
	display: inline-block;
	width: 28px;
	height: auto;
	padding-top: 7px;
}

#donarButton04Text{
	display: inline-block;
	width: auto;
	height: 44px;
	vertical-align: top;
}

#donarButton04Icon{
	display: inline-block;
	height: 44px;
}

#donar01SpecialText{
	font-size: 20px;
	letter-spacing: 0px;
	margin: 0px;
	padding: 0px;
}

.donar04SpecialText{
	font-family: bebasNeue;
	text-align: left;
	font-size: 20px;
	letter-spacing: 0px;
	margin: 0px;
	padding: 0px;
	color: #f15a2b;
	margin-top: 28px;
}

#donar04RemoveBorder{
	border: none;
}

#donarButton04Container{
	text-align: left;
}

#donar04button02Text{
	width: auto;
	display: inline-block;
}

#donar04button02{
	width: auto;
	color: #5e4952;
	display: inline-block;
	font-size: 16px;
	letter-spacing: 0px;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}

#donar04button02:hover{
	color: #e71089;
	-webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
}


/* Responsive Breakpoints */
/* Breakpoint 01 */ 
@media (max-width: 820px){

	.donarSectionContainer{
		width: calc(100% - 40px);
		margin-left: 20px;
		margin-right: 20px;
	}
	
	.donarSectionImage{
		width: calc(14%);
	}
	
	.donarSectionImage img{
		width: 100%;
	}
	
	.donarSectionDescription{
		width: calc(82% - 14px);
		margin-left: 14px;
	}
	
	.donarSection01Divisions{
		width: 100%;
	}

	.donarSection01Divisions h1{
		font-size: 18px;
		border-right: none;
		border-right-width: 0px;
	}
	
	#donar01SpecialText{
		font-size: 18px;
	}
	
	.donar04SpecialText{
		font-size: 18px;
	}
	
	#donarButton01{
		margin-left: 0px;
		margin-right: auto;
	}
	
	.donarButton h1{
		font-size: 22px;
		padding-top: 10px;
		letter-spacing: 2px;
		font-weight: 400px;
		text-align: center;
		color: #FFFFFF;
		border-right: none;
	}
	
}

/* Breakpoint 02 */ 
@media (max-width: 520px){
	
	.donarSectionContainerBackground{
		margin-top: 34px;
	}
	
	.donarSectionContainer{
		margin-bottom: 40px;
	}
	
	.donarSectionImage{
		width: calc(100% - 20px);
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 10px;
	}
	
	.donarSectionImage img{
		width: 25%;
	}
	
	.donarSectionDescription{
		width: 100%;
		margin-left: 0px;
	}
	
	.donarSectionDescription h1{
		text-align: center;
	}

	.donarSectionDescription p{
		text-align: center;
	}
	
	.donarButton{
		width:calc(100% - 20px);
		margin-left: 10px;
		margin-right: 10px;
	}
	
	.donarButton h1{
		font-size: 20px;
		padding-top: 10px;
	}
	
	#donarButton01{
		margin-left: auto;
		margin-right: auto;
	}
	
	#donarButton02{
		margin-left: auto;
		margin-right: auto;
	}
	
	#donarButton03{
		margin-left: auto;
		margin-right: auto;
	}
	
	#donarButton04{
		margin-left: auto;
		margin-right: auto;
	}
	
	.donar04SpecialText{
		text-align: center;
	}
	
	#donarButton04Container{
		text-align: center;
	}
	
	#donar04button02Text{
		width: 100%;
	}

	#donar04button02{
		width: 100%;
	}
	
}