@charset "UTF-8";
/* CSS Document */

.baskregular {
	font-family: 'Libre Baskerville', serif;
font-weight:400;}

.baskitalic{
	font-family: 'Libre Baskerville', serif;
	font-wieght:400 italic;
}

.rlight{
	font-family: 'Roboto', sans-serif;
	font-weight:300;
}

.rlightitalic{
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	font-style:italic;
}

.rregular{
	font-family: 'Roboto', sans-serif;
	font-weight:400!important;
}

.rregularitalic{
	font-family: 'Roboto', sans-serif;
	font-weight:400;
	font-style:italic;
}

.rbold{
	font-family: 'Roboto', sans-serif;
	font-weight:700;
}

.rbolditalic{
	font-family: 'Roboto', sans-serif;
	font-weight:700;
	font-style:italic;
}

.rblack{
	font-family: 'Roboto', sans-serif;
	font-weight:900;
}

.rblackitalic{
	font-family: 'Roboto', sans-serif;
	font-weight:900;
	font-style:italic;
}

.colorgold{color:#AF8B30;}
.backgold{background-color:#AF8B30;}
.backgrey{background-color:#333333;}

.fontintro{font-size:20px;line-height:170%;}
.fontbigintro{font-size:30px;}
.fontbig{font-size:50px;}
.fontintro1{font-size:30px;line-height:130%;}
.subintro{font-size:24px;line-height:170%;}
.fontbig1{font-size:54px;}


.list-style .awsm-personal-info h3 {
	font-size: 100px;
	margin: 0 0 5px;
	line-height: 1.1;
}

/* this is used for the slider */
/*.imagearea{
	float:left;
	width:100%;
	background-color:#333333;
	height:500px;
	display:block;
	}
	
.imagearea1{
	float:left;
	width:100%;
	background-color:#555555;
	height:500px;
	display:block;
	}*/




/*--- HOME PAGE RELATED ---------------------------------------*/

.hometext{
	float:left;
	margin-left:150px;
	padding-left:0px;
	width:400px;
	padding-top:400px;
	padding-bottom:200px;
	
}

/* --- for reducing logo ---*/	
/*---header style---*/			
header{
	position: fixed;
	top:0;
	left:0;
	line-height:0px;
	float:left;
	z-index:10000;
	}


/*---transition effect speed between classes---*/
/*header, a, img, li {
	transition: all 1s;
	-moz-transition: all 1s; /* Firefox 4 
	-webkit-transition: all 1s; /* Safari and Chrome 
	-o-transition: all 1s; /* Opera 
	}
	
	
/*---transition effect speed between classes---*/
header, img {
	transition: all 1s;
	-moz-transition: all 1s; /* Firefox 4 */
	-webkit-transition: all 1s; /* Safari and Chrome */
	-o-transition: all 1s; /* Opera */
	}

/*---set logo size for big and small transistion---*/
header.large img{
	display:block;
	width:250px;
	float:left;
	margin-top:80px;
	margin-left:140px;

	}
			
header.small img{ 
	width:100px;
	display:block;
	margin-top:30px;
	margin-left:30px;
	margin-bottom:0px;
	float:left;
	}

/*---set logo size for big and small transistion---*/
header.large1 img{
	width:100px;
	display:block;
	margin-top:30px;
	margin-left:30px;
	margin-bottom:0px;
	float:left;
	}
			
header.small1 img{ 
	width:100px;
	display:block;
	margin-top:30px;
	margin-left:30px;
	margin-bottom:0px;
	float:left;
	}
		
/*---set logo size for big and small transistion---*/
header.large2 img{
	display:block;
	width:100px;
	float:left;
	margin-top:30px;
	margin-left:30px;
	}
			
header.small2 img{ 
	width:100px;
	display:block;
	margin-top:30px;
	margin-left:30px;
	margin-bottom:0px;
	float:left;
	}
		

	
.hstar{height:100vh;}

.introbox{
	margin:0 auto;
	width:1000px;
	/*border:solid 1px #AF8B30;
	padding:0px;*/
}

.goldline{
	float:left;
	width:100%;
	height:5px;
	background-color:#AF8B30;
}

.background-line{
	background: url("./images/goldline.png");
	background-position: center center;
	/*background-repeat:repeat-y;*/
	background-repeat:no-repeat;
	background-color:#333333;
	position: relative;
	vertical-align: top;
	} 
	
.introwhitelogo{
	width:100px;
	margin:0 auto;
	margin-top:0px;
}
.introwhitelogo img{width:100%;}

.introleaves{
	width:170px;
	margin: 0 auto;
}
.introleaves img{width:100%;}

/* assign an image background to a specific page */	
.page-id-88:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url("./images/homestar.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* assign an image background to a specific page */	
/*.page-id-18:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url("./images/pict-programs2.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* assign an image background to a specific page */	
/*.page-id-16:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url("./images/pict-programs2.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}*/

.background-events{
	background: url("./images/pict-events.jpg");
	background-position: center center;
	/*background-repeat:repeat-y;*/
	overflow: hidden;
	background-size: cover;
	position: relative;
	vertical-align: top;
	}

.background-events{
	background: url("./images/pict-events.jpg");
	background-position: center center;
	/*background-repeat:repeat-y;*/
	overflow: hidden;
	background-size: cover;
	position: relative;
	vertical-align: top;
	}
	
.background-programs{
	background: url("./images/pict-programs4.jpg");
	background-position: center center;
	/*background-repeat:repeat-y;*/
	overflow: hidden;
	background-size: cover;
	position: relative;
	vertical-align: top;
	}	
	
.background-whoweare{
	background: url("./images/back-whoweare.jpg");
	background-position: center center;
	/*background-repeat:repeat-y;*/
	overflow: hidden;
	background-size: cover;
	position: relative;
	vertical-align: top;
	}

.background-fill1{
	background: url("./images/Gold%20Star%20Kids%20Flag-min.jpeg");
	background-position: center center;
	/*background-repeat:repeat-y;*/
	overflow: hidden;
	background-size: cover;
	position: relative;
	vertical-align: top;
	}

.background-fill3{
	background: url("./images/fill3.jpg");
	background-position: left bottom;
	/*background-repeat:repeat-y;*/
	overflow: hidden;
	background-size: cover;
	position: relative;
	vertical-align: top;
	}	
	
.background-donate{
	background: url("./images/pict-donate1.jpg");
	background-position: bottom left;
	/*background-repeat:repeat-y;*/
	overflow: hidden;
	background-size: cover;
	position: relative;
	vertical-align: top;
	}
	
.background-mission{
	/*background: url("./images/pict-mission.jpg");*/
	background: url("./images/homestarback.jpg");
	background-position: center center;
	/*background-repeat:repeat-y;*/
	overflow: hidden;
	background-size: cover;
	position: relative;
	vertical-align: top;
	}

.background-events{
	background: url("./images/pict-events.jpg");
	background-position: center center;
	/*background-repeat:repeat-y;*/
	overflow: hidden;
	background-size: cover;
	position: relative;
	vertical-align: top;
	}

.background-homestar{
	background: url("./images/homestar.jpg");
	background-position: bottom right;
	/*background-repeat:repeat-y;*/
	overflow: hidden;
	background-size: cover;
	position: relative;
	vertical-align: top;
	}

.background-contact{
	background: url("./images/pict-contact.jpg");
	background-position: center center;
	/*background-repeat:repeat-y;*/
	overflow: hidden;
	background-size: cover;
	position: relative;
	vertical-align: top;
	}

.hcontact{height:500px;}
		
.hfill{height:500px;}

.fill1{
	float:left;
	width:50%;
}

.fill2{
	float:left;
	width:30%;
	position:relative;
}

.fillinside{
	width:70%;
}
	
.fill3{
	float:left;
	width:20%;
}

.cinside{
	margin:0 auto;
	width:80%;
	max-width:1300px;
}

.c1{
	float:left;
	width:30%;
	margin-right:5%;
}
.c2{
	float:left;
	width:30%;
	margin-right:5%;
}

.c3{
	float:left;
	width:30%;
}

.c1 img {width:100%;}
.c2 img {width:100%;}
.c3 img {width:100%;}

.fontsize1{
	font-size:35px;
	line-height:120%;
}

.line{
	float:left;
	width:100%;
	height:1px;
	background-color:#cccccc;
}

.gbuttons{
	float:left;
	display:block;
	font-size:12px;
}

.gstar{float:left;
	width:18px;
	margin-right:5px;
	display:block;
	margin-top:1px;
}
.gstar img{
width:100%;
}

.gapsbutton{
	cursor:pointer;
	-webkit-transition:0.5s;
	background-color:rgba(229,216,200,1);
	}

.gapsbutton:hover {
	background-color:#FF2600;
}

.backblacktrans{
	float:left;
	width:100%;
	background-color:rgba(0,0,0,0.7);
}

/* --------Sub pages-----------*/

.hsubphoto{height:600px;}
.backlightgrey{background-color:#666666;}
.hpage{height:800px;}


.substar{
	width:180px;
	z-index:0;
	display:block;
}
.substar img{
	width:100%;
	margin-top:-160px;
	display:block;
}



.insidesub{
	margin:0 auto;
	width:950px;
}

.p1{
	float:left;
	width:47%;
	margin-right:5%;
}
.p2{
	float:left;
	width:48%;
}

.tphoto{
	display:block;
	width:100%;
}
.tphoto img{width:100%;display:block;}
.pfont{font-size:12px;}

.starline1{
	float:left;
	width:100%;
	height:1px;
	background-color:#bfbfbf;
	position:relative;
}

.starline{
	float:left;
	width:100%;
	height:1px;
	background-color:#bfbfbf;
	margin-top:90px;
	margin-bottom:100px;
	position:relative;
}
.littlestar{
	width:20px;
	margin-top:1px;
}
.littlestar img{width:100%;}

.wevideo1{
	float:left;
	width:45%;
	margin-right:5%;
}

.wevideo2{
	float:left;
	width:45%;
}
	
.mission{
	float:left;
	width:50%;
	margin-left:50%;
}

.mission1{
	width:80%;
	margin:0 auto;
}

.logosmall{
	float:left;
	width:40px;
	margin-right:20px;
}
.logosmall img{width:100%;}
.team1{
	float:left;
	width:20%;
	margin-right:5%;
}
.team2{
	float:left;
	width:75%;
}

.teampicture img{
	float:left;
	width:100%;
}

.teamfont{
	font-size:28px;
}
.teamfont1{
	font-size:20px;
}

.f1{
	float:left;
	width:20%;
}

.f2{
	float:left;
	width:20%;
}

.f3{
	float:left;
	width:20%;
}
	
.donatestandin{
	margin: 0 auto;
	width:575px;
}

.donatestandin img{
	width:100%;
}

.donateheadline{
	margin:0 auto;
	width:60%;
}

.bottompanel {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  z-index:10000;
	  width:100%;
	}

.copyright{
	float:left;
	margin-left:20px;
	font-size:10px;}
	
.bottomdonate{
	float:right;
	margin-right:20px;
}

.footheight{
	float:left;
	width:100%;
	display:block;
	height:54px;
}

.pagetitle{
	float:left;
	/* width: 250px; */
	margin-left:145px;
	padding-top:0px;
	margin-top:330px;
}

.letterspace{
	letter-spacing:8px;
}

.fontsub{
	font-size:40px;
}

.mpt{padding-top:200px;}
.mpb{padding-bottom:200px;}

.homeheight{height:100vh;}
.desktop{display:block;}
.mobile{display:none;}

.contact2{
	float:left;
	width:100%;
	margin-left:0%;
    margin-top:5%
}

.contact1{
	float:left;
	width:65%;
}

.social1{
	float:right;
	width:20px;
	padding-top:18px;
	padding-bottom:12px;



	
}
.social1 img{
	width:100%;
}

.social2{
	float:right;
	width:20px;
	padding-top:18px;
	padding-bottom:12px;
	margin-right:20px;
	margin-left:20px;
}

.social2 img{
	width:100%;
}

.bottombutton{
	float:right;
	padding-top:15px;
	padding-bottom:15px;
	padding-left:15px;
	padding-right:15px;
	background-color:#333333;
	color:white;
}


.bottombutton:hover{
	background-color:green;
}
	
.bottomright{
	float:right:
}

.copycolor{color:#999999;}

.gform_next_button{
	background:#cccccc;
	margin:0px;
	padding-right:15px;
	padding-left:15px;
	padding-top:10px;
	padding-bottom:10px;
	color:white;
	font-size:16px!important;
	border-radius:5px!important;
	border:none;
	color:#444444;
}

.gform_previous_button{
	background:#cccccc;
	margin:0px;
	padding-right:15px;
	padding-left:15px;
	padding-top:10px;
	padding-bottom:10px;
	border-radius:5px!important;
	border:none;
	color:#444444;
	font-size:16px!important;
}

body img.gform_ajax_spinner {
	width:40px!important;
	height:30px!important;
	/*display: none !important;*/
}

/**
 * 8.0 Media Queries zzz
 * ----------------------------------------------------------------------------
 */

/* Does the same thing as <meta name="viewport" content="width=device-width">,
 * but in the future W3C standard way. -ms- prefix is required for IE10+ to
 * render responsive styling in Windows 8 "snapped" views; IE10+ does not honor
 * the meta tag. See https://core.trac.wordpress.org/ticket/25888.
 */
@-ms-viewport {
	width: device-width;
}
@viewport {
	width: device-width;
}


/*this media query is a general setting to control the ipad look while the more specific queries (below) control the actual devices*/

@media (max-width: 1024px){ 
	
.copyright{
	float:left;
	margin-left:10px;
	font-size:10px;}
	
.contact2{
	float:left;
	width:100%;
	margin-left:0%;
	border-top:solid 1px #666666;
	padding-top:40px;
}

.contact1{
	float:left;
	width:100%;
	margin-bottom:100px;
}
	
.background-donate{
	background: url("./images/pict-donate2.jpg");
	background-position: bottom right;
	/*background-repeat:repeat-y;*/
	overflow: hidden;
	background-size: cover;
	position: relative;
	vertical-align: top;
	}
	
.background-contact{
	background: url("./images/pict-contact.jpg");
	background-position: left center;
	/*background-repeat:repeat-y;*/
	overflow: hidden;
	background-size: cover;
	position: relative;
	vertical-align: top;
	}

.background-programs{
	background: url("./images/pict-programs4mobile.jpg");
	background-position: right center;
	/*background-repeat:repeat-y;*/
	overflow: hidden;
	background-size: cover;
	position: relative;
	vertical-align: top;
	}
		
.team1{
	float:left;
	width:100%;
	margin-right:0%;
	margin-bottom:20px;
}
.team2{
	float:left;
	width:100%;
}

.teampicture img{
	float:left;
	width:40%;
	margin-left:0%;
}

.teamfont{
	font-size:23px;
}
.teamfont1{
	font-size:18px;
}


.background-mission{
	/*background: url("./images/pict-missionmobile1.jpg");*/
	background: url("./images/homestarbackmobile.jpg");
	background-position: left center;
	/*background-repeat:repeat-y;*/
	overflow: hidden;
	background-size: cover;
	position: relative;
	vertical-align: top;
	}
	
.mpt{padding-top:50px;}
.mpb{padding-bottom:40px;}

.subintro{font-size:20px;line-height:150%;}

.fontintro{
	font-size:30px;
	line-height:50px;
	color:#f3f3f3;
}
.fontbigintro{
	font-size:40px;
}

.fontsub{
	font-size:14px;
}
.pagetitle{
	float:left;
	width: 150px;
	margin-left:45px;
	padding-top:0px;
	margin-top:230px;
}
	
.substar{
	width:120px;
}
.substar img{
	margin-top:-105px;
}

.hsubphoto{height:400px;}

.fontsize1{
	font-size:28px;
	line-height:120%;
}
	
.donatestandin{
	margin: 0 auto;
	width:80%;
}

.p1{
	float:left;
	width:100%;
	margin-right:0%;
	margin-bottom:30px;
}
.p2{
	float:left;
	width:100%;
}
	
.f1{
	float:left;
	width:100%;
	margin-bottom:0px;
}

.f2{
	float:left;
	width:100%;
	margin-bottom:0px;
}

.f3{
	float:left;
	width:100%;
}
	
.mission{
	float:left;
	width:100%;
	margin-left:0%;
}
	
.wevideo1{
	width:100%;
	margin-right:0%;
	margin-bottom:0px;
}

.wevideo2{
	width:100%;
	background-black;
}
	
.insidesub{
	margin:0 auto;
	width:80%;
}

.c1{
	width:100%;
	margin-right:0%;
	margin-bottom:50px;
}
.c2{
	width:100%;
	margin-right:0%;
	margin-bottom:50px;
}

.c3{
	width:100%;
}

.fill1{
	width:100%;
	display:block;
}
.fill1 img{width:100%;display:block;}

.fill2{
	width:100%;
}
.fill2 img{width:100%;}



.fillinside{
	margin:0 auto;
	width:80%;
}
	
.fill3{
	width:100%;
}
.fill3 img{width:100%;}

	
.desktop{display:none;}
.mobile{display:block;}

.hmobile{height: 600px;}

/* assign an image background to a specific page */	
.page-id-8:before {
  display: none;
}

	
	/*---set logo size for big and small transistion---*/
	header.large img{
		display:block;
		width:150px;
		float:left;
		margin-top:40px;
		margin-left:40px;
		}
				
	header.small img{ 
		width:50px;
		display:block;
		margin-top:20px;
		margin-left:20px;
		margin-bottom:0px;
		float:left;
		}
		
	
	/*---set logo size for big and small transistion---*/
	header.large1 img{
		width:50px;
		display:block;
		margin-top:20px;
		margin-left:20px;
		margin-bottom:0px;
		float:left;
		}
				
	header.small1 img{ 
		width:50px;
		display:block;
		margin-top:20px;
		margin-left:20px;
		margin-bottom:0px;
		float:left;
		}

.hometext{
	float:left;
	margin-left:0px;
	padding-left:30px;
	width:80%;
	padding-top:220px;
	padding-bottom:100px;
	
}

.introgrey{color:#eeeeee;}



.hfill{height:300px;}


}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 



}


/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
	  


}


/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
	  


}


/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {
	  	  


	
}


/* ----------- Galaxy S4, S5 and Note 3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {
	  

	
}


/* ----------- Galaxy S6 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 4) {
	  


	
}



/* ----------- Windows Phone ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 480px) 
  and (device-height: 800px) {
	  


	
}




	  

/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
	  

}



/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
	  

}


/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {
	  

}


/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {
	  


}


/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
	  


}




.circle-svg-icon svg {
    width: 29px;
}
.hr-line-flex-sec {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content:center;
}
.hr-line-right {
    width: 15%;
    text-align: -webkit-right;
}
.hr-line-left {
    width: 15%;
    text-align: -webkit-left;
}

.main-text-center-sec {
    width: 60%;
    text-align:center;
}
.leadership-main-head-sec {
    width: 100%;
    margin-left: 0;
}
.q-p h3 {
    font-size: 18px;
    font-weight: 700;
}
.q-p {
    margin-left: 60px;
}
.q-img-one {
    width: 100%;
    margin-bottom: -30px;
    text-align: left;
}
.panelinside div.m-flex {
    margin: 0 auto;
    width: 80% !important;
    max-width: 1300px;
    text-align:center;
}
.q-img-one img {
    width: 35px;
}
.q-img-two img {
    width: 35px;
}
.q-img-two {
    text-align: right;
    margin-top: -50px;
    width: 85%;
}
.contact1
{
    display: flex;
    gap: 40px;
    width: 100% !important;
}
.team-flex-sec {
    width: 100%;
}
.circle-svg-icon {
    width: 5%;
}
.br-img {
    background: url(https://soc-f.org/mystaging01/wp-content/themes/socf2/images/MacBook%20Pro%2014_%20-%205.png?_t=1723207984);
    background-repeat: no-repeat;
    background-size: cover;
}




@media only screen and (min-width:300px) and (max-width:768px) {


.circle-svg-icon svg {
    width: 29px;
}
.hr-line-flex-sec {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content:center;
}
.hr-line-right {
    width: 25%;
    text-align: -webkit-right;
}
.hr-line-left {
    width: 25%;
    text-align: -webkit-left;
}

.main-text-center-sec {
    width: 80%;
    text-align:center;
}
.quote-sec {
    width: 100%;
}
.q-img-one {
    width: 100%;
    margin-bottom: -9px;
    text-align: left;
    margin-left: 30px;
}
.q-img-one img {
    width: 24px;
}
.q-p {
    font-size: 16px;
    padding: 0 20px;
}
.q-p h3 {
    font-size: 16px;
}
.q-img-two {
    text-align: right;
    margin-top: -53px;
    width: 100%;
    padding-right: 52px !important;
}
.q-img-two img {
    width: 24px;
}
.q-p {
    margin-left: 0;
}
.panelinside div.m-flex {
    width: 100% !important;
}
.contact1 {
    display: block;
}
.br-img {
    background: url(https://soc-f.org/mystaging01/wp-content/themes/socf2/images/MacBook%20Pro%2014_%20-%205.png?_t=1723207984);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:right
}


}