@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

Body 	{ background-color: #FFFFFF; FONT-FAMILY: Montserrat, Tahoma, Arial; font-size:12pt; color:#444444 }
html	{ height: 100%;}


a:link       { text-decoration: none; color: #000000; font-weight:bold }
a:visited    { text-decoration: none; color: #000000;  font-weight:bold }
a:hover      { text-decoration: underline; color: #555555; font-weight:bold }
a:active     { text-decoration: underline; color: #000000; font-weight:bold  }

h1           { color: #297592; font-weight:bold; font-family: Montserrat; }
h2           { color: #0F327C; font-weight:bold; font-family: Montserrat; }
h3           { color: #3693A2; font-weight:bold; font-family: Montserrat;font-size: 24pt; }
hr           { border-color: #0F327C; height: 1px }

/*Styling for the YouTube video iframe, so it shrinks & grows proportinately with the screen */
.vidframe {
  width: 100%;
  max-width: 900px;
  height: 600px;
}

.vidframe2 {
  width: 100%;
  max-width: 600px;
  height: 338px;
}

/* Tall frame for shorts & reels */
.vidframe3 {
  width: 100%;
  max-width: 360px;
  height: 600px;
}

@media screen and (max-width: 1200px){
.vidframe {
  width: 100%;
  max-width: 490px;
  height: 275px;
}
.vidframe2 {
  width: 100%;
  max-width: 490px;
  height: 275px;
}
}

@media screen and (max-width: 601px){
  h1{
    font-size: 24pt;
    line-height: 1;
}
  h2{
    font-size: 16pt;
    line-height: 1;
}
  h3{
    font-size: 12pt;
}
.vidframe {
  width: 100%;
  max-width: 600px;
  height: 338px;
}
.vidframe2 {
  width: 100%;
  max-width: 600px;
  height: 300px;
}
}

/* Responsive content container, for gallery of articles*/
.homepage-container {
   float: left;
   margin: 5px;
   padding: 5px;
   width: 100%;
   height: auto;
}   

.featured-container {
   display: inline-block;
   margin: 5px;
   padding: 10px;
   height: auto;
   width: 800%;
   max-width: 300px;
   background: #FAF35A;
   border: 2px solid #B77749;
   border-radius: 8px;
   position:relative;
   text-align: left;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}   

.featured-box {
	border:1px solid #808080; 
	background:#CFDDBA; 
	color:#0F327C; 
	padding: 1px
}

/* Alternate float code:  display: inline-block; */

.gallery-container {
   display: inline-block;
   margin: 5px;
   padding: 5px;
   width: 500px;
   height: 175px;
   border: 1px solid black;
}   

 .gallery-pic {
  max-width: 200px;
  width: 500px;
  height: 125px;
  border: 0px;
}
/* End Responsive container */

  .contact-us {
     margin: 5px;
     padding: 5px;
     width: 100%;
     max-width: 275px;
     height: auto;
     border: 1px solid #666666;
     border-radius: 8px;
     color: #FFFFFF;
     background-color:#33718F; 
     text-align: center;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
  }   
  
  .contact-us a:hover {
    color: #FFFFFF;
    text-decoration: none;
    background-color:#999999; 
  }

/* Navbar styling: */
.header {
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: #333;
  z-index: 860;
}
.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
/* End Navbar styling: */


.banner-pic {
  max-width: 1600px;
  width: 100%;
  height: auto;
  display: inline-block;
}

 .logopic {
  width:100%;
  max-width: 350px;
  height: auto;
}
 
 .slideshow-pic {
  max-width: 900px;
  width: 75%;
  height: auto;
}
 .pic1 {
  max-width: 700px;
  width: 100%;
  height: auto;
  display: block;
}
 
 .leftpic {
  float: left;
  display: block; 
  max-width: 500px;
  width: 49%;
  height: auto;
  padding-right:5px;

}
 .leftpicsm {
  max-width: 250px;
  width: 25%;
  height: auto;
  float: left;
  display: block; 
  padding-right:5px;

}
      
 .rightpic {
  max-width: 500px;
  width: 49%;
  height: auto;
  float: right;
  display: block;
  padding-left:5px;

}

    
 .rightpicsm {
  max-width: 250px;
  width: 25%;
  height: auto;
  float: right;
  display: block;
  padding-left:5px;

}