/* Department CSS Document */
/*For mobile first adaptive design place styles for mobile and up in the mobile and up area.
Place styles for tablet and up inside the media query in the tablet and up area.
Place styles for desktop only inside the media query in the desktop only area.

For questions or media query training contact Web Development Services.
*/
/* ====================== Mobile and Up ========================== */
/*---------------------------------------------------------General Styles----------------------------------------------------*/
/* Overides bordered button to have straight edges, a green border, and flip colors on hover/focus */

a.button-border {
	border-radius: 0px;
	background-color: white;
	border: 3px solid #275d38;
    font-weight: 800;
    font-size: 20px;
	padding: 10px 25px;
	text-align: center;
}
a.button-border:hover, a.button-border:focus{
	text-decoration: none;
	color: white;
	background-color: #275d38;
}
a.button-border.button-alternative-hover:hover, a.button-border.button-alternative-hover:focus {
	text-decoration: none;
	color:  #434344;
	background-color: #bdbbc9;
}
.flex-column-vertical-center {
	display: flex;
    flex-direction: column;
    justify-content: center;
}
.flex-column {
	display: flex;
    flex-direction: column;
}
.bigger-boldish {
	font-size: 42px;
	font-weight: 600;
}
.bigger-boldless {
	font-size: 42px;
	font-weight: 500;
}
.bg-limeish {
	background-color: #c7da71;
}
.text-limeish {
	color: #c7da71;
}
a.hover-limeish:hover, a.hover-limeish:focus {
	color: #c7da71;
}
	    
/*---------------------------------------------------------Homepage & page headers----------------------------------------------------*/
/*In properties header selected as "Text-only" not parallax or full width*/

.sfp-header header h1.header-title {
	font-family: 'Arial', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
}

.sfp-header header .hp-header-text {
	padding-left: 25px;
}
.sfp-header header .hp-header-text p {
	color: black;
}
.sfp-header header .header-p {
	font-size: 18px;
}


/*-----------------------------------------------------BELOW HEADER HP COLOR ROW----------------------------------------------*/
p.green-stripe {
	background-color: #275d38;
	line-height: 2;
	margin-bottom: 0;
}

.graphic-row > div {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.graphic-row {
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.graphic-center {
	font-size: 42px;
	font-weight: bold;
	color: white;
	background-color: #6f937a;
	border: 4px solid white;
	border-radius: 50%;
	padding: 40px;
	margin: -12px;
	width: 230px;
	height: 230px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.graphic-row span {
	font-size: 60px;
}
.graphic-row p.icon-text {
	font-size: 20px;
}

/*-------------------------------------------------------Testimonials---------------------------------------------------------*/

.card-picture-2.family-testimonial .card-picture-img {
	object-position: top;
	height: 270px;
}
.card-picture-2.student-testimonial .card-picture-img {
	object-position: top;
	max-height: 450px;
}

.card-picture-2.family-testimonial .card-picture-title {
	font-size: 36px;
}
.card-picture-2.family-testimonial .card-picture-button {
	font-size: 20px;
}
/*Changes in screen width 900*/

/*-------------------------------------------------------STUDENT INTERNS PAGE---------------------------------------------------------*/

/*------blue, lime, green row-----*/
.internship-lime-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.internship-lime-row p {
	font-size: 22px;
	text-align: center;
	padding: 20px 10px 10px;
	margin-bottom: 0;
	width: 190px;
}
.internship-application-bg {
	background-image: url("/stronger-families/images/internship-application-bg.jpg");
}

.internship-application h2 {
	font-size: 46px;
	font-weight: 600;
	color: white;
	margin: 20px 0 30px 20px;
}

/*-------------------------------------------------------FAMILIES PAGE---------------------------------------------------------*/
.icons-header {
	grid-area: header;
}
.box1 {
	grid-area: box1;
}
.box2 {
	grid-area: box2;
}
.box3 {
	grid-area: box3;
}
.box4 {
	grid-area: box4;
}
.box5 {
	grid-area: box5;
}
.box6 {
	grid-area: box6;
}

.box1, .box2, .box3, .box4, .box5, .box6 {
	gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/*All below change in desktop  */
.box1 span, .box2 span, .box3 span, .box4 span, .box5 span, .box6 span {
	font-size: 50px;
}
.box1 p, .box2 p, .box3 p, .box4 p, .box5 p, .box6 p {
	font-size: 20px;
}
.grid-container {
	display: grid;
	grid-template-columns: 2fr 2fr;
/*     grid-template-rows: 200px 200px; */
    grid-template-areas:
        "header header" 
		"box1 box4"
        "box2 box5"
		"box3 box6";
}
.mobile-padding-5 {
	padding-right: 5px;
}
.families-card .card-picture-content {
	background-color: #275d38;
	padding: 50px;
	color: white;
}
.families-card .card-picture-content h2 {
	color: white;
	text-align: center;
    font-weight: 600;
}
.families-card .icon-container {
	display: flex;
    justify-content: center;
    align-items: center;
}
.families-card .icon-circle {
	display: inline-block;
	font-size: 58px;
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background-color: #c7da71;
	border: 3px solid white;
	padding: 15px;
	position: absolute;
}
.fa-chalkboard-teacher:before, .fa-book-reader:before, .fa-user-chart:before {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.family-application h2 {
	color: white;
	margin: 20px 0 30px 20px;
}

.families-card .card-picture-img {
	height: 350px;
}


/*-------------------------------------------------------SCHEDULES PAGE---------------------------------------------------------*/
/*Class Schedule table add bit more padding*/
.table-bordered>thead>tr>th, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>tbody>tr>td, .table-bordered>tfoot>tr>td {
	padding: 10px;
}

.class-location .card-content-content {
	line-height: 1.6;
}

/*-------------------------------------------------------MAKE A GIFT PAGE---------------------------------------------------------*/
.story-bg {
	background-image: none;
}
/*img max height set at screen 1200px to make equal height*/

.donate-card.card-picture-2 .card-picture-title {
	font-weight: 600;
	background-color: #c7da71;
	color: #275d38;
}
.donate-card.card-picture-2 .card-picture-content {
	font-size: 18px;
	background-color: #275d38;
	color: white;
}
.donate-card.card-picture-2 .card-picture-button {
	font-size: 26px;
	font-weight: 600;
	border: 2px solid #c7da71;
    background-color: white;
    color: #275d38;
}
.donate-card.card-picture-2 .card-picture-button:hover, .donate-card.card-picture-2 .card-picture-button:focus {
    background-color: #c7da71;
}
.past-donors ul {
	list-style-type: none;
	padding-left: 0;
}
.past-donors h3 {
	font-size: 34px;
    font-weight: 600;
    margin-bottom: 25px;
}


/*End mobile and up styles*/
/* ====================== Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 768px) {
	.sfp-header header h1 {
		font-size: 44px;
	}
	.card-picture-2.student-testimonial .card-picture-img {
		height: 340px;
	}
	.families-card .card-picture-img {
		height: 300px;
	}
	.donate-card.card-picture-2 .card-picture-img {
		height: 300px;
	}
	.mobile-padding-5 {
	padding-right: 0;
	}
}

/*end media query*/
/*End tablet and up styles*/
/* ====================== Landscape Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 992px) {
	.sfp-header header h1 {
		font-size: 55px;
	}
	.card-picture-2.student-testimonial .card-picture-img {
		height: 260px;
	}
	.donate-card.card-picture-2 .card-picture-img {
		height: 380px;
	}
	.grid-container {
		display: grid;
		grid-template-columns: 3fr 2fr 2fr 2fr;
   		grid-template-rows: 200px 200px;
    	grid-template-areas:
        "header box1 box2 box3"
        "header box4 box5 box6";
	}
}

/*end media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1200px) {
	.sfp-header header h1 {
		font-size: 68px;
	}
	.sfp-header header .header-p {
		font-size: 22px;
	}
	.sfp-header header .flex-column-vertical-center {
		height: 100%;
	}
	.card-picture-2.family-testimonial .card-picture-img {
		height: 200px;
	}
	.story-bg {
		background-image: url("/stronger-families/images/our-story-bg.jpg");
		background-repeat: no-repeat;
		background-size: cover; 
	}
	.donate-card.card-picture-2 .card-picture-img {
		max-height: 430px;
	}
	.box1 span, .box2 span, .box3 span, .box4 span, .box5 span, .box6 span {
		font-size: 60px;
	}
	.box1 p, .box2 p, .box3 p, .box4 p, .box5 p, .box6 p {
		font-size: 26px;
	}
}

/*end media query*/
/*End desktop only styles*/
/*END OF DOCUMENT*/