/*  
Theme Name: BuckleUpNC_Custom_2.0
Version: 2.0
Author: JWeisenfeld
*/

/* Top Elements */
* { margin: 0; padding: 0px; outline: 0 }

body {
	background: #fff;
	font-family: 'Epilogue', sans-serif;
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 2.1rem;
	color: #333; 
}

/* headers */
h1 {font-family: 'Titillium Web', sans-serif;
	font-size: 200%;	
	font-weight: 700;
	color: #33669b;
	padding: 0px;		
	margin: 0px 0 20px 0;
	line-height: 2.75rem;
}
h2 {
	font-family: 'Titillium Web', sans-serif;
	font-size: 150%;	
	font-weight: 700;
	color: #33669b;
	padding: 10px 0px 5px 0px;		
	margin: 0;
}
h3 {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 150%;
	color: #33669b; 
	padding: 5px 0 0px 0;
	line-height: 150%;
}
h4 {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 700;
	font-size: 100%;
	color: #33669b; 
	padding: 5px 0 0px 0;
	line-height: 115%;
}

p {
	padding: 0px;		
	margin: 0 0 .5rem 0;
}
a {color: #3e7cbd; text-decoration: none; font-weight: 400;}
a:hover {text-decoration: underline;}
hr {
	border: 1px solid #33669b;
	margin: 1rem 0 1rem 0;
}
ul, ol {
	margin: 0px 0 20px 0;
	padding: 0 20px;
	color: #333;
}

/* images */
img {
	margin: 10px;
}
img.float-right {
  margin: 5px 0px 10px 10px;  
}
img.float-left {
  margin: 5px 10px 10px 0px;
}

/* start - table */
table {
	border-collapse: collapse;
	margin: 10px 0 0 0px;	
}
th strong {
	color: #fff;
}
th {
	background: #088FC6;
	height: 29px;
	padding-left: 12px;
	padding-right: 12px;
	color: #FFF;
	text-align: left;
	/*border-left: 1px solid #B6D59A;
	border-bottom: solid 2px #FFF;*/
}
tr {
	height: 30px;
}
td {
	padding: .5rem;
	border: 1px solid #000;
	line-height: 1.25rem;
}
td.column-a {
	background: #4897b8;
	color: #fff;
}

/* form elements */
fieldset {
	padding: 10px 0 0 0;
	border: 0px solid;
}
.formrow {
	margin: 0px 0 1rem 0px;
}
#formdiv {
	background:#fff;
	padding: 0px;
	margin: 15px 0 0 140px;
}
form {
	margin:0px 0 0px 0;
	padding: 0px;
}
  
label {
	display:block;
	font: 1.25rem 'Epilogue', sans-serif;
	padding: 0px;
	margin: 0 0 0rem 0;
}
select {color: #000; padding: 5px 20px; font-size: 1rem;text-align: center;}
input {
	padding:5px 20px;
	margin: 0px 0px 0px 0px;
	background: #fff;
	border:1px solid #999;
	color:#333;
	font-size: 1rem;
}
input #lastinput {
	padding:2px;
	margin: 0px 0px 5px 0px;
	border:1px solid #69A934;
	font: normal 1em Verdana, sans-serif;
}
#submit {background: #33669a; color: #fff;}
#required {color: #cd2127;font-size: .85rem;}
textarea {
	width:95%;
	padding:2px;
	margin: 2px;
	font: normal 1em Verdana, sans-serif;
	border:1px solid #999;
	height:100px;
	display:block;
	color:#777;
}

/* search form */
.searchform {
	background-color: transparent;
	border: none;	
	margin: 0; padding: 5px 0 15px 0;	
	width: 190px;	
}
.searchform p { margin: 0; padding: 0; }
.searchform input.textbox { 
	width: 120px;
	color: #777; 
	height: 18px;
	padding: 2px;	
	border: 1px solid #E5E5E5;
	vertical-align: top;
}
.searchform input.button { 
	width: 60px;
	height: 24px;
	padding: 2px 5px;
	vertical-align: top;
}

/********************************************
   LAYOUT
********************************************/ 
#header {
	width: 100%;
	height: 175px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	background: #33669a;	
}
#header_content {
	width: 1050px;
	margin: 0 auto;
	background: transparent;
}
#logo {float: left; margin: 20px 0 0 0; background: url(images/BUNC_Logo.png) no-repeat 0 0; background-size: 100%; height: 100px; width: 615px;}


/* Main Navigation */
#navigation {
	background: transparent;
	margin: 0;
	color: #fff;
}
#navigation a {
	color: #fff;
	text-decoration: none;
}
#navigation a:hover {
	color: #a5aed7;
	text-decoration: none;
}
#navigation_mobile {
	display: none;
}
.mobileonly {
	display: none;
}
#menu {clear: both; margin: -5px 25px; height: 50px; width: 530px; font-size: .5em; font-weight: 700; float: right;}
#menu ul {margin: 0 auto; padding: 0; font-size: 2em;}
#menu li {display: block; float: left; color: #fff; line-height: 30px; height: 50px; margin: 0px 0 0 0; padding: 0px 0 0 0; position: relative; width: 265px; text-align: center; font-family: 'Titillium Web', sans-serif; font-size: 1.5rem; background-color: transparent;}
#menu li a {display: block; height: 25px/*50px*/; padding: 10px 0 0 0; /*color: #fff;*/ font-weight: 700;}
#menu .current-menu-item a, #menu .current_page_item a, #menu a:hover {color: #BDD6F0; background: #294e72;	text-decoration: none;}

#menu ul ul { /* this targets all sub menus */
	display: none; /* hide all sub menus */
	position: absolute;
	top: 50px; /* this should be the same height as the top level menu -- height + padding + borders */
	right: 0px;
	z-index: 999;
	background: #294e72;
	height: 330px;
	width: 795px;
}
#menu ul li:hover {background: #294e72;}
#menu ul li:hover > ul {
	display: block; /* show sub menus when hovering over a parent */ border-radius: 20px 0 20px 20px;
}
#menu ul ul li { /* this targets all submenu items */
	text-align: center;
	float: none; /* overwriting our float up above */
	width: 255px; /* set to the width you want your sub menus to be. This needs to match the value we set below */
	margin: 0;
}
#menu ul ul li a { /* target all sub menu item links */
	padding: 10px 10px 0 10px; /* give our sub menu links a nice button feel */
	height: 40px;
	width: 235px;
	font-weight: 400;
}
#menu_3col {float: left; width: 225px; font-size: 1rem; color: #fff; text-align: left; padding: 10px 20px;}
#menu_3col a {color: #BDD6F0; font-weight: 600;}
#menu_3col a:hover {color: #fff;}
#menu_3col h1 {font-size: 1.5rem; font-weight: 700; margin: 0; color: #fff;}
#menu_3col h1 a {margin: 0; color: #fff; padding: 0px; font-weight: 700;}


#header_divider {
	border-bottom: 4px solid #183460;
	background: url(images/DividerBar_Bkgrnd.jpg) center 129px;
	height: 55px;
	padding: 128px 0 0 0;
}
#header_divider_scrolled {
	display: none;
}




/* Homepage */
#home_container {position: relative;}
#home_headerextender {height: 25px; background: #33669a;}
#home_image {height: 500px; width: 1050px; background: transparent url(images/homeimages/rotate.php) no-repeat 0% 0; margin: -25px auto; background-size: 100%; border-radius: 25px; position: relative; z-index: 10;}
#home_feature_white {width: 100%; height: 100%; background: #fff; margin: 40px auto; padding: 30px 0 30px 0;}
#home_feature_blue_inset {width: 100%; height: 100%; background: #eef5fb; margin: -25px auto; padding: 10px 0 30px 0;}
#home_feature_blue {width: 100%; height: 100%; background: #eef5fb; margin: 40px auto; padding: 30px 0 30px 0;}
#home_feature_container {width: 1050px; margin: 0 auto; text-align: left;}
#home_feature_container h1 a {color: #33669b; text-decoration: none;}
#home_feature_container h1 a:hover {color: #33669b; text-decoration: none;}
#home_feature_container h2 a {color: #33669b; text-decoration: none;}
#home_feature_container h2 a:hover {color: #33669b; text-decoration: none;}
#home_feature_container p {color: #333333;}
#home_feature_container a {color: #33669b; font-weight: 600; text-decoration: none;}
#home_feature_container a:hover {text-decoration: underline;}
#home_feature_content {width: 46%; margin: 0 auto; padding: 10px 20px 10px 20px; text-align: left; float: left;}
#home_2col {width: 46%; margin: 0 auto; padding: 10px 20px 10px 20px; text-align: center; float: left;}
#home_3col {float: left; width: 33%; text-align: center;}
#home_4col {float: left; width: 25%; text-align: center;}
#home_4col h2 {padding: 0;}
#home_4col img {margin: 0;}
#home_4col p {color: #194396; line-height: 1.25em;}
#home_4col a:hover {text-decoration:none;}


.mc4wp-response {
	margin: 5px 0 0 0;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	color: #0c8fc6;
}
.newsletter_form input {
	border: 1px solid #666;
	font-family: 'Roboto', sans-serif;
	font-size: 1rem;
	font-weight: 300;
	font-style: italic;
}
	

/* Main Column */
#wrap {
	width: 1050px;
	background: #fff;
	margin: 0 auto;
	text-align: left;
	padding: 0px 0 30px 0;
	position: relative;
}
#content-container {margin: 20px 0 0 0;}
#pageoptions {font-weight: 700; font-style: italic; margin: -10px 0 30px 0;}
#main {
	display: inline;
	background: #fff;
	width: 750px;
	margin: -10px 0 0 0;
	padding: 0 20px 0 0; 
	float: right;
	/*margin: 0 0 10px 0;*/

}
#list_main {
	display: inline;
	background: #fff;
	width: 1050px;
	margin: 10px 0 0 0;
	padding: 0 20px 0 0; 
	float: right;
	font-family: 'Roboto', sans-serif;
	font-size: 1.15rem;
	font-weight: 300;
	color: #666;
	/*margin: 0 0 10px 0;*/
	line-height: 1.85rem;
}
#main_register {
	display: inline;
	background: #fff;
	width: 100%;
	margin: 10px 0 0 0;
	padding: 0 20px 0 0; 
	float: right;
	font-family: 'Roboto', sans-serif;
	font-size: 1.15rem;
	font-weight: 300;
	color: #666;
	/*margin: 0 0 10px 0;*/
	line-height: 1.85rem;
}

#main h1 {
	font-family: 'Roboto', arial, sans-serif;
	font-weight: 400;
	font-size: 2.75rem;
	color: #4159a8;
	margin: 10px 0 10px 0;
	line-height: 2.5rem;	
}
#main h2 {
	font-family: 'Roboto', arial, sans-serif;
	font-weight: 400;
	font-size: 1.85rem;
	margin-top: 10px;
	color: #4159a8; 
	padding: 5px 0 0px 0px;
	line-height: 2.25rem;
}
#main h2 a {
	background: none;
	color: #4159a8;
	text-decoration: none;
}
#main h2 a:hover {
	background: none;
	color: #4159a8;
	text-decoration: underline;
}
#main h3 {
	font-family: 'Roboto', arial, sans-serif;
	font-weight: 700;
	font-size: 1.35rem;
	margin: 1rem 0 0 0;
	color: #4159a8; 
	padding: 5px 0 0px 0px;
}
#main h5 {
	color: #4159a8;
	padding: 0px;
	margin: -10px 0 10px 0px;
	font-style: italic;
	font-size: 1rem;
}
#main p {
	margin: 0 0 10px 0;
	color: #555;
}
#main a, {
	text-decoration: none;
	color: #33669b;
	font-weight: 500;
	background: inherit;
}
#main a:hover {
	background: inherit;
	text-decoration: underline;
}

#main ul, ol {
	margin: 1em 0 1em 0;
	padding: 0 20px;
	font-size: 1.25rem;
	color: #333;
}
#main ul {
	list-style: disc;
}
#main li {
	padding: 0 0 1em 0;
}
#main ul li {
	padding: 0 0 0 1em;
	line-height: 1.75rem;
	/*text-indent: -.7em;*/
}
#main ol li ol li ol {
	padding: 0 0 0 20px;
}
#outline_bold ul, ol {
	padding: 0 40px;
}

#main_landingtitle {
	height: 115px;
	width: 100%;
	background: #4897b8;
	padding: 5px;
	margin: -10px 0 20px 0;
}
#main_landingtitle h1 {
	color: #87cfed;
	font-size: 5rem;
	font-weight: 600;
	line-height: 11rem;
}
.alignleft {float: left; margin: 0 1rem 0 0;}
.alignright {float: right; margin: 0 0 0 1rem;}

.entry-summary {
	margin: 0 0 1rem 0;
}

.wp-caption {
	text-align: center;
	padding-top: 4px;
	/*margin: 10px;*/
}
.wp-caption-text {
	font-size: .85rem;
	padding: .25rem 0 0 0;
	line-height: 1rem;
	font-style: italic;
}
.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}

.wp-caption-dd {
	font-size: 11px;
	line-height: 17px;
	padding: 0 4px 5px;
	margin: 0;
}
#emailsignup_col1 {float: left; margin: 0 20px 15px 0; width: 35%;}
#emailsignup_col2 {float: left; margin: 0 0 15px 0; width: 35%;}


/* Footer */	
#footer {
	color: #b5cde5;
	background: #33669a;
	clear: both;
	width: 100%;
	font-family: 'Titillium Web', sans-serif;
	text-align: center;	
	font-size: 1rem;
	margin: 40px 0 0 0;
	padding: 20px 0 0 0;
	line-height: 140%;
	position: relative;
}
#footer a { 
	color: #dde3ef;
	text-decoration: none;
	font-size: 100%;
}
#footer a:hover {text-decoration:none; color: #fff;}
#footer_content {width: 1050px;	margin: 0 auto;	text-align: center;}
#footer_content img {vertical-align: middle;}
.footer_sponsoredby {font-size: 1.35rem; color: #b5cde5; margin: 0;}
#hsrclogo {width: 240px;}
#ghsplogo {width: 180px;}
#sklogo {width: 90px;}

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }
.aligncenter {	display: block;	margin-left: auto;	margin-right: auto;}


/* display and additional classes */
.clear { clear: both;
}
.row {
	margin: 0 0 10px 0;
	font-size: 1em;
	line-height: 1.5em;
}
#formlabel {
	width: 130px;
	float: left;
	margin: 0 10px 0 0;
}
.cap {
	background: #fff;
	width: 130px;
	margin: 0 5px 0 0;
	vertical-align: top;
}
.cap img {
	margin: 0px;
}






/********************************************
   RESPONSIVE
********************************************/ 
@-ms-viewport {width: device-width;}
@viewport {width: device-width;}



/*** Mobile Large 1050px ***/
@media screen and (max-width: 1050px) {
.nomobile {display: none;}
.mobileonly {display: block;}
#header {height: 180px;}
#header_content {width: 95%; height: 180px;	margin: 0 2rem;}
#navigation {margin:.75rem 0 0 0; width: 100%;}
#menu {width: 70%;}
#menu li {width: 265px; float: right;}
#home_container {margin: 0px 0 0 0; padding: 0px;}
#home_image {height: 350px; width: 95%; margin: 20px auto;}
#home_feature_container {width: 100%; padding: 0px;}
#home_feature_blue_inset {width: 92%; height: 100%; background: #eef5fb; margin: 0px auto; padding: 30px;}
#home_feature_blue { width: 93%; padding: 30px; margin: 0px;}
#home_feature_white {width: 93%; margin: 0 auto; padding: 30px; }
#wrap {width: 960px; top: 180px;}
#main {width: 670px; margin:-25px 0 0 0;}
.menu_wrap {margin: 0 20px 0 0;}
#footer_content {width: 100%;}
}

/*** Mobile Large 800px ***/
@media screen and (max-width: 800px) {
#content-container {margin: 20px 0 0 10px;}
#emailsignup_col1 {float: none; margin: 0 20px 15px 0; width: 100%;}
#emailsignup_col2 {float: none; margin: 0 0 15px 0; width: 100%;}

}	
	
/*** Mobile Large 500px ***/
@media screen and (max-width: 500px) {

#header {height: 100px; width: 100%;}
#header_content {
	width: 100%;
	height: 100%;
	margin: 0;
}
#logo {width: 85%;float: left;background-size: contain;margin: 5px 0 0 10px;}

	
#navigation {
	display: none;
}
#navigation_mobile {
	display: block;
	float: left;
	margin: 55px 0 0 0;
	position: relative;
	z-index: 99;
}
#navigation_mobile img {
	margin: .5rem .5rem 0 0;
}

#navigation_mobile hr {
	color: #4159a8;
}
#navigation_mobile ul {
	display: block;
	height: 35px;
	width: 35px;
	list-style: outside none none;
	background-image: url(https://www.buckleupnc.org/wp-content/themes/BuckleUpNC_Custom_2.0/images/mobile_hamburger.png);
	background-size: contain;
	margin: 0;
	padding: 0;
	clear: both;
}
#navigation_mobile li {display: none;}
#navigation_mobile ul:hover > li {display: block; background: #294e72; width: 350px; position: relative; float: right; margin: 30px 0 0 0; border-radius: 20px 0 20px 20px;}
#navigation_mobile ul li {color: #fff; text-align: center; font-weight: 600;}
#navigation_mobile ul li a {text-decoration: none;}
#mobile_1col {float: left; width: 310px; font-size: 1rem; color: #fff; text-align: left; padding: 0px 20px 10px 20px;}
#mobile_1col a {color: #BDD6F0; font-weight: 600;}
#mobile_1col a:hover {color: #fff;}
#mobile_1col h1 {font-size: 1.75rem; font-weight: 700; margin: 10px 0 5px 0; color: #fff; text-align: center; height: 45px; border-bottom: 1px solid}
#mobile_1col h2 {font-size: 1.5rem; font-weight: 700; margin: 10px 0 0 0; color: #fff; padding: 0 0 0px 0;}
#mobile_1col h2 a {color: #fff; padding: 0px; font-weight: 700;}
#mobile_1col p {height: 25px; margin: 0 0 5px 0; font-family: 'Titillium Web', sans-serif;}

	
#home_image {
	height: 150px;
	padding: 90px 0 0 0;
	background: #BDD6F0 url(images/homeimages/rotate.php) no-repeat 50% 60%;
	background-size: 150%;
}
#home_feature_blue_inset {width: 85%;}
#home_feature_blue {width: 85%;}
#home_feature_white {width: 85%;}
	.home_2col {width: 90%}
	#home_3col {width: 100%; margin: 0 0 20px 0;}
	#home_feature_container h1 {line-height: 1em; margin: 0 0 10px 0;}
	#home_4col {width: 50%; float: none; margin: 0 auto;}
.menu_wrap {
	width: 100%;
	display: none;
	z-index: 1;
	margin: 0;
	padding: 0 0 1rem 0;
}
#wrap {
	width: 95%;
	padding: 10px;
	position: relative;
	top: 0px;
}
	#content-container h1 {line-height: 2.5rem;}
#main {
	width: 100%;
	padding: 0;
	margin: .5rem;
	float: none;
	position: relative;
	top: 10px;
}
#main p {
	padding: 5px 10px 5px 10px;
	margin: 20px auto 20px auto;
	text-align: left;
	font-family: 'Roboto', sans-serif;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.5rem;
	color: #555555;
}
#main h1 {
	font-size: 2rem;
	line-height: 1.85rem;
	padding: 0 0 0rem .5rem;
}
#main h2 {
	padding: 0 5px 0 5px;
}
#main h3 {
	padding: 0 0 0rem .5rem;
}
#main h4 {
	padding: 0 5px 0 5px;
}
img {margin: 10px; width: 100%;}
.alignleft {float: none; margin: 0 0rem 0 0;}
.alignright {float: none; margin: 0 0 0 0rem;}

#footer {height: 100%;padding: 0 0 1rem 0;}
#footer_content {width: 100%;text-align: center; margin: 10px 0 0 0; padding: 20px 0 0 0;}
#hsrclogo {width: 80%; margin: 20px 0 0 0;}
#ghsplogo {width: 60%;}
#sklogo {width: 30%;}
}

/*** Mobile Small 420px ***/
@media screen and (max-width: 420px) {

.nomobile {display: none;}
}