styles_volunteers.css

/* defines the width, height, position, display style, alginment and spacing */
.divider2t {
    width: 100%;
	position: relative;
	display: flex;
	align-items: center;
    height: 120px;
	background-color: #EB5D3E;
	top: -10px;
	margin-bottom: -10px;
}
/* defines the font colour spcing and weight */
.divider2t #dt {
	color: white;
	margin: auto;
	font-size: 30pt;
	font-size: 3vw;
	font-weight: 600;
	
}
/* defines div scale and background colour */
.middle{
	width: 100%;
	background-color: white;
}
/* defines div content layout, displaying as a grid and using grid columns to define two columns ans there allocated width */
.wcontainer{
  margin: auto;
  display: grid;
  justify-content: center;
background: #7B549E;
  flex-wrap: wrap;
  padding: 20px 0px;
  margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 12%;
	padding-right: 12%;
}
/* defines container attributes that the image and copy will be held in  */
.sect1 {
	width: 100%;
	margin: auto;
	color: white;
	text-align: center;
}
/* defines spacing and column layout and width within container  */
.columncontainer {
	width: 100%;
margin: auto;
  display: grid;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 10px;
  margin-top: 20pt;
	margin-bottom: 20pt;
	grid-template-columns: 25% 25% 25% 25%;
	
}
/* defines spacing, alignment, radius and width  */
.colimg {
margin-top: 0px;
  vertical-align: middle;
	border-radius: 10pt 50pt 10pt 10pt; 
	margin: 10pt;
	width: auto;
}
/* defines spacing a width */
.colimg img {
padding: 20pt;
  margin-top: 0px;
  vertical-align: middle;
  width: 100%;
}
/* defines spacing, font charateristics and layer position  */
.pro {
	text-align: center;
	background-color: #EB5D3E;
	padding-top: 0pt;
	padding-bottom: 0pt;
	margin-top: 0;
	z-index: 100;
}
/* defines font size weight and spacing */
.pro b {
	font-weight: 700;
	font-size: 1vw;
	margin: 0;
	padding: 0;
}
/* defines spacing width and alignment */
.learnmore {
	text-align: center;
	vertical-align: bottom;
	background-color: #7B549E;
	width: auto;
	height: auto;
	border-radius: 0 0 15px 15px;
	padding-top: 10pt;
	padding-bottom: 10pt;
	margin-bottom: 0;
	}
/* defines font charateristics */
.learnmore a {
	text-decoration: none;
	color: white;
	font-weight: 700;
	font-size: 1vw;
	margin: 0;
}
/* defines changes that will be applied when viewport is below 1100px */
@media (max-width: 1100px) {
	/* defines div height */
.divider2t {
		height: 80px;
	}
}
/* defines changes that will be applied when viewport is below 920px */
@media (max-width: 920px) {
/* defines display as flex and columns as auto */
.ocontainer{
display: flex;
  flex-wrap: wrap;
		grid-template-columns: auto;
}
/* defines display as flex and columns as auto */
.wcontainer{
display: flex;
  flex-wrap: wrap;
		grid-template-columns: auto;
}
/* defines div order */
.sectimg {
		order: 1;
		border-radius: 10pt 50pt 10pt 10pt;
	}
/* defines border radius and padding changes */
.sectimg img {
		padding: 15pt;
	}
/* defines div order */
.sect1 p {
			margin-bottom: 20px;
			font-size: 2vw;
	}
/* defines div height */
.divider2t {
		height: 60px;
	}
/* defines font size  */
.divider2t #dt {
			font-size: 3vw;
	}
/* defines column display as flex  */
.columncontainer{
display: flex;
			flex: 100%;
			max-width: 100%;
			padding: 0;
}
/* defines size, spacing and radius */
.colimg {
margin-top: 10px;
  flex: 40%;
  max-width: 50%;
		border-radius: 10pt 20pt 10pt 10pt; 
	}
/* defines spacing */
.colimg img {
padding: 15pt;
}
/* defines font size */
.pro b {
	font-size: 2.3vw;
}
/* defines border radius and spacing */
.learnmore {
	border-radius: 0 0 10px 10px;
	padding-top: 4pt;
	padding-bottom: 5pt;
	}
/* defines font size and spacing  */
.learnmore a {
	font-size: 2.5vw;
	margin: 0;
}
/* defines div height */
.divider2t {
		height: 50px;
	}
}
/* defines changes that will be applied when viewport is below 600px */
@media (max-width: 600px) {
/* defines font size */
.divider2t #dt {
			font-size: 14pt;
	}
	
}