@font-face {
  font-family: "Merriweather";
  src: url(../fonts/Merriweather-Black.ttf), url(../fonts/Merriweather-Light.ttf), url(../fonts/Merriweather-LightItalic.ttf), url(../fonts/Merriweather-Regular.ttf);
}
/* consistent font 
@font-face  {
  font-family: "MerriweatherSans";
  src: url(../fonts/MerriweatherSans-Italic-VariableFont_wght.ttf),url(../fonts/MerriweatherSans-VariableFont_wght.ttf);
}
font */


body h1 h2 h3 h4  {
  font-family: Merriweather-Regular, sans-serif;
}

body h5 h6 {
  font-family: Merriweather-Regular, serif;
}

#landing-page .cover-container {
  font-family: "Merriweather-Regular";
}

article {
  font-family:"Merriweather-Regular";
}


ul {
  list-style: none;
  display: block;
  justify-content: right;
}

figure img {
  width: 100%;
  height: auto;
}

figure {
  margin-bottom: 30px;
}

header nav {
  display: flex;
  justify-content: flex-end;
}

div > h1 {
  font-size: 1.8rem;
}

nav > p {
  cursor: pointer;
}
.pill-black, .pill-white {
  border: 0.5px solid;
  border-radius: 5px;
  text-align: center;
}

.pill-black {
  background-color: #000000;
  color: #FFFFFF;
}

#contact-me-email {
  border: 0.5rem;
}

footer {
  margin-top: 20px;
}

footer div {
  display: flex;
  align-items: center;
}

/* Customizations of Bootstrap classes */

body {
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}
/*   -- is this needed --  probably not*/
#landing-page .cover-container {
  max-width: 100%;
  height: auto;
  background-image: url("../images/boerne-sunrise.jpg");
  background-size: cover;
  justify-content: space-around;
}


.navbar  {
  color: orangered;
  font-weight: bold; 
  position: fixed; /* Set the navbar to fixed position 
  top: 0; /* Position the navbar at the top of the page 
  width: 100%; /* Full width */
}

  
header .row {
  display: flex;
  align-items: center;
}

.navbar a {
  color: slateblue;
  text-decoration: underline;
}


.col-sm-2 {
  margin-right: 20px;
  min-width: 60px;
  padding: 1px;
}
/* --  --*/

.nav-masthead   {
  max-width: 100%;
  margin-bottom: 2.5rem;
}
.nav-masthead .nav-link {
  padding: .25rem 0;
  font-weight: 700;
  color: darkblue;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  margin-bottom: 2rem;
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: darkblue;
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: gray;
  border-bottom-color:gray;
}


.nav-masthead .nav-link {
  padding: .25rem 0;
  align-items: flex-start;
  font-weight: 700;
  color: darkblue;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: darkblue;
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: gray;
  border-bottom-color:gray;
}

section.container .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.section-references {
  margin-left: 2rem;
}

.section-references a{
  text-decoration: underline;
}


.btn-primary {
  color: #2e6da4;
  background-color: #FFFFFF;
}

.col-sm-1 img {
  min-width: 32px;
  min-height: 33px;
}
.carousel {
  background-color: transparent;
  width: 640px;
  height: 420px;
  justify-items: center;
}
.carousel-inner .carousel-item .image {
  width: 640px;
  height: 360px;
}
#carouselExampleControls  {
  background-color: gray;
  color: black;
}
#carouselExampleControls a {
  background-color: transparent;
  color: black;
}
.additional-references  {
  margin-top: 5rem;
}

#form_container
{
	padding:15px 15px;
	margin-top:15px;
	background: rgba(255,255,255,0.75);	
}
/* -  this code from form.css in not used
body
{
	background-color: #F4EAD5;
	- background-image: url("images/window-484596_1280.jpg"); 
	background-size: cover;
}  --*/

/*  --- my fist attempt on the video 
        div.center   should center the video --*/

div.center {
  text-align: center;
}

video {
  position: relative;
  left: 10;
  top: 10;
  width: 60%;
  height: auto;
}

.video-content {
  position: relative;
} 

#home-page  {
  max-width: 100%;
  height: auto;

}

.addendum {
  font-size: 1rem;



}

footer .text-center {
  font-size: 1rem;
  background-color: lightgrey;
  color: black;
  margin-top: 2rem;
  margin-left: 0.5rem;
  margin-bottom: 1rem;
  align-content:flex-end;
  justify-content: center;
  border-top: 0.25rem solid black;
}
footer a  {
  color: blue;
  font-weight: bold;
  text-decoration: underline;
}