html {
height: 100%;           /* the footer needs this */
box-sizing: border-box; /* the footer needs this */
}



body {

/* BEGIN: attributes required for the nice footer: */
position: relative; 
margin: 0;
min-height: 100%;
/* END: attributes required for the nice footer: */

padding-top: 120px; /* this value is changed when resize events cause the navbar to grow/shrink in height. Setting padding-top of 'body' to the total navbar height(including its padding-bottom) prevents navbar from covering top of [120 = height of logo in navbar (110) + logo's padding-bottom (10)] (if one removes this padding-top and it doesn't look like that overlap is happening, then it is because the padding-top of the main_container happens to be > (height navbar + logo's padding-bottom)] */

font-size: 16px; 
font-family: "Open Sans",serif;
background: transparent;
}



h1 {
font-family: "Abel", Arial, sans-serif;
font-weight: 400;
font-size: 50px;
margin-top:0px;
margin-bottom:0px;
text-align: left;
}

h2 {
font-family: "Abel", Arial, sans-serif;
font-weight: 400;
font-size: 35px;
margin-bottom: 35px;
}

h3 {
font-family: "Abel", Arial, sans-serif;
font-weight: 400;
font-size: 30px;
margin-bottom: 30px;
}

p {
text-align: justify;
/* margin-bottom: 30px; */
}

/* setting the color of bullet points to our green [https://stackoverflow.com/a/32722252/3987563] 
(for some reason I wasn't able to define our green here using a HTML code, had to define it in RGB) */
ul {
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" height="10" width="10"><circle x="0" y="0" fill="rgb(65, 178, 59)" cx="50%" cy="50%" r="3"/></svg>');
}

p.bio-blurb
{
text-align:justify;
}


.margin-base-vertical {
margin: 40px 0;
}

#navigation_bar_rhs a {font-family: "Abel"; color: black; font-size: 1.3em; font-weight: normal; text-transform: uppercase;}

#language_selector_1, #language_selector_2 {font-family: "Abel"; color: grey !important; font-size: 1em !important; font-weight: normal; text-transform: none !important; }

#navigation_bar {
background-color: white;
border-color: white;

}

#navigation_bar_rhs li.active > a
{
  text-decoration: underline;
  -webkit-text-decoration-color: #41b23b;
  -moz-text-decoration-color: #41b23b;
  text-decoration-color: #41b23b;
  background-color: white;
}

#main_container {

padding-top: 30px;  /* this value might be reset dynamically to aid in positioning main images on pages. In our layout, main_container padding-top equals the gap bw the bottom edge of the navbar and main content on the page. [NOTE: making sure navbar doesn't *cover* main_container is done by padding-top of 'body'] */

padding-bottom: 50px;  /* prevents page from ending immediatley after the last element */

}

#navigation_bar
{
margin-bottom:0px;
min-height: 0;
}


/* necessary to add a little padding bw logo and left edge of viewport
in the mobile/"collapsed" version */

@media (max-width: 768px) { .navbar-left { padding-left: 15px; } }

#logo_navbar
{

padding-right: 40px; 
}

.navbar-default .navbar-toggle .icon-bar {
background-color:#41b23b;
}

.bio-photo {
height: 180px;
display: block;
margin-left: auto; 
margin-right: auto;
padding-bottom: 20px;
}

.bio-name {
text-transform: uppercase;
color:#41b23b;
}

.our-green {
color:#41b23b;
}


.bio-blurb {
padding-bottom: 30px;
}

.lang_pt, .lang_en  {
display: none;
}

.media-screenshot {
max-height: 200px;
margin-bottom: 50px;
}

a {
color: #41b23b;
}