/* GLOBAL Setting
-------------------------------------------------- */
html{
	height: 100%;
}

body {
	width: 100%;
    height: 100%;
    overflow-x: hidden;
}

h3 {
	text-transform: uppercase;
}

a,
a:hover {
	text-decoration: none;
}

main {
	padding-bottom: 3.5rem;
}

.page-divider {
  margin: 3.5rem 0; /* Space out the Bootstrap <hr> more */
}

/*========= navbar =============================================================*/
nav {
    -webkit-transition: background-color 500ms linear;
    -moz-transition: background-color 500ms linear;
    -o-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
}

.nav-item>a {
	color: #ffffff;
	letter-spacing: 0.05em;
}

.nav-item>a:hover,
#brandname:hover {
	color: rgb(253, 27, 27);
}

.custom-toggler {
	padding: 10px;
	border-color: rgb(255, 255, 255);
}

/*
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255, 255, 255' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
*/

.navbar-toggler i {
	color: #fff;
}

.nav-logo {
	width: 80px;
    padding: 5px;
    margin: 0;
}

nav.scrolled,
nav.clicked {
    background-color: rgba(10, 25, 29, 0.9);
}

.navbar {
	padding-right: 30px;
	padding-left: 30px;
	font-family: 'Open Sans', sans-serif;
}

.nav-item {
	padding: 10px 10px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 20px;
}

.navbar-brand {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.2em;
	color: #fff;
}

.nav-donate {
	color: rgb(47, 47, 47) !important;
	background-color: #fff500 !important;
	border-radius: 20px;
	padding: 10px;
}

.nav-donate:hover {
	color: rgb(255, 255, 255) !important;
	background-color: #d40101 !important;
}

@media (max-width: 480px) {
	
	.navbar-brand {
		font-size: 0.8em;
	}
	
	.navbar-nav>li {
		padding: 0px;
		font-size: 12px;
	}
	
	.nav-logo {
	width: 50px;
	}
}

@media (max-width: 737px) {
	.navbar-nav>li {
		padding: 0px;
		font-size: 15px;
	}
	
	.navbar.navbar-expand-xl.fixed-top {
		padding: 2px 5px 5px 5px !important; 
	}
	
	#brandname {
		padding: 0px 5px 5px 5px !important; 
	}
	
	.nav-donate {
		padding: 5px 10px;
	}
	
	.navbar-collapse {
		padding-left: 10px;
		padding-right: 10px;
	}
	
}

/*========= content =======================================================================*/
.content-body {
	padding-top: 50px;
}

.content-heading {
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.05rem;
}

.content-heading-2 {
	color:  rgb(23, 74, 190);
}

.content-body .col-md-4 {
	margin-bottom: 1.5rem;
	text-align: center;
}

.content-body h2 {
	font-weight: 400;
}

.content-body .col-md-4 p {
	margin-right: .75rem;
	margin-left: .75rem;
}

.content-img {
	padding: 20px 0;
}

@media (min-width: 70em) {
	.content-heading, .content-heading-2  {
		font-size: 50px;
	}
}

@media (min-width: 62em) {
	.content-heading {
		margin-top: 5rem;
	}
}

/*========= header page =============================================================*/
#header {
	display: table;
    width: 100%;
    height: 600px;
    padding: 100px 0;
    text-align: center;
    color: #fff;
    background: url(../img/foundation-slide1.jpg) top center no-repeat;
    background-color: #393939;
	background-size: cover;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

#header-body {
	display: table-cell;
	vertical-align: middle;
}

#header-body h1{
	text-shadow: 4px 4px 8px #0f0f0f;
	text-transform: uppercase;
}

/*========= team page =============================================================*/
#tmheader {
	display: table;
    width: 100%;
    height: 600px;
    padding: 100px 0;
    text-align: center;
    color: #fff;
    background: url(../img/team.jpg) center center no-repeat;
    background-color: #393939;
	background-size: cover;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

#tmheader-body {
	display: table-cell;
	vertical-align: middle;
}

#tmheader-body h1{
	text-shadow: 4px 4px 8px #0f0f0f;
	text-transform: uppercase;
	font-size: 50px;
}

.tmlist-2 {
	padding-top: 50px;
}

.team-id img,
.modal-name img {
	max-width: 300px;
	max-height: 300px;
	padding: 10px;
}

.team-id {
	padding: 30px;
	border-style: none;
	border-color: rgba(255, 255, 255, 0);
}

.team-name,
.modal-name>h4 {
	font-weight: 700;
	text-transform: uppercase;
}

.team-id:hover {
	border-style: none;
	border-width: 1px;
	border-radius: 10px;
	box-shadow: 5px 10px 10px grey;
	border-color: grey;
	cursor: pointer;
}

.team-id>h2 {
	color: black;
}

@media only screen and (max-width: 1366px) {
	.team-id {
		border-style: none;
		border-width: 1px;
		border-radius: 10px;
		box-shadow: 5px 10px 10px #a8a7a7;
		border-color: #9d9d9d;
		cursor: pointer;
	}
	
	.team-id .team-name {
		font-size: 20px;
		font-weight: 700;
	}
	.team-id .text-muted {
		font-size: 15px !important;
	}
}

@media only screen and (max-device-width: 1980px) {
	.tmlist-1 {
		padding-bottom: 0;
	}
	.tmlist-2 {
		padding-top: 0;
	}
}

@media only screen and (min-width: 768px) {
	.modal-lg {
		max-width: 90%;
	}
}

.modal-body {
	padding: 10px 30px;
}

.modal-name {
	margin-top: auto !important;
	margin-bottom: auto !important ;
}

.modal-name>h4 {
	padding-top: 10px;
}

.modal-header {
	border: none;
	padding-bottom: 0px;
	padding-top: 5px;
}

.team-qt {
	padding-top: 20px;
	color: grey;
	font-style: italic !important;
}

/*========= who page ===============================================================*/
#who {
	display: table;
    width: 100%;
    height: 600px;
    padding: 100px 0;
    text-align: center;
    color: #fff;
    background: url(../img/giving.jpg) center center no-repeat;
    background-color: #393939;
	background-size: cover;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

#who-body {
	display: table-cell;
	vertical-align: middle;
}

#who-body h1{
	text-shadow: 4px 4px 8px #0f0f0f;
	text-transform: uppercase;
}

.who-cont h2 {
	margin-top: 40px;
}

.who-cont p {
	margin-right: 60px;
	margin-left: 60px;
	margin-top: 20px;
}

@media only screen and (max-width: 768px) {
	.who-cont p {
		margin-right: 20px;
		margin-left: 20px;
		margin-top: 20px;
	}
}

/*========= how page ===============================================================*/
#how {
	display: table;
    width: 100%;
    height: 600px;
    padding: 100px 0;
    text-align: center;
    color: #fff;
    background: url(../img/giving-1.jpg) center center no-repeat;
    background-color: #393939;
	background-size: cover;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

#how-body {
	display: table-cell;
	vertical-align: middle;
}

#how-body h1{
	text-shadow: 4px 4px 8px #0f0f0f;
	text-transform: uppercase;
}

/*========= contact page ===============================================================*/
#ctheader {
	display: table;
    width: 100%;
    height: 600px;
    padding: 100px 0;
    text-align: center;
    color: #fff;
    background: url(../img/sharing.jpg) center center no-repeat;
    background-color: #393939;
	background-size: cover;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

#ctheader-body {
	display: table-cell;
	vertical-align: middle;
}

#ctheader-body h1{
	text-shadow: 4px 4px 8px #0f0f0f;
	text-transform: uppercase;
}

.ctform {
	padding-bottom: 50px;
}

#ctform>h3 {
	text-transform: uppercase;
}

.ctlist {
	padding-top: 50px;
	padding-bottom: 50px;
}

.social-icons-group {
	padding-top: 50px !important;
}

.social-icon {
	padding-left: 15px;
	color: #464646;
}

.fb-icon:hover {
	color: rgb(59, 89, 152);
}

.tw-icon:hover {
	color: rgb(85, 172, 238);
}

.gg-icon:hover {
	color: rgb(211, 72, 54);
}

.ct-email>a {
	color: #3b3b3b !important;
	text-decoration: underline;
}

.ct-email>a:hover {
	color: #9f0000 !important;
}

.recaptcha-wrapper > div > div{
 margin 10px auto !important;
 text-align: center;
 width: auto !important;
 height: auto !important;
}

/*========= footer ========================================================================*/
.footer {
	padding: 20px 0 5px 0;
	color: #dedede;
	background-color: rgba(10, 25, 29, 0.9);
}

.jmc-link {
	color: grey !important;
}

.jmc-link:hover {
	color: #ffffff !important;
}

.footer-nav {
	margin: 5px;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 10px;
	text-transform: uppercase;
	color: #fff !important;
	font-size: 18px;
}

.footer-nav:hover {
	color: #9f0000 !important;
}

@media only screen and (max-width: 768px) {
	.footer-nav {
		display: none !important;
	}
}

/*========= 404 page ========================================================================*/
.pg-404 {
	padding-top: 50px !important;
}

.pg-404 i {
	font-size: 3rem;
}

.pg-404-title {
	font-size: 5rem;
	color: #03b903;
}

.pg-404 h3 {
	line-height: 5rem;
}