/* Global */
body { font-family: 'Catamaran', sans-serif; font-size: 15px; color: #222;	margin: 0; }
a {	color: #504e88; text-decoration: none; font-weight: bold; }
p, ul { margin: 0px; }
h2 { grid-column: 1/3; background: #efefef; padding: 2px 15px; border-left: 10px solid #504e88; font-size: 26px; margin: 0px 0px 20px 0px; }
h3 { font-size: 20px; margin: 0px 0px 10px 0px; }
h4 { font-size: 16px; }
form > div > input {  width: 25%; padding: 2px 5px; height: 28px; border: 1px solid #ccc; }
form input { font-family: 'Catamaran', sans-serif; font-size: 15px; }
form textarea { width: calc(100% - 10px); padding: 2px 5px; max-width: 1400px; font-family: 'Catamaran', sans-serif; font-size: 15px; }
form select { width: calc(100% - -2px); height: 34px; border: 1px solid #ccc; padding: 0px 5px; }
form button { width: 200px; }
form button, form .button { background: #504e88; border: 0px; color: #fff; height: 35px; cursor: pointer; border-radius: 5px; }
form .button:hover { opacity: 0.9; }
.grid {	display: grid; grid-template-columns: 1fr repeat(1, minmax(auto, 1200px)) 1fr; grid-gap: 20px; }
section.grid > div { grid-column: 2/3; margin-bottom: 20px; }
.btn { display: inline-block; background: #504e88; color: #fff;	text-decoration: none; padding: 10px 50px; border-radius: 8px; font-size: 14px; }
.card { background: #efefef; } /* Used as container for card with image */
.card-content { padding: 20px; } /* Used inside .card */
.card-content p { margin: 10px 0px 15px 0px; }
.content { background: #efefef; padding: 20px; } /* Used when no image */
.full-height { min-height: calc(100vh - 488px); }
.success { font-weight: bold; padding: 20px 30px; background: #94d494; }
.error { font-weight: bold; padding: 20px 30px; background: #f1c8c8; }

/* Tables */
table tr:first-child td:first-child { border-top-left-radius: 5px; }
table tr:first-child td:last-child { border-top-right-radius: 5px; }
table tr:last-child td:first-child { border-bottom-left-radius: 5px; }
table tr:last-child td:last-child { border-bottom-right-radius: 5px; }
table tr td.head { background: #444; color: #fff; font-weight: 300; }
table tr td { padding: 5px 40px 5px 10px; }
table tr td.first-col { border-right: 1px solid #bbb; }
table tr:nth-child(2n+2) { background-color: #ddd;  border-radius: 5px 5px 0px 0px;}
table tr:nth-child(2n+3) { background-color: #ccc; }

/* Header */
header { align-items: center; padding: 20px 0px 10px 0px; }
header .header { grid-column: 2/3; display: grid; grid-template-columns: 1fr 1fr; }
header .header .logo a { display: block; }
header .social { justify-self: end; align-self: center; }
header .social a { display: inline-block; }
header .social i { font-size: 28px;	margin-top: 5px; color: #000;}
header .mobile-icon { display: none; justify-self: end; align-self: center; margin-right: 20px; }
header .mobile-icon i.fa-bars { font-size: 36px; color: #444; }

/* Navigation */
nav { background-color: #ddd; }
nav .top-nav { grid-column: 2/3; }
nav .top-nav ul { list-style: none;	padding: 0; margin: 0; line-height: 30px; }
nav .top-nav li { display: inline-block; line-height: 50px; }
nav .top-nav li > a { padding: 12px 20px 13px 20px;	transition: 0.3s; }
nav .top-nav li > a:hover { background: #ccc; }
nav .top-nav li.logged-in { float: right; }
nav .top-nav li.logged-in > a { padding: 12px 0px 13px 0px; }
nav .top-nav li.logged-in > a:hover { background: none; text-decoration: underline; }
nav .dropdown {	position: relative;	display: inline-block; }
nav .dropdown-content {	display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4); z-index: 1; border-radius: 0px 0px 8px 8px; }
nav .dropdown-content a { padding: 0px 20px; display: block; }
nav .dropdown-content a:hover {	background-color: #ddd; }
nav .dropdown-content a:hover.last { border-radius: 0px 0px 8px 8px; }
nav .dropdown:hover .dropdown-content {	display: block;}
nav.mobile-menu { display: none; background: #ddd; width: 100%; }
nav.mobile-menu a { display: block; padding: 10px 20px; color: #444;}
nav.mobile-menu a:hover { background: #ccc; }

/* Footer */
footer { background: #222; }
footer #footer { display: grid; grid-template-columns: 1fr auto 1fr; grid-column: 2/3; grid-gap: 40px; padding: 20px; }
footer #footer > div { max-width: 400px; }
footer #footer .footer-linkedin { margin-bottom: 30px; }
footer #footer .linked-in { background: #fff; border-radius: 8px; position: relative; }
footer #footer .linked-in div { padding: 0px 10px 20px 10px; display: flex; flex-direction: column; }
footer #footer .linked-in .tag { margin-bottom: 20px; }
footer #footer .linked-in img { max-width: 100%; border-radius: 8px 8px 0px 0px; }
footer #footer .linked-in .linkedin-bcba-logo { position: absolute; top: 47px; left: 8px; width: 85px; border-radius: 0px; }
footer #footer .linked-in a { margin-left: auto; }
footer #footer .linked-in .linkedin-logo { width: 100px; border-radius: 0px; }
footer #footer .linked-in h3 { color: #222; }
footer h3 { color: #fff; }
footer .footer-contact > div { color: #fff; background: #2f3336; padding: 8px 20px; border-radius: 3px; height: 300px; }
footer .copyright { color: #fff; grid-column: 3; text-align: right; }

/* Page - Showcase */
#page-showcase { grid-column: 1/4; text-align: center; height: 200px; margin-bottom: 20px; background: url('../img/showcase.jpg') no-repeat 0% 50%; background-size: cover; width: 100%; color: #fff; }
#page-showcase h1 {	padding-top: 2.5rem; font-size: 40px; }

/* Homepage - Slider */
.slider-container { background: #3e6070; margin-bottom: 30px; }
#showcase { /* grid-column: 1/4; */ text-align: center; margin-bottom: 0px; background-size: cover; width: 100%; color: #fff; background: #000; }
#showcase h1 { font-size: 50px; margin-top: 0px; margin-bottom: 0.2rem; padding-top: 7rem; }
#showcase p { font-size: 28px; font-weight: bold; padding-bottom: 20px; }
#showcase p a { margin-bottom: 105px; }
#showcase #slider  { display: none; }
#showcase #slider.show { display: inline; }
#showcase .slider1 { background: url('../img/slider/temp-6.jpg') no-repeat 0% 50%; }
#showcase .slider2 { background: url('../img/slider/temp-4.jpg') no-repeat 0% 50%; }
#showcase .slider3 { background: url('../img/slider/temp-5.jpg') no-repeat 0% 50%; }

/* Homepage - About Us */
#home-about { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 20px; }
#home-about h2 { grid-column: 1/5; }
#home-about img { display: block; width: 100%; height: auto; filter: brightness(75%); }

/* Homepage - Sponsors */
#sponsors-bg { background: #3e6070; margin-bottom: 30px; }
#sponsors-home { display: grid; grid-column: 2/3; grid-gap: 20px; padding: 20px; }
#sponsors-home h3 { margin: 0; font-size: 22px; color: #fff; }
#sponsors-home .logos {	display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
#sponsors-home .logos img { width: 100%; }

/* Homepage - Our Story */
#home-story { display: grid; }
#home-story img { width: 400px;	height: auto; float: left; margin-right: 20px; }

/* About Page - Our Story */
#about-story { display: grid; }
#about-story img { width: 400px; height: auto; float: left; margin-right: 20px; }

/* Who we are Page - Who we are */
#who-are-we { display: grid; }
#who-are-we img { width: 400px; height: auto; float: left; margin-right: 20px; }

/* Who we are Page - Meet the Board */
#meet-board { display: block; }
#meet-board .card { display: inline-block; padding: 10px 15px 15px 15px; margin-bottom: 20px; }
#meet-board h3 { grid-column: 1/3; }
#meet-board h3 .fa-linkedin { margin-left: 15px; font-size: 22px; color: #504e88; }
#meet-board img { width: 215px; height: auto; float: left; margin-right: 15px; border: 5px solid #ddd; }
#meet-board .card-content { line-height: 21px; padding: 0px; }

/* Current Sponsors page */
#current-sponsors { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; }
#current-sponsors img { max-width: 300px; border: 4px solid #ddd; }

/* Contact Us Page */
#contact form { display: grid; grid-template-columns: repeat(2, minmax(auto, 300px)); grid-gap: 20px;  }
#contact form > div > input {  width: calc(100% - 10px); }
#contact form .comments { grid-column: 1/3; }
#contact form textarea { width: calc(100% - 10px); }
#contact form select { width: calc(100% - -2px);  }
#contact form .button { width: 100%; }
#contact form .submit { grid-column: 1/2; }

/* Register Page */
#register form { display: grid; grid-template-columns: 200px 250px; margin-bottom: 15px; }
#register form span { margin-bottom: 20px; }
#register form span.label { padding: 5px 0px; }
#register form > span > input { width: calc(100% - 10px); padding: 2px 5px; height: 28px; border: 1px solid #ccc; }
#register form > input.button { grid-column: 1/3 }
#register .messages { font-weight: bold; margin-bottom: 20px; }

/* Admin General */
body#admin { background: #000; }
#admin header { background: #222; padding: 20px; }
#admin header .logo { font-size: 40px; color: #fff; }
#admin footer { display: block; }
#admin footer .copyright { text-align: left; grid-column: 1/3; }
#admin .container { display: grid; grid-template-columns: 200px 1fr; min-height: calc(100vh - 171px); }
#admin .content { padding: 20px 30px 30px 30px; min-height: calc(100vh - 211px); }
#admin .link { margin-bottom: 10px;  }
#admin form div { margin-bottom: 5px; }
#admin .success { font-weight: bold; padding: 20px 30px; background: #90d290; border-bottom: 1px solid #008000; }
#admin .error { font-weight: bold; padding: 20px 30px; background: #fd8282; border-bottom: 1px solid #ff0000;}

/* Admin Nav */
#admin nav { background: #333; padding: 20px 0px; }
#admin nav ul { list-style: none; padding: 0px; border-top: 1px solid #bbb; }
#admin nav ul li { padding: 0px 20px; display: inline-block; }
#admin nav ul a { line-height: 50px; display: block; border-bottom: 1px solid #bbb; }
#admin nav ul a:hover { background: #444;   }
#admin nav a { color: #ddd;}

/* Admin Board */
#admin table td.board img  { width: 100px; margin-top: 10px; border: 4px solid #bbb; }
#admin .edit-board img { width: 40px; border: 2px solid #ccc; }

/* Admin Sponsors */
#admin table td.sponsors img { width: 200px; margin-top: 10px; border: 4px solid #bbb; }
#admin .edit-sponsors img { width: 100px; border: 2px solid #ccc; }

/* Admin Meta Data */
#admin .edit-meta form textarea { max-width: 600px; }

/* Media Queries - Screen size under 1200px */
@media (max-width: 1200px) {
	footer #footer { display: block; }
	#showcase h1 { font-size: 40px; }
	#showcase p { font-size: 24px; }
	#home-about { grid-template-columns: 1fr 1fr; }
	#home-about h2 { grid-column: 1/3; }
	#home-about .card { margin-bottom: 20px; }
	#current-sponsors { grid-template-columns: 1fr 1fr; }
	footer .copyright { grid-column: 1; text-align: left;}
}

@media (max-width: 900px) {
	header .mobile-icon, nav.mobile-menu { display: block; }
	header .social, nav .top-nav { display: none; }
	nav.mobile-menu #menu { display: none; }
	#home-story img { width: 100%; margin-bottom: 20px;}
	#current-sponsors { grid-template-columns: 1fr; } 	
	#contact form { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	header .header .logo img { width: 250px; }
	#showcase h1 { font-size: 30px; padding-top: 6rem; }
	#showcase p { font-size: 16px; }
	#showcase .btn { padding: 8px 40px; }
	#page-showcase { height: 180px; }
	#page-showcase h1 {	font-size: 32px; }	
	#showcase p { font-size: 18px; }
	#home-about { display: block; }
	#home-about h2 { margin-bottom: 20px; }
	#home-about .card { margin-bottom: 20px; }
	#sponsors-home .logos { grid-template-columns: 1fr 1fr 1fr;}
	#who-are-we img, #about-story img { width: 100%; margin-bottom: 20px; }
}