/* ==========================================================================
|						 _______________________
|						|	CIRCLE K STYLES		|
| 						|_______________________|
|
|
|	• Basic Layout
|
|	• Basic Typography & Colors
|		- Headers
|
|	• Components 
|		- Spacers
|		- Lists 
|		- Forms
|
|	• Header
|		- Top Bar
|		- Logo
|		- Nav Menu
|
|	• Body Main Content
|		- Sidebar 
|			- Sidebar Blog 
|
|	• Footer
|		- Footer Bottom
|
|	• Widgets, ETC.
|		- Jumbrotron
|		- Home Page Icon Nav Images
|		- Misc.
|
|	• RESPONSIVE FACTORS
|
|
|
========================================================================== */


/* ==========================================================================
	Basic Layout
========================================================================== */

			section { margin-bottom: 40px; }

			div.first-sight { margin-top: 10px; }


/* ==========================================================================
	Basic Typography & Colors
========================================================================== */

			p { color: #2F496F; }

			img { max-width: 100%; }

			a { color: #659CEF; }
				a:hover { text-decoration: underline; color: #AFC9F2; }


			.ck-default	   { color: #659CEF; }
			.ck-blue-dark  { color: #2F496F; }
			.ck-blue-light { color: #AFC9F2; }
			.ck-blue-mid   { color: #4F7BBC; }
			.ck-gray-mid   { color: #515D6F; }
			.ck-gold-dark  { color: #A27824; }
			.ck-gold-light { color: #EFC165; }

			.makeInactive a { font-size: 1rem; color: #CCC; }

			.list-group-item { margin-bottom: 15px; }


	/* =============================
		Headers
	============================= */


			.first-sight { max-width: 100%; text-align: justify; }
			.first-sight img.logo {display: none;}
			.first-sight h1 { white-space: nowrap; }

		/* =============================
			Header 1
		============================= */


			h1 { color: #659CEF; margin-bottom: 15px; }
			h1 span.big-big-text {
				font-size: 15rem; 
				font-weight: 700; 
				text-transform: uppercase; 
				text-align: right;
				font-style: normal;
			}
			h1 span.big-big-subhead  {
				position: relative;
				bottom: 50px;
				font-size: 3rem;
				text-decoration: underline;
			}

			/* =============================
				Header 2
			============================= */

			h2 { color: #659CEF; font-weight: lighter;}
			h2 .ck-bolder { font-weight: 900; }
			h2.ck-about { line-height: 1.6em; font-size: 2.1em; }


			.index-about-col2 h2 { color: #AFC9F2; text-transform: uppercase; font-weight: bold; font-size: 1.3em; margin-bottom: 10px; }

			h3.memberName { font-size: 3.4rem; font-weight: 100; margin-top: 0; color: #888; }
				.memberName-lastName { font-weight: 200; color: #555; }






/* ==========================================================================
	Components / Advanced Typography
========================================================================== */

	/* =============================
		Spacers
	============================= */

			.spacer10  { height: 1px; margin-bottom:  9px; clear: both; width: 100%; }
			.spacer20  { height: 1px; margin-bottom: 19px; clear: both; width: 100%; }
			.spacer30  { height: 1px; margin-bottom: 29px; clear: both; width: 100%; }
			.spacer40  { height: 1px; margin-bottom: 39px; clear: both; width: 100%; }
			.spacer50  { height: 1px; margin-bottom: 49px; clear: both; width: 100%; }
			.spacer100 { height: 1px; margin-bottom: 99px; clear: both; width: 100%; }


			

	/* =============================
		Lists
	============================= */

			ul.listnobullets { list-style-type: none; padding-left: 7px; }

			p.capitalize { text-transform: capitalize; }

			.officeList { padding: 5px 10px; background-color: #659CEF; margin: 15px; color: #FFF; border-radius: 15px; margin-bottom: 15px; }
				.officeList:first-child { margin-left: 0; }
				.officeList:last-child { margin-right: 0; }
				.officeList a:hover { color: #FFF; }



	/* =============================
		Social
	============================= */
			img.social-icons { background-color: #659CEF; color: #FFF; padding: 10px; max-height: 30px; }
			.social-disabled:hover { cursor: not-allowed; }



	/* =============================
		Forms
	============================= */

			.quote { font-style: oblique; }
			cite { font-weight: bold; color: #777; }

			.add_resultRows .row { padding: 5px; }
			.add_resultRows .row:nth-of-type(odd) { background-color: #F5F5F5; }


/* ==========================================================================
	Header's custom styles
========================================================================== */


	/* =============================
		Top Nav Bar
	============================= */

			div.navbar.navbar-default.navbar-fixed-top { background-color: #FFF; background-image: none; padding-top: 10px; padding-bottom: 10px; }
			div.navbar.navbar-default.navbar-fixed-top a { color: #659CEF; text-transform: uppercase; }
			div.navbar.navbar-default.navbar-fixed-top a:hover { }

			div.navbar.navbar-default.navbar-fixed-top a.navbar-brand { max-width: 50px; padding: 0; margin-left: 10px; }



/* ==========================================================================
	Body Content's custom styles
========================================================================== */

	/* =============================
		Index Page
	============================= */		

			.index-about-col2 { padding-top: 30px; }
			.index-about h2 a { font-size: 1.2em; }
 			
			.pillars h2 { text-align: center; }



	/* =============================
		Active Page Page
	============================= */

			/* Member Name old style
			div.member-name { background-color: #F8F8F8; padding: 2px 15px; cursor: pointer; margin-bottom: 10px; border: 1px solid #659CEF; }
				div.member-name h4 { letter-spacing: 0.05em; color: #659CEF; font-weight: 600;  }

			div.member-block { padding: 10px; }*/

			div.member-name { padding: 2px 15px; cursor: pointer; margin-bottom: 10px; }
				div.member-name h3 { letter-spacing: 0.05rem; color: #555; font-weight: 100; font-size: 2.4rem; }
				div.member-name span.memberOffice { color: #AFC9F2; font-weight: lighter; margin-left: 5px; font-size: 2rem; }

			div.member-name .toggleIcon { color: #BBB; }

			div.memberName-selected { background-color: #659CEF; padding: 1px 15px;}
				div.memberName-selected h3 { color: #AFC9F2; margin-top: 10px; }
				div.memberName-selected .toggleIcon { color: #AFC9F2; }

			div.member-name .toggleIcon .memberName-selected { color: #FFF; }
			
			.memberName-img { max-width:50px; max-height:50px; margin-right:15px; }

	/* =============================
		Alumni Page
	============================= */

		.date-heading h2 { margin-top: 3.5rem; }
		.alumni-name  h4 { font-weight: 300; font-size: 1.9rem; margin-bottom: 1.2rem; cursor: pointer; color: #555; }
		.alumni-name  h4 span { color: #777; }
		.alumni-block { margin-bottom: 5rem; }

		.alumniOfficeList { margin-right: 20px; }


	/* =============================
		Edit Page
	============================= */
		
		.editSecretInfo { background-color: #659CEF; padding: 15px; }
		.editSecretInfo label { color: #FFF; }



	/* =============================
		Sidebar
	============================= */

		ul.sidebar-membersLinks { list-style-type: none; padding-left: 0; }
		ul.sidebar-membersLinks li { margin: 10px auto 10px auto; background-color: #659CEF; padding: 10px; }
		ul.sidebar-membersLinks li a { background-color: #659CEF; color: #FFF; text-align: center; }
		ul.sidebar-membersLinks li a img { max-height: 4rem; min-width: 3rem; margin: 0 15px 0 10px; }

		.memberLink-actives 	{  }
		.memberLink-alumni 		{  }
		.memberLink-sweethearts {  }




/* ==========================================================================
	Footer's custom styles
========================================================================== */

			footer { background-color: #659CEF; padding: 10px 0; color: #2F496F;}



			footer a  { color: #2F496F; }
				footer a:hover { text-decoration: underline; }
			footer h3 { font-size: 2.5em; letter-spacing: -.1em; text-transform: uppercase; }
			footer h3.withSubhead { margin-bottom: 2px; }
				footer h4 { color: #2F496F; padding-left: 1em; letter-spacing: .2em; margin-top: 0; font-style: italic;}			
			footer p  { color: #FFF; }
			footer ul { list-style-type: none; padding-left: 0; letter-spacing: .2em; }
			footer li { margin-bottom: 5px; }



	/* =============================
		Footer Bottom custom styles
	============================== */

			div.row.footer-bottom {
				/*border-top: 1px solid #2F496F;*/
				margin-top: 10px;
				/*padding-top: 10px;*/
				color: #515D6F;
			}

			.row.footer-bottom a { color: #515D6F; }





/* ==========================================================================
	Widgets, Plugins, Specifics, etc.
========================================================================== */

	/* =============================
		Home Page Image Slider
	============================= */

			div.jumbotron.home-slider { margin-bottom: 20px }




	/* =============================
		Misc.
	============================= */

		.secretInfo { background-color: #659CEF; padding: 0px 20px; }
		.secretInfo h3 { color: #FFF; font-weight: lighter;}
		.secretInfo .row { margin-bottom: 20px; }
		.secretInfo a { color: #FFF; }
		.secretInfo p { color: #FFF; font-weight: lighter; }
		.secretInfo p strong { color: #333;	}
		p.secretInfo-answers { letter-spacing: .13rem; }
			




/* ==========================================================================
	Responsiveness
========================================================================== */


@media screen and (max-width: 1280px) {		


		/* =============================
			Header
		============================= */

			div.logo { margin-top: 25px; }
			div.logo img { width: 40%;}


		/* =============================
			Content
		============================= */

			form.contact-us-form { width: 70%; }



		/* =============================
			Sidebar
		============================= */

			.sidebar-block-large { font-size: 1.8em; }


}

@media screen and (max-width: 1024px) {		

		.row .col-sm-9 {border-left: none;}


		/* =============================
			Sidebar
		============================= */

			.sidebar-block-large { font-size: 1.2em; }
			.sidebar .col-xs-4 { padding-right: 0; }

			form.contact-us-form { width: 100%; }


}


@media screen and (max-width: 991px) {

		h1 span.big-big-text { font-size: 10.5rem; }
		h1 span.big-big-subhead { bottom: 30px; }


		/* =============================
			Sidebar
		============================= */

			.sidebar-block-large { font-size: 1.1rem; }

			.page-header { margin-top: 0; }

}



@media screen and (max-width: 767px) {
	
		/* =============================
			Header
		============================= */


			div.logo { margin-top: 15px; padding-bottom: 10px; }
			div.logo img { width: 75%;}

			.navbar-static-top button.navbar-toggle { border: none; }

			ul.nav.navbar-nav { margin: 0 auto 20px auto; border: none; text-align: center; width: 85%; }
			ul.nav.navbar-nav li { text-transform: uppercase; padding-left: 40px; }
			ul.nav.navbar-nav li a { color: #659CEF; }
			ul.nav.navbar-nav li:first-child { padding-left: 40px; }

			h1 span.big-big-text { font-size: 5rem; }
			h1 span.big-big-subhead { bottom: 15px; }


		/* =============================
			Content
		============================= */

			.row.content { padding: 0 20px; }
			.content .col-sm-9 {border-left: none;}


		/* =============================
			Sidebar
		============================= */



			div.sidebar {display: none;}
			.sidebar-block-large { font-size: 1.8em; }
			.sidebar .col-xs-4 { padding-right: 15px; }

			.wrapped-icons { margin-bottom: 20px; }


}


@media screen and (max-width: 480px) { 

			.container.first-sight { margin-top: 50px; }

			.first-sight img.logo {display: block;}
			.first-sight h1 { width: 100%; text-align: center; }
			h1 span.big-big-text { font-size: .9em; margin-bottom: 10px;}
			h1 span.big-big-subhead { font-size: .7em; bottom: 0; text-align: right; text-decoration: none; }

			.hideme-small { display: none; }



			.index-about .col-sm-5 { margin-top: 50px; background: #515D6F; padding: 40px 15px; }
			.index-about .col-sm-5 h2 { font-size: 2em; color: #FFF; padding-left: 10px; margin-bottom: 10px; }
			.index-about .col-sm-5 p { padding-left: 30px; color: #AFC9F2; }

}