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



@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaina|Open+Sans|Roboto|Suez+One');



body  {
	
	background: #A9A9A9;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
p {
	color: #000;
	text-align: left;
	font-size: 14px;
	font-family: 'Roboto', sans-serif;
	line-height: 20px;
}
p a {
	color: #f8941d;
	font-weight: bold;
}
p a:hover {
	color: #c55f15;
	font-weight: bold;
}
hr {
	font-weight: lighter;
	color: #c90;
	font-size: 9px;
}
table {
	border: none;
}
table tr td {
	vertical-align: top;
}
h1 {
	font-family: 'Suez One', Arial, sans-serif;
	font-size: 28px;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	color: #f8941d;
    font-weight: normal;
	line-height: 28px;
}
h2 {
	font-family: Arial, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	color: #fbca8e;
	font-weight: bold;
	line-height: 12px;
}
h3 {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	text-transform: uppercase;
	color: #f8941d;
}
h4 {
	font-family: 'Suez One', Arial, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	color: #ffffff;
    font-weight: normal;
	line-height: 28px;
	text-align:center;
}
h5 {
	font-family: 'Suez One', Arial, sans-serif;
	font-size: 20px;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	color: #f8941d;
    font-weight: normal;
	line-height: 12px;
}
ul,ol {
	color: #000;
	text-align: left;
	font-size: 14px;
	font-family: 'Roboto', sans-serif;
	line-height: 20px;
}
#container  {
	width: 1200px;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 2px solid #000000;
	background-color: #FFF;
} 
#header  {
	width: 1200px;
} 
#menuContainer   {
	padding: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#banner  {
	margin: 0px;
	padding-top: 0;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 0px;
	height: 300px;
} 
#bannerText  {
	font-family: "Trebuchet MS", Arial, sans-serif;
	font-size: 30px;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	color: #ffffff;
	font-weight: bold;
	line-height: 21px;
}
#logo  {
  position: absolute;
  margin-left: 25px;
  margin-top: 10px;
  width: 115px;
  height: 115px;
  z-index: auto;
  border: 2px solid;
  border-color: #fbca8e;
}
#container #header #menuContainer   {
	height: 45px;
	width: 1000px;
	margin-left: 190px;
}
#container #header #menuContainer table {
	width: 1000px;
	border-spacing: 2px;
	margin-top: 0px;
	text-transform: uppercase;
	color: #039;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 20px;
	white-space: nowrap;
        font-weight: bold;
	
}
#container #header #menuContainer table tr td {
	padding-right: 5px;
	padding-left: 5px;
	vertical-align: middle;
}
#container #header #menuContainer table tr td a {
    padding-right: 5px;
	padding-left: 5px;
	color: #003;
	text-decoration: none;
}
#container #header #menuContainer table tr td a:hover {
	font-weight: bold;
	color: #666;
}
#mainContentHome {
	padding-top: 0px;
	min-height: 500px;
	text-align: left;
  background-color: white;
}
#mainContentHome p {
	padding-left: 20px;
	padding-right: 20px;
}
#mainContentVol {
	padding-top: 0px;
	min-height: 500px;
	text-align: left;
	background-color: #fbca8e;
	text-align: center;
}
#mainContentVol a {
 color: #fff;
} 
#mainContentVol a:hover {
 color: #666;
} 
#mainContentVolbox {
    background-color: #fff;
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}
#mainContentVolbox p {
    padding-left: 6px;
    padding-right: 0px;
}
#mainContentLearntop {
	padding-top: 0px;
	min-height: 150px;
	text-align: center;
}
#mainContentLearn {
	padding-top: 0px;
	min-height: 350px;
	background-color: #fbca8e;
	text-align: center;
}
#mainContentLearn a {
	font-family: 'Suez One', Arial, sans-serif;
	color: #666;
}
#mainContentLearn a:hover {
	font-family: 'Suez One', Arial, sans-serif;
	color: #fff;
}
#block1 {
	background-color: #f8941d;
	height: 440px;
	width: 285px;
	display: inline-block;
	margin-top: 30px;
	margin-bottom: 30px;
	margin-left: 60px;
	margin-right: 50px;
	vertical-align: top;
	text-align: center;
}
#block1 h1 {
    color: #ffffff;
    font-family: Arial, sans-serif;
}
#block1 h1:hover {
    color: #666;
}
#block1 p {
    text-align:center;
}
#block1 p a {
	font-family: Arial, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	color: #fff;
	font-weight: bold;
	line-height: 16px;
}
#block1 p a:hover {
    color: #666;
}
#blockmain{
	width: 860px;
	min-height: 500px;
	display: inline-block;
	vertical-align: top;
	padding-left: 10px;
	padding-right: 14px;
}
#blockside{
	width: 288px;
	min-height: 500px;
	display: inline-block;
	vertical-align: top;
	padding-left: 5px;
	padding-right: 5px;
	background-color: #fbca8e;
	margin-right: 0px;
	margin-left: 13px;
}
#blockside p{
	color: #c55f15;
	text-align: left;
	font-size: 14px;
	font-family: 'Roboto', sans-serif;
	font-weight: bold;
	line-height: 24px;
}
#blockside p a {
	line-height: 20px;
}
#footer  {
	background-color: #D3D3D3;
	height: 40px;
	padding-top: 6px;
	padding-bottom: 0;
	padding-left: 5px;
	padding-right: 5px;
} 
#container #footer #menuContainer table {
	width: 900px;
	margin-left: 200px;
	border-spacing: 2px;
	margin-top: 0px;
	text-transform: uppercase;
	color: #003;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 15px;
	white-space: nowrap;
	text-align: left;
}
#container #footer #menuContainer table tr td a {
	color: #003;
	text-decoration: none;
	padding-right: 3px;
	padding-left: 10px;
}
#container #footer #menuContainer table tr td a:hover {
	font-weight: bold;
	color: #666;
}
.outer {
    display: table;
}
.row {
    display: table-row;
}
.inner1 {
    display: table-cell;
    width: 300px;
    height: 500px;
    background-color: #FFA500;
}
.inner2 {
    display: table-cell;
    width: 300px;
    height:500px;
}
.inner3 {
    display: table-cell;
    width: 300px;
    height: 350p
}

/* Dropdown Button */
.dropbtn {
    background-color: inherit;
    color: inherit;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 160px;
    z-index: 1;
    text-align: left;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

.topnav {
    display: none;
}

.small-text {
    display: none;
}

.small-text-subheading {
    display: none;
}

.large-img {
    display: block;
}

.meetupLink {
    font-size: 20px;
}

.meetupLink:hover {
    color: red;
    cursor: pointer;
}

.paypalButton {
    color: #000;
    text-align: left;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
    line-height: 20px;
    padding-left: 20px;
}

@media only screen and (max-width: 450px) {
    html, body, #body {
        width: 100%;
    }
    #mainContentHome {
        background-color: white;
        width: 100%;
    }
    #container {
        width: 100%;
        border: none;
    }
    #block1 {
        margin-left: 0px;
        margin-right: 0px;
        width: 100%;
    }
    .small-text {
        font-size: 28px;
        align-self: center;
        color: #ffffff;
        width: inherit;
        display: block;
    }
    .small-text-subheading {
        font-size: 28px;
        align-self: center;
        color: #ffffff;
        width: inherit;
        display: block;
    }

    .large-img {
        display: none;
    }

    /* keep padding around text in mobile */
    #blockmain h1, #blockmain h2, #blockmain h3,
    #blockmain h4, #blockmain h5, #blockmain h6 {
        padding-left: 5%;
    }
    #blockside h1, #blockside h2, #blockside h3,
    #blockside h4, #blockside h5, #blockside h6 {
        padding-left: 5%;
    }
    #blockside h4 {
        padding-right: 5%;
    }

    #blockmain li {
        padding-right: 5%;
    }

    /* Hide tables in mobile, convert to menu */
    table {
        display: none;
    }
    /* allow paypal button table */
    .paypalButton table {
        display: block;
    }
    #header {
        width: 100%;
    }
    #container #header #menuContainer {
        display: none;
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }
    #banner {
        width: 100%;
        height: 150px;
        display: flex;
        background-color: #f8941d;
    }
    #banner img {
        width: 100%;
        height: 100%;
    }
    #logo {
        display: none;
    }

    /* styling for about.php */
    #blockmain {
        width: inherit;
        padding-right: 0px;
        padding-left: 0px;
    }

    .multiLineHeader {
        line-height: 1.1em;
    }

    #blockside {
        width: inherit;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
        min-height: 300px;
    }

    #blockside.aboutBlockSide {
        min-height: 800px;
    }

    /* styling for donate.php */
    .volunteerBlock {
        display: table-row;
        height: 350px;
    }

    /* Add a black background color to the top navigation */
    /* styling for the top navigation bar */
    .topnav {
        display: block;
        background-color: #FFF;
        overflow: hidden;
    }

    /* Style the links inside the navigation bar */
    .topnav a {
        float: left;
        display: block;
        color: #003;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
        font-family: Arial, sans-serif;
    }

    /* Change the color of links on hover */
    .topnav a:hover {
        background-color: #ddd;
        color: black;
    }

    /* Add an active class to highlight the current page */
    .topnav .active {
        border-right: .1px solid #f8941d;
        background-color: white;
        color: #f8941d;
    }
    .topnav.responsive .active {
        background-color: #f8941d;
        color: white;
    }

    /* Hide the link that should open and close the topnav on small screens */
    .topnav .icon {
        display: none;
    }/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
    @media screen and (max-width: 600px) {
        .topnav a:not(:first-child) {display: none;}
        .topnav a.icon {
            float: right;
            display: block;
        }
    }

    /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
    @media screen and (max-width: 600px) {
        .topnav.responsive {position: relative;}
        .topnav.responsive a.icon {
            background-color: #f8941d;
            position: absolute;
            right: 0;
            top: 0;
        }
        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
        }
    }
}