@charset "UTF-8";
/* CSS Document */
/* --------- overall --------- */
.img{ 
  padding-bottom: 5px;
}
/* --------- /overall --------- */

/* --------- dots section --------- */
.dot {
  	height: 20px;
  	width: 20px;
  	background-color: white;
  	border-radius: 15%;
  	display: inline-block;
	margin: 5px 20px 0px;
}

#dotssection{
	height: 50px;
	background-color: white;
	padding: 10px 30px;
	text-align: center;
	width: 100%;
	position: fixed;
	bottom: 0px;
	color: black
}

@media only screen and (max-width: 400px) {
	#dotssection{
		height: 40px;
	}
	
	.dot{
		margin: 0px 15px;
	}
}

#dotsec1{
	background-color: #a3a3a3; /* grey */
}

#dotsec1:hover{
	background-color: #c9c9c9; /* grey */
}

#dotsec2{
	background-color: #B39BC8; /* purple */
}

#dotsec2:hover{
	background-color: #C5B3D5; /* purple */
}

#dotsec3{
	background-color: #F293B7; /* pink */
}

#dotsec3:hover{
	background-color: #F5B0CA; /* pink */
}

#dotsec4{
	background-color: #7069B1; /* dark purple */
}

#dotsec4:hover{
	background-color: #7F79B9; /* dark purple */
}

#dotsec5{
	background-color: #A1C3D1; /* blue */
}

#dotsec5:hover{
	background-color: #CBDEE5; /* blue */
}
/* --------- /dots section --------- */

/* --------- empty section --------- */
.emptsec{
	height: 17px;
}

.topemptysec{
	background-color: white; 
	height: 10px;
}

@media only screen and (max-width: 1270px){
	.topemptysec{
		display:inherit;
		height: 13px;
	}
}

@media only screen and (max-width: 1240px){
	.topemptysec{
		display:inherit;
		height: 15px;
	}
}

@media only screen and (max-width: 1220px){
	.topemptysec{
		display:inherit;
		height: 17px;
	}
}

@media only screen and (max-width: 1200px){
	.topemptysec{
		height: 20px;
	}
}

@media only screen and (max-width: 1180px){
	.topemptysec{
		height: 22px;
	}
}

@media only screen and (max-width: 1160px){
	.topemptysec{
		height: 25px;
	}
}

@media only screen and (max-width: 1145px){
	.topemptysec{
		height: 28px;
	}
}

@media only screen and (max-width: 1130px){
	.topemptysec{
		height: 30px;
	}
}

@media only screen and (max-width: 1122px){
	.topemptysec{
		height: 32px;
	}
}

@media only screen and (max-width: 1115px){
	.topemptysec{
		height: 35px;
	}
}

@media only screen and (max-width: 1107px){
	.topemptysec{
		height: 38px;
	}
}

@media only screen and (max-width: 1100px){
	.topemptysec{
		height: 40px;
	}
}

@media only screen and (max-width: 1110px){
	.topemptysec{
		height: 42px;
	}
}

@media only screen and (max-width: 990px){
	.topemptysec{
		height: 44px;
	}
}

@media only screen and (max-width: 970px){
	.topemptysec{
		height: 46px;
	}
}

@media only screen and (max-width: 950px){
	.topemptysec{
		height: 48px;
	}
}
/* --------- /empty section ---------- */

/* --------- top portion --------- */
/* --------- image --------- */
.text-container{
	background-image: url("../images/about/bkg1.png");
	background-size: cover;
	height: 600px;
	background-position: top;
	background-color: white;
	background-attachment: inherit;
}
/* --------- /image --------- */

/* --------- text --------- */
.text{
	color: #363160;
 	font-size: 450%; 
	font-weight: bold;	
	font-family: 'Nosifer', cursive;
	margin: 0 auto;
	padding: 10px;
	width: 70%;
  	text-align: center;
  	position: absolute;
  	top: 18%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* --------- /text --------- */
@media only screen and (max-width: 1265px){
	.text{
		font-size: 440%; 
		top: 17.5%;
	}
}

@media only screen and (max-width: 1240px){
	.text{
		font-size: 435%; 
		top: 17%;
	}
}

@media only screen and (max-width: 1225px){
	.text{
		font-size: 430%; 
		top: 16.5%;
	}
}

@media only screen and (max-width: 1200px){
	.text{
		font-size: 425%; 
		top: 16%;
	}
}

@media only screen and (max-width: 1180px){
	.text{
		font-size: 420%; 
		top: 15.5%;
	}
}

@media only screen and (max-width: 1160px){
	.text{
		font-size: 415%; 
		top: 15%;
	}
}

@media only screen and (max-width: 1140px){
	.text{
		font-size: 410%; 
		top: 14.5%;
	}
}

@media only screen and (max-width: 1120px){
	.text{
		font-size: 405%; 
		top: 14%;
	}
}

@media only screen and (max-width: 1100px){
	.text{
		font-size: 385%; 
		top: 12%;
	}
	
	.text-container{
		background-image: url("../images/about/bkg2.JPG");
	}
}

@media only screen and (max-width: 1000px){
	.text{
		font-size: 370%; 
	}
}

@media only screen and (max-width: 948px){
	.text{
		font-size: 350%; 
	}
}

@media only screen and (max-width: 700px){
	.text{
		font-size: 320%; 
	}
}

@media only screen and (max-width: 600px){
	.text{
		font-size: 305%; 
	}
}

@media only screen and (max-width: 550px){
	.text{
		font-size: 290%; 
	}
}

@media only screen and (max-width: 480px){
	.text{
		font-size: 280%; 
	}
	
	.text-container{
		height: 700px;	
	}
}
/* --------- /top portion --------- */

/* --------- main portion --------- */
/* --------- section1 - interest --------- */
.I-emptsec1{
	height: 5px;
	background-color: white;
}

.I-emptsec2{
	height: 17px;
	background-color: white;
}

@media only screen and (max-width: 850px){
	.I-emptsec2{
		height: 15px;
	}
}

@media only screen and (max-width: 650px){
	.I-emptsec2{
		height: 5px;
	}
}

@media only screen and (max-width: 550px){
	.I-emptsec1{
		height: 10px;
	}
	.I-emptsec2{
		display: none;
	}
}

#section1 ul{
  	list-style: none;
}

#section1 ul li::before{
  	content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  	color: #96BCCB; 
  	font-weight: bold; 
  	display: inline-block; /* Needed to add space between the bullet and the text */
  	width: 1em; /* Also needed for space (tweak if needed) */
  	margin-left: -1em; /* Also needed for space (tweak if needed) */
}

@media only screen and (max-width: 750px){
	#section1 ul{
		font-size: 14px;
	}
}

@media only screen and (max-width: 550px){
	#section1 ul{
		font-size: 13px;
	}
}

@media only screen and (max-width: 480px){
	#section2 p{
		font-size: 12px;
	}
}

.img1{
	border: 1px solid #DBE7EB;
  	border-radius: 4px; 
  	padding: 5px; 
/*	box-shadow: 0 4px 8px 0 rgba(187,210,217,1.00), 0 6px 20px 0 rgba(208,224,229,1.00);*/
}

.img1-1{
	border: 1px solid #DBE7EB;
  	border-radius: 4px; 
  	padding: 5px; 
/*	box-shadow: 0 4px 8px 0 rgba(187,210,217,1.00), 0 6px 20px 0 rgba(208,224,229,1.00);*/
	margin-top: 25%;
}

#section1{
	background-color: white;
	height: auto;
	text-align: center;
	padding-top: 80px;
	font-family: 'Ruda', sans-serif;
}

.secnametext1-container{
	margin: 0px;
	height: 70px;
	background-color: white;
}

.secname1{
	color: #A1C3D1;
	font-size: 25px;
	font-weight: bold;
	font-family: 'Ruda', sans-serif;
	margin: 0;
	text-align: center;
	position: relative;
	top: 143%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.secname1-2{
	color: #EDF3F5;
	font-size: 90px;
	font-weight: bold;
	font-family: 'Ruda', sans-serif;
	margin: 0;
	top: 0px;
	text-align: center;
}

@media only screen and (max-width: 950px){
	.secname1{
		top: 133%;
	}
	
	.secname1-2{
		font-size: 80px;
	}
	
	#section1{
		padding-top: 65px;
	}
}

@media only screen and (max-width: 850px){
	.secname1{
		top: 123%;
	}
	
	.secname1-2{
		font-size: 70px;
	}
	
	#section1{
		padding-top: 50px;
	}
}

@media only screen and (max-width: 750px){
	.secname1{
		top: 113%;
	}
	
	.secname1-2{
		font-size: 60px;
	}
	
	#section1{
		padding-top: 40px;
	}
}

@media only screen and (max-width: 650px){
	.secname1{
		top: 100%;
		font-size: 22px;
	}
	
	.secname1-2{
		font-size: 50px;
	}
	
	#section1{
		padding-top: 30px;
	}
}

@media only screen and (max-width: 550px){
	.secname1{
		top: 75%;
		font-size: 17px;
	}
	
	.secname1-2{
		font-size: 40px;
	}
	
	#section1{
		padding-top: 10px;
	}
}

#section1 p{
	font-family: 'Ruda', sans-serif;
	margin: 0px 15px;
}

@media only screen and (max-width: 750px){
	#section1 p{
		font-size: 14px;
	}
}

@media only screen and (max-width: 550px){
	#section1 p{
		font-size: 13px;
	}
}

@media only screen and (max-width: 480px){
	#section2 p{
		font-size: 12px;
	}
}

.I-column1{
  	float: left;
	width: 33.33%;
  	padding: 3px;
}

.I-row1{
	padding:0px 50px;
}

.I-row1::after {
  	content: "";
  	clear: both;
  	display: table;
}

@media only screen and (max-width: 950px){
	.I-row1{
		padding:0px 40px;
	}
}

@media only screen and (max-width: 850px){
	.I-row1{
		padding:0px 30px;
	}
}

@media only screen and (max-width: 750px){
	.I-row1{
		display: none;
	}
}

.I-column2{
  	float: left;
	width: 33.33%;
  	padding: 3px;
}

.I-row2{
	padding: 0px;
	display: none;
}

.I-row2::after {
  	content: "";
  	clear: both;
  	display: table;
}

@media only screen and (max-width: 750px){
	.I-row2{
		display: contents;
	}
}
/* --------- /section1 - interest --------- */

/* --------- section2 - education --------- */
.E-emptsec1{
	height: 5px;
	background-color: white;
}

.E-emptsec2{
	height: 25px;
	background-color: white;
}

@media only screen and (max-width: 1268px){
	.E-emptsec2{
		height: 17px;
	}
}

@media only screen and (max-width: 850px){
	.E-emptsec2{
		height: 15px;
	}
}

@media only screen and (max-width: 650px){
	.E-emptsec2{
		height: 5px;
	}
}

@media only screen and (max-width: 550px){
	.E-emptsec1{
		height: 10px;
	}
	.E-emptsec2{
		display: none;
	}
}

#section2{
	background-color: white;
	padding-top: 80px;
	text-align: center;
}

@media only screen and (max-width: 545px){
	#section2{
		padding-top: 30px;
	}
}

#section2 p{
	font-family: 'Ruda', sans-serif;
	margin: 0px 15px;
}

@media only screen and (max-width: 750px){
	#section2 p{
		font-size: 14px;
	}
}

@media only screen and (max-width: 550px){
	#section2 p{
		font-size: 13px;
	}
}

@media only screen and (max-width: 480px){
	#section2 p{
		font-size: 12px;
	}
}

.secnametext2-container{
	margin: 0px;
	height: 70px;
	background-color: white;
}

.secname2{
	color: #B39BC8;
	font-size: 25px;
	font-weight: bold;
	font-family: 'Ruda', sans-serif;
	margin: 0;
	text-align: center;
	position: relative;
	top: 143%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.secname2-2{
	color: #F1EEF4;
	font-size: 90px;
	font-weight: bold;
	font-family: 'Ruda', sans-serif;
	margin: 0;
	top: 0px;
	text-align: center;
}



@media only screen and (max-width: 950px){
	.secname2{
		top: 133%;
	}
	
	.secname2-2{
		font-size: 80px;
	}
	
	#section2{
		padding-top: 65px;
	}
}

@media only screen and (max-width: 850px){
	.secname2{
		top: 123%;
	}
	
	.secname2-2{
		font-size: 70px;
	}
	
	#section2{
		padding-top: 50px;
	}
}

@media only screen and (max-width: 750px){
	.secname2{
		top: 113%;
	}
	
	.secname2-2{
		font-size: 60px;
	}
	
	#section2{
		padding-top: 40px;
	}
}

@media only screen and (max-width: 650px){
	.secname2{
		top: 98%;
		font-size: 22px;
	}
	
	.secname2-2{
		font-size: 50px;
	}
	
	#section2{
		padding-top: 30px;
	}
}

@media only screen and (max-width: 550px){
	.secname2{
		top: 76%;
		font-size: 17px;
	}
	
	.secname2-2{
		font-size: 40px;
	}
	
	#section2{
		padding-top: 20px;
	}
}

#secnamesub2-1{
	color: #B39BC8; 
	margin-left: 20px;
	font-size: 17px;
	font-family: 'Ruda', sans-serif;
}

#secnamesub2-2{
	color: #B39BC8; 
	margin-left: 15px;
	font-size: 17px;
	font-family: 'Ruda', sans-serif;
}

#secnamesub2-3{
	color: #B39BC8; 
	margin-left: 15px;
	font-size: 17px;
	font-family: 'Ruda', sans-serif;
}
/* --------- section2 - education --------- */

/* --------- section3 - CCA --------- */
.CCA-emptsec1{
	height: 5px;
	background-color: white;
}

.CCA-emptsec2{
	height: 17px;
	background-color: white;
}

@media only screen and (max-width: 850px){
	.CCA-emptsec2{
		height: 15px;
	}
}

@media only screen and (max-width: 650px){
	.CCA-emptsec2{
		height: 5px;
	}
}

@media only screen and (max-width: 550px){
	.CCA-emptsec1{
		height: 10px;
	}
	.CCA-emptsec2{
		display: none;
	}
}

#section3{
	background-color: white;
	padding-top: 80px;
	padding-bottom: 1px;
	font-family: 'Ruda', sans-serif;
	text-align: center;
}

@media only screen and (max-width: 545px){
	#section3{
		padding-top: 30px;
	}
}

.secnametext3-container{
	margin: 0px;
	height: 70px;
	background-color: white;
}

.secname3{
	color: #F293B7;
	font-size: 25px;
	font-weight: bold;
	font-family: 'Ruda', sans-serif;
	margin: 0;
	text-align: center;
	position: relative;
	top: 144.5%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.secname3-2{
	color: #FDF0F4;
	font-size: 90px;
	font-weight: bold;
	font-family: 'Ruda', sans-serif;
	margin: 0;
	top: 0px;
	text-align: center;
}

@media only screen and (max-width: 950px){
	.secname3{
		top: 134%;
	}
	
	.secname3-2{
		font-size: 80px;
	}
	
	#section3{
		padding-top: 65px;
	}
}

@media only screen and (max-width: 850px){
	.secname3{
		top: 123.5%;
	}
	
	.secname3-2{
		font-size: 70px;
	}
	
	#section3{
		padding-top: 50px;
	}
}

@media only screen and (max-width: 750px){
	.secname3{
		top: 115%;
	}
	
	.secname3-2{
		font-size: 60px;
	}
	
	#section3{
		padding-top: 40px;
	}
}

@media only screen and (max-width: 650px){
	.secname3{
		top: 100%;
		font-size: 22px;
	}
	
	.secname3-2{
		font-size: 50px;
	}
	
	#section3{
		padding-top: 30px;
	}
}

@media only screen and (max-width: 550px){
	.secname3{
		top: 76%;
		font-size: 17px;
	}
	
	.secname3-2{
		font-size: 40px;
	}
	
	#section3{
		padding-top: 20px;
	}
}

/*
#section3 video{
	padding: 0px 120px;
}
*/

#section3 p{
	font-family: 'Ruda', sans-serif;
	margin: 0px 15px;
}

@media only screen and (max-width: 750px){
	#section3 p{
		font-size: 14px;
	}
}

@media only screen and (max-width: 550px){
	#section3 p{
		font-size: 13px;
	}
}

@media only screen and (max-width: 480px){
	#section3 p{
		font-size: 11px;
	}
}

.MD-row1{
  display: flex;
  flex-wrap: wrap;
  padding: 2px 4px;
}

.MD-column1{
  flex: 25%;
  max-width: 25%;
  padding: 4px;
}

.MD-row2{
  display: flex;
  flex-wrap: wrap;
  padding: 2px 4px;
}

.MD-column2{
  flex: 100%;
  max-width: 100%;
  padding: 2px 4px;
	margin: 0px 100px;
}

@media only screen and (max-width: 550px){
	.MD-column2{
		margin: 0px;
	}
}

/* --------- chinese dance --------- */
.CD-accordion{
  	background-color: white;
  	color: #F293B7;;
  	cursor: pointer;
  	padding: 18px;
  	width: 100%;
  	text-align: center;
	border: 2px solid #F293B7;
  	transition: 0.4s;
	font-size: 17px;
}

.CD-accordion:hover{
	color: #F8D2DE;
}

@media only screen and (max-width: 750px){
	.CD-accordion{
		font-size: 15px;
	}
}

@media only screen and (max-width: 550px){
	.CD-accordion{
		font-size: 14px;
	}
}

@media only screen and (max-width: 480px){
	.CD-accordion{
		font-size: 13px;
	}
}

.CD-panel{
  	padding: 10px 0px;
  	border: 1px solid #F293B7; 
  	display: none;
  	overflow: hidden;
	background-color: white;
}

.CD-row1{
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.CD-column1{
  flex: 16.66%;
  max-width: 16.66%;
  padding: 0 4px;
}

@media screen and (max-width: 700px){
  .CD-column1{
    flex: 33.33%;
    max-width: 33.33%;
  }
}

.CD-row2{
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.CD-column2{
  flex: 20%;
  max-width: 20%;
  padding: 0 4px;
}

@media screen and (max-width: 700px){
  .CD-row2{
    display: none;
  }
}

.CD-row2added{
  display: none;
  flex-wrap: wrap;
  padding: 0 4px;
}

.CD-column2added{
  flex: 33.33%;
    max-width: 33.33%;
  padding: 0 4px;
}

.CD-row2added1{
  display: none;
  flex-wrap: wrap;
  padding: 0 100px;
}

.CD-column2added1{
  flex: 50%;
    max-width: 50%;
  padding: 0 4px;
}

@media screen and (max-width: 700px){
  .CD-row2added{
    display: flex;
	}
	
	.CD-row2added1{
    display: flex;
		padding: 0 4px;
	}
}

.CD-row3{
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.CD-column3{
  flex: 33.33%;
    max-width: 33.33%;
  padding: 0 4px;
}

.CD-row4{
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.CD-column4{
  flex: 20%;
  max-width: 20%;
  padding: 0 4px;
}
/* --------- /chinese dance --------- */

/* --------- netball --------- */
#HK-title{
	color: #F293B7; 
	margin-top: 15px;
	font-size: 25px;
	text-decoration: underline;
}

@media only screen and (max-width: 750px){
	#HK-title{
		margin-top: 10px;
		font-size: 22px;
	}
}

@media only screen and (max-width: 650px){
	#HK-title{
		font-size: 19px;
	}
}

@media only screen and (max-width: 400px){
	#HK-title{
		font-size: 17px;
	}
}

.netball-accordion{
  	background-color: white;
  	color: #F293B7;
  	cursor: pointer;
  	padding: 18px;
  	width: 100%;
  	text-align: center;
	border: 2px solid #F293B7;
  	transition: 0.4s;
	font-size: 17px;
}

.netball-accordion:hover{
	color: #F8D2DE;
}

@media only screen and (max-width: 750px){
	.netball-accordion{
		font-size: 15px;
	}
}

@media only screen and (max-width: 550px){
	.netball-accordion{
		font-size: 14px;
	}
}

@media only screen and (max-width: 480px){
	.netball-accordion{
		font-size: 13px;
	}
}

.netball-panel{
  	padding: 10px 100px;
  	border: 1px solid #F293B7; 
  	display: none;
  	overflow: hidden;
	background-color: white;
}

@media only screen and (max-width: 900px){
	.netball-panel{
		padding: 10px 80px;
	}
}

@media only screen and (max-width: 850px){
	.netball-panel{
		padding: 10px 70px;
	}
}

@media only screen and (max-width: 800px){
	.netball-panel{
		padding: 10px 60px;
	}
}

@media only screen and (max-width: 750px){
	.netball-panel{
		padding: 10px 50px;
	}
}

@media only screen and (max-width: 700px){
	.netball-panel{
		padding: 10px 40px;
	}
}

@media only screen and (max-width: 650px){
	.netball-panel{
		padding: 10px 30px;
	}
}

@media only screen and (max-width: 600px){
	.netball-panel{
		padding: 10px 20px;
	}
}

@media only screen and (max-width: 550px){
	.netball-panel{
		padding: 10px;
	}
}

.N-column1{
  	float: left;
	width: 25%;
  	padding: 2px;
}

.N-row1::after {
  	content: "";
  	clear: both;
  	display: table;
}

.N-column2{
  	float: left;
	width: 25%;
  	padding: 2px;
}

.N-row2{
	padding: 0px 20px;
}

@media only screen and (max-width: 750px){
	.N-row2{
		padding: 0px 15px;
	}
}

@media only screen and (max-width: 650px){
	.N-row2{
		padding: 0px 10px;
	}
}

@media only screen and (max-width: 600px){
	.N-row2{
		padding: 0px 5px;
	}
}

@media only screen and (max-width: 550px){
	.N-row2{
		padding: 0px;
	}
}

.N-row2::after {
  	content: "";
  	clear: both;
  	display: table;
}
/* --------- netball --------- */

/* --------- modern dance --------- */
.MD-accordion{
  	background-color: white;
  	color: #F293B7;
  	cursor: pointer;
  	padding: 18px;
  	width: 100%;
  	text-align: center;
	border: 2px solid #F293B7;
  	transition: 0.4s;
	font-size: 17px;
}

.MD-accordion:hover{
/*
  	background-color: #F293B7;
	color: white;
*/
	color: #F8D2DE;
}

@media only screen and (max-width: 750px){
	.MD-accordion{
		font-size: 15px;
	}
}

@media only screen and (max-width: 550px){
	.MD-accordion{
		font-size: 14px;
	}
}

@media only screen and (max-width: 480px){
	.MD-accordion{
		font-size: 13px;
	}
}

.MD-panel{
  	padding: 18px;
  	border: 1px solid #F293B7; 
  	display: none;
  	overflow: hidden;
	background-color: white;
}

/* --------- /modern dance --------- */
/* --------- /section3 - CCA --------- */

/* --------- section4 - leadership --------- */
.L-emptsec1{
	height: 5px;
	background-color: white;
}

@media only screen and (max-width: 550px){
	.L-emptsec1{
		height: 10px;
	}
}

#section4{
	padding-top: 80px;
	background-color: white;
	font-family: 'Ruda', sans-serif;
	text-align: center;
}

@media only screen and (max-width: 545px){
	#section4{
		padding-top: 30px;
	}
}

#section4 p{
	font-family: 'Ruda', sans-serif;
	margin: 0px 15px;
}

@media only screen and (max-width: 750px){
	#section4 p{
		font-size: 14px;
	}
}

@media only screen and (max-width: 550px){
	#section4 p{
		font-size: 13px;
	}
}

@media only screen and (max-width: 480px){
	#section4 p{
		font-size: 12px;
	}
}

.img2{
	border: 1px solid #D7D7EA;
  	border-radius: 4px; 
  	padding: 5px; 
/*	box-shadow: 0 4px 8px 0 rgba(172,172,210,1.00), 0 6px 20px 0 rgba(240,240,247,1.00);*/
	width: 80%;
}

.secnametext4-container{
	margin: 0px;
	height: 70px;
	background-color: white;
}

.secname4{
	color: #7069B1;
	font-size: 25px;
	font-weight: bold;
	font-family: 'Ruda', sans-serif;
	margin: 0;
	text-align: center;
	position: relative;
	top: 144.5%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.secname4-2{
	color: #F0F0F7;
	font-size: 90px;
	font-weight: bold;
	font-family: 'Ruda', sans-serif;
	margin: 0;
	top: 0px;
	text-align: center;
}

@media only screen and (max-width: 950px){
	.secname4{
		top: 134%;
	}
	
	.secname4-2{
		font-size: 80px;
	}
	
	#section4{
		padding-top: 65px;
	}
}

@media only screen and (max-width: 850px){
	.secname4{
		top: 123.5%;
	}
	
	.secname4-2{
		font-size: 70px;
	}
	
	#section4{
		padding-top: 50px;
	}
	
	.img2{
		width: 85%;
	}
}

@media only screen and (max-width: 750px){
	.secname4{
		top: 113%;
	}
	
	.secname4-2{
		font-size: 60px;
	}
	
	#section4{
		padding-top: 40px;
	}
	
	.img2{
		width: 90%;
	}
}

@media only screen and (max-width: 650px){
	.secname4{
		top: 100%;
		font-size: 22px;
	}
	
	.secname4-2{
		font-size: 50px;
	}
	
	#section4{
		padding-top: 30px;
	}
	
	.img2{
		width: 95%;
	}
}

@media only screen and (max-width: 550px){
	.secname4{
		top: 77%;
		font-size: 17px;
	}
	
	.secname4-2{
		font-size: 40px;
	}
	
	#section4{
		padding-top: 10px;
	}
	
	.img2{
		width: 100%;
	}
}

#section4imgs{
	text-align: center;
	padding: 7px 300px 0px; /* ----- top, right/left, bottom----- */
}

#L-middleimg{
	margin-top: 20%;
}

.L-column{
  	float: left;
	width: 33.33%;
  	padding: 3px;
}

@media only screen and (max-width: 1400px){
	#section4imgs{
		padding: 7px 280px 0px;
	}
}

@media only screen and (max-width: 1300px){
	#section4imgs{
		padding: 7px 260px 0px;
	}
}

@media only screen and (max-width: 1280px){
	#section4imgs{
		padding: 7px 200px 0px;
	}
}

@media only screen and (max-width: 979px){
	#section4imgs{
		padding: 7px 100px 0px;
	}
}

@media only screen and (max-width: 740px){
	#section4imgs{
		padding: 7px 80px 0px;
	}
}

@media only screen and (max-width: 650px){
	#section4imgs{
		padding: 7px 50px 0px;
	}
}

@media only screen and (max-width: 607px){
	#section4imgs{
		padding: 7px 35px 0px;
	}
}

@media only screen and (max-width: 550px){
	#section4imgs{
		padding: 7px 26px 0px;
	}
}

@media only screen and (max-width: 480px){
	#section4imgs{
		padding: 7px 20px 0px;
	}
}

.L-row::after {
  	content: "";
  	clear: both;
  	display: table;
}

.bottomsec{
	background-color: white; 
	height: 80px;
}

@media only screen and (max-width: 1100px){
	.bottomsec{
		height: 120px;
	}
}

@media only screen and (max-width: 1030px){
	.bottomsec{
		height: 130px;
	}
}

@media only screen and (max-width: 900px){
	.bottomsec{
		height: 140px;
	}
}

@media only screen and (max-width: 800px){
	.bottomsec{
		height: 150px;
	}
}

@media only screen and (max-width: 400px){
	.bottomsec{
		height: 150px;
	}
}
/* --------- /section4 - leadership --------- */
/* --------- /main portion --------- */