/* Styles for Section pages */
.ggkesrplugin_header_section { position: relative; min-width: 300px; width:100%; height: 300px; padding: 0; margin: 0;
								background-position: center; background-repeat: no-repeat; background-size: cover; }
/* This one is relative to ggkesrplugin_header_section but -250 so it overlaps it. */
.ggkesrplugin_header_section_container { position: relative; height: 100%; display: flex; justify-content: flex-end; }
.ggkesrplugin_header_section_logo { position: relative; align-self: flex-end; width: 50%; min-width: 300px; max-width: 420px; height: auto;
										padding: 20px; margin: 0; overflow: hidden; border-radius: 20px 20px 0px 0px; }
.ggkesrplugin_header_section_logo img { max-width:100%; max-height:auto; position: relative; margin: auto;}


@media only screen and (max-width: 600px) {
	.ggkesrplugin_header_section { position: relative; min-width: 300px; width:100%; height: 200px; padding: 0; margin: 0;
									background-position: center; background-repeat: no-repeat; background-size: cover; }

	.ggkesrplugin_header_section_container { position: relative; height: 100%; display: flex; justify-content: flex-end; }
	.ggkesrplugin_header_section_logo { position: relative; align-self: flex-end; width: 300px; min-width: 300px; max-width: 420px; height: auto;
										padding: 10px; margin: 0; overflow: hidden; border-radius: 10px 10px 0px 0px; }
}

/* -- */
/* Section (young member section) branded header */
.ggkesrplugin_offering_section_header_container { position: relative; padding: 0; margin: 0; display: grid; grid-template-columns: 3fr 2fr; }
.ggkesrplugin_offering_section_header_banner { position: relative; height: 400px; display: flex; flex-direction: row; justify-content:flex-end ; align-items: flex-end;
												background-position: center; background-size: cover; background-repeat: no-repeat; }
.ggkesrplugin_offering_section_header_banner-right { position: relative; height: 400px; width: 80px; }
.ggkesrplugin_offering_section_header_banner-clipart { position: absolute; top: 0; right: -20px; width: 250px; height: 400px;
														background-position: center; background-size: contain; background-repeat: no-repeat; }

.ggkesrplugin_offering_section_header_logo { position: relative; display: flex; flex-direction: column; justify-content:center; align-items:center; }
.ggkesrplugin_offering_section_header_logo img { width: 90%; height: auto; max-width:500px; margin: 0; padding: 0; }
.ggkesrplugin_offering_section_header_logo svg { width: 90%; height: auto; max-width:500px; margin: 10px; padding: 0; }
.ggkesrplugin_offering_section_header_logo h2 { font-size: 26pt; font-weight: 600; padding: 0; margin: 0px 0px 15px 0px; }

.ggkesrplugin_offering_section_header_logo .logo { width: 100%; height: 100%; }

.ggkesrplugin_offering_section_intro_container { position: relative; padding: 0; margin: 0; display: grid; grid-template-columns: 2fr 3fr 1fr; }
.ggkesrplugin_offering_section_intro_image { position: relative; display: flex; flex-direction: column; justify-content:flex-start ; align-items:flex-end; }
.ggkesrplugin_offering_section_intro_image img { width: 100%; height: auto; max-width:350px; margin: 20px; padding: 0; }
.ggkesrplugin_offering_section_intro_text { position: relative; }
.ggkesrplugin_offering_section_intro_text h4 { font-size: 30pt; font-weight: 600; max-width: 800px; line-height: 1.5em; padding: 0; margin: 5px 10px 20px 0px; }
.ggkesrplugin_offering_section_intro_text p { font-size: 14pt; font-weight: 500; max-width: 800px; line-height: 1.5em; padding: 0; margin: 5px 10px 10px 0px; }
.ggkesrplugin_offering_section_intro_text_image { position: relative; display: flex; align-items: center; margin: 30px; }
.ggkesrplugin_offering_section_intro_text_image img { width: 100px; height: auto; margin: 0; padding: 0; margin-left: auto; margin-right: auto; }
.ggkesrplugin_offering_section_intro_smimage { position: relative; display: flex; flex-direction: column; justify-content:center ; align-items:center; }
.ggkesrplugin_offering_section_intro_smimage img { width: 100%; height: auto; max-width: 150px; margin: 20px; padding: 0; }

/* These default of off, because they are for narrow displays */
.ggkesrplugin_offering_section_intro_narrow_title { display: none; }
.ggkesrplugin_offering_section_intro_narrow_clipart { display: none; }

/* -- */
/* Offering standard header */
.ggkesrplugin_offering_header_container { position: relative; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(400px, 2fr) minmax(300px, 3fr); background-color:#00a7e5;}
.ggkesrplugin_offering_header_container_banner { position: relative; height: 400px; display: flex; flex-direction: row; justify-content:flex-end ;
												align-items: flex-end; background-position: center; background-size: cover; background-repeat: no-repeat; }

.ggkesrplugin_offering_header_container_title { position: relative; display: flex; flex-direction: column; justify-content:center ; align-items:flex-end; }
.ggkesrplugin_offering_header_container_title h1 { font-size: 48pt; font-weight: 600; padding: 0; margin: 0px 15px 15px 0px;
													line-height: 1.2em; text-align: right; color: #161b4e; }
.ggkesrplugin_offering_header_container_title h2 { font-size: 24pt; font-weight: 500; padding: 0; margin: 0px 15px 15px 0px;
													line-height: 1.2em; text-align: right; color: #161b4e; }

@media screen and (max-width: 800px) {
	.ggkesrplugin_offering_section_header_container { position: relative; padding: 0; margin: 0; display: block; overflow: hidden; }
	.ggkesrplugin_offering_section_header_banner { position: relative; width: 90%; height: 200px; display: flex; flex-direction: row;
													justify-content:flex-end ; align-items: flex-end;
													background-position: center; background-size: cover; background-repeat: no-repeat; }
	.ggkesrplugin_offering_section_header_banner-right { position: relative; height: 200px; width: 40px; }
	.ggkesrplugin_offering_section_header_banner-clipart { position: absolute; top: 0; right: -20px; width: 120px; height: 200px; }
	
	/* Hide title, show title in intro section instead */
	.ggkesrplugin_offering_section_header_logo { display: none; }
	
	/* Remove column layout for narrow width */
	.ggkesrplugin_offering_section_intro_container { display: block; padding: 20px; }
	
	/* Remove width restrictions on text, reduce size */
	.ggkesrplugin_offering_section_intro_text h4 { font-size: 22pt; max-width: 100%; }
	.ggkesrplugin_offering_section_intro_text p { font-size: 14pt; max-width: 100%; }
	
	/* Hide the clipart for narrow wide */
	.ggkesrplugin_offering_section_intro_image { display: none; }
	.ggkesrplugin_offering_section_intro_smimage { display: none; }
	.ggkesrplugin_offering_section_intro_text_image { display: none; }
	
	/* Add the narrow title version */
	.ggkesrplugin_offering_section_intro_narrow_title { position: relative; padding: 0; margin: 0; display: grid; grid-template-columns: 0.8fr 1.2fr;  }
	.ggkesrplugin_offering_section_intro_narrow_title_left { position: relative; display: flex; flex-direction: column; justify-content:center; align-items:center; }
	.ggkesrplugin_offering_section_intro_narrow_title_left h2 { font-size: 14pt; font-weight: 600; padding: 0; margin: 5px 0px 5px 0px; }
	.ggkesrplugin_offering_section_intro_narrow_title_right { position: relative; display: flex; flex-direction: column;
															justify-content:center; align-items:center; }
	.ggkesrplugin_offering_section_intro_narrow_title_right img { width: 100%; height: auto; max-width: 300px; margin: 0; padding: 0; }
	
	/* Add the narrow clipart art on */
	.ggkesrplugin_offering_section_intro_narrow_clipart { position: relative; padding: 0; margin: 0; display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr; }
	.ggkesrplugin_offering_section_intro_narrow_clipart_image_1 { position: relative; display: flex; flex-direction: column; padding: 10px;
																	justify-content:flex-start; align-items:flex-start; }
	.ggkesrplugin_offering_section_intro_narrow_clipart_image_1 img { width: 100%; height: auto; max-width: 350px; margin:0; padding: 0; }
	.ggkesrplugin_offering_section_intro_narrow_clipart_image_2 { position: relative; display: flex; flex-direction: column; padding: 10px;
																	justify-content:flex-start; align-items:center; }
	.ggkesrplugin_offering_section_intro_narrow_clipart_image_2 img { width: 70%; height: auto; max-width: 200px; margin:0; padding: 0; }
	.ggkesrplugin_offering_section_intro_narrow_clipart_image_3 { position: relative; display: flex; flex-direction: column; padding: 10px;
																	justify-content:flex-end; align-items:center; }	
	.ggkesrplugin_offering_section_intro_narrow_clipart_image_3 img { width: 60%; height: auto; max-width: 200px; margin:0; padding: 0; }
	
	
	/* --- */
	/* Offering standard header */
	/* Change to stacking, reversed order */
	.ggkesrplugin_offering_header_container { grid-template-columns: 1fr; }

    /* Reverse the order of the columns */
    .ggkesrplugin_offering_header_container_banner { order: 1; height: 300px; }
    .ggkesrplugin_offering_header_container_title { order: 2; display: block; padding: 10px; text-align: center; }	
	.ggkesrplugin_offering_header_container_title h1 { font-size: 36pt; font-weight: 600; padding: 0; margin: 10px 15px 15px 0px; text-align: center; display: inline; }
	.ggkesrplugin_offering_header_container_title h2 { font-size: 16pt; font-weight: 500; padding: 0; margin: 10px 0px 15px 0px; text-align: center; display: inline; }
}

@media screen and (min-width: 801px) and (max-width: 1199px) {

}



.ggkesrplugin_section_content { margin-top: 10px; margin-bottom: 30px; }

.ggkesrplugin_section_content h1,h2,h3,h4,h5,h6,h7,p,li,a { font-family: 'Poppins', sans-serif!important; }
.ggkesrplugin_section_content h1,h2,h3,h4,h5,h6,h7 { color: #161b4e; }
.ggkesrplugin_section_content h1,h2 { margin-top: 30px; margin-bottom: 25px; }
.ggkesrplugin_section_content h3,h4 { margin-top: 20px; margin-bottom: 15px; }
.ggkesrplugin_section_content p { margin-top: 10px; margin-bottom: 15px; }
.ggkesrplugin_section_content p,li { color: #000000; }

.ggkesrplugin_section_content h1 { font-weight: 600; font-size: 26pt; }
.ggkesrplugin_section_content h2 { font-weight: 600; font-size: 22pt; }
.ggkesrplugin_section_content h3 { font-weight: 400; font-size: 18pt; }
.ggkesrplugin_section_content h4 { font-weight: 200; font-size: 16pt; }

.ggkesrplugin_section_boxes_background { background-color: #dddddd; padding: 10px 0px 10px 0px; }
.ggkesrplugin_section_boxes { position: relative; width: 100%; height: auto; padding: 0; margin: 0; flex: 1 0 300px; 
						  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-auto-rows: minmax(0, 1fr); grid-gap: 20px; }


a.ggkesrplugin_section_box { text-decoration: none; background-color: #ffddaa; width: 100%; height: 100%; }
a.ggkesrplugin_section_box:hover { text-decoration: none; }

.ggkesrplugin_section_box_container { position: relative; max-width: 600px; background-color: #ffffff; overflow: hidden;
										padding: 0; margin: 10px 0px 10px 0px;
										border-bottom-color: #007bc4; border-bottom-width: 5px; border-bottom-style: solid; }
.ggkesrplugin_section_box_container h2 { font-size: 16pt; text-align: left; font-weight: 800; color: #000000!important; font-family: 'Poppins', sans-serif!important; }
.ggkesrplugin_section_box_container h4 { font-size: 12pt; text-align: left; font-weight: 400; color: #000000!important; font-family: 'Poppins', sans-serif!important; }

.ggkesrplugin_section_box_container:hover { background-color: #007bc4; }
.ggkesrplugin_section_box_container:hover h2 { color: #ffffff!important; text-decoration: none; }
.ggkesrplugin_section_box_container:hover h4 { color: #ffffff!important; text-decoration: none; }

.ggkesrplugin_section_box_image { position: relative; width: 100%; height: 150px; display: flex; justify-content: center; align-items: center;
									background-repeat: no-repeat; background-position: center; background-size: cover; }
.ggkesrplugin_section_box_image img { max-width:90%; max-height: 90%; width: auto; height:auto; position: relative; }
.ggkesrplugin_section_box_text { position: relative; width: 100%; padding: 6px; margin: 0; }

/* .ggkesrplugin_section_box_text a { display: block; left: 0px; top: 0px; width: 100%; height: 100%; margin: auto; margin-left: 50%; background-color: #dddddd!important; }
*/



.ggkesrplugin_footer_section { position: relative; min-width: 300px; width: 100%; height: auto;
								padding: 0; margin: 0; padding-bottom: 30px; text-align: center; justify-content: center; overflow: hidden; }
.ggkesrplugin_footer_section_links { postion: relative; width: 100%; height: auto; text-align: center; }
.ggkesrplugin_footer_section_links ul { list-style-type: none; margin: 10px 0px 20px 0px; padding: 0; text-align: center; }
.ggkesrplugin_footer_section_links li { white-space: nowrap; display: inline; padding: 10px; font-size: 12pt; }
.ggkesrplugin_footer_section_links a { text-decoration: none; font-weight: 400; font-size: 16pt; }
.ggkesrplugin_footer_section_links a:hover { font-weight: 400;  font-size: 16pt; text-decoration: underline; }


.ggkesrplugin_footer_section_connector { position: relative; width: 200px; margin-left: auto; margin-right: auto; }
.ggkesrplugin_footer_section_connector img { max-width:100%; max-height:auto; position: relative; margin: auto;}

.ggkesrplugin_introduction_section { position: relative; min-width: 300px; width: 100%; padding: 20px 0px 20px 0px!important; margin: 0!important; }
.ggkesrplugin_introduction_section h1 { font-size: 36pt; display: inline-block; margin: 0; margin-right: 10px; padding: 0; }
.ggkesrplugin_introduction_section h2 { font-size: 24pt; display: inline-block; margin: 0; margin-right: 10px; padding: 0; }


@media only screen and (max-width: 600px) {
	.ggkesrplugin_introduction_section h1 { font-size: 30pt; display: inline-block; margin-right: 10px; }
	.ggkesrplugin_introduction_section h2 { font-size: 18pt; display: inline-block; margin-right: 10px; }	
	
}


.xggkesr-divisions { position: relative; display: flex; flex-direction: row; flex-wrap: wrap; width:100%; height: auto; padding: 0; margin: 0; }
.xggkesr-divisions-column { position: relative; display: flex; flex-direction: column; flex-basis: 100%; flex: 1; min-width: 300px; width: 50%; height: auto; }
.xggkesr-divisions-column ul { list-style-type: none; margin: 0; padding: 0; }