/* Header */

div.header {
    width:75%; 
    text-align:left; 
    align:left; 
    float:center; 
    position:relative;
    vertical-align:middle;
    background-color:#fbfbfb;
    background-image: url('/images/fhf-header-background-01.jpg')
    
    }
  
/* Logo */

div.logo {
    width:100%;
    text-align:left; 
    align:left; 
    float:left; 
    position:relative;
    }

/* Breadcrumbs */

.breadcrumb{
  padding: 3px 3px;
  list-style: none;
  background-color: #eeeeee;
  }
          
.breadcrumb-item{
  display: inline;
  font-size: 9pt;
  font-family:verdana;
  color: #000000;
   }
    
   A:link.breadcrumb, A:visited.breadcrumb, A:active.breadcrumb {
    display: inline;
    text-decoration:none; 
    color: #425cf0; 
    font-family:Verdana; 
    font-size:9pt; 
    font-weight:normal; 
    line-height:100%;
    }

  A:hover.breadcrumb {
    display:inline;
    font-family:Verdana; 
    font-size:9pt; 
    font-weight:normal; 
    line-height:100%;
    color: #87a6f0; 
    }

  .breadcrumb li+li:before{
  padding: 4px;
  color: black;
  content: ">";
  border:none;
  }

/* Menu top */

div.menutop {
    background-color: #f3f4da;
    overflow: hidden;
    }

A:link.menu, A:visited.menu, A:active.menu {
    text-decoration:none; 
    color: #05167f; 
    font-family:Verdana; 
    font-size:12pt; 
    font-weight:normal; 
    line-height:120%;
    padding: 8px 8px;
    float: left;
    display: block;
    }
           
A:hover.menu {
    text-decoration:none; 
    color: #7ca7f8; 
    font-family:Verdana; 
    font-size:12pt; 
    font-weight:normal; 
    line-height:120%;
    padding: 8px 8px;
    float: left;
    display: block;
    }

A:link.menusub, A:visited.menusub, A:active.menusub {
    text-decoration:none; 
    color: #05167f; 
    font-family:Verdana; 
    font-size:11pt; 
    font-weight:normal; 
    font-style:italic;
    line-height:100%;
    padding: 8px 8px;
    float: left;
    display: block;
        }
  A:hover.menusub {
    text-decoration:none; 
    color: #7ca7f8; 
    font-family:Verdana; 
    font-size:11pt; 
    font-weight:normal; 
    font-style:italic;
    line-height:100%;
    padding: 8px 8px;
    float: left;
    display: block;
        }

A:link.menucat, A:visited.menucat, A:active.menucat {
  text-decoration:none; 
  color: #05167f; 
  font-family:Verdana; 
  font-size:12pt; 
  font-weight:normal; 
  line-height:150%;
  padding: 12px 14px;
  float: left;
  display: block;
  }
             
  A:hover.menucat {
      text-decoration:none; 
      color: #7ca7f8; 
      font-family:Verdana; 
      font-size:12pt; 
      font-weight:normal; 
      line-height:150%;
      padding: 12px 14px;
      float: left;
      display: block;
      }

  /* Style the links inside the navigation bar */
  .menutop a {
    float: left;
    display: block;
    color: #05167f;
    text-align: center;
    text-decoration: none;
    font-size: 12pt;
    }
  
    /* Hide the link that should open and close the menutop on small screens */
    .menutop .icon {
    display: none;
    }
  
    /* Dropdown container - needed to position the dropdown content */
    .dropdown {
    float: left;
    overflow: hidden;
    }
  
    /* Style the dropdown button to fit inside the menutop */
    .dropdown .dropbtn {
    font-size: 12pt;
    border: none;
    outline: none;
    color: #05167f;
    padding: 12px 14px;
    background-color: inherit;
    font-family: Verdana;
    margin: 0;
    line-height:150%;
  }
  
  /* Style the dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #fdfdf9;
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Style the links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a dark background on menutop links and the dropdown button on hover */
  .menutop a:hover, .dropdown:hover .dropbtn {
    background-color: #f0ea8cc7;
    color: #05167f;
  }
  
  /* Add a grey background to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #f0ea8cc7;
    color: #05167f;
  }
  
  /* Show the dropdown menu when the user moves the mouse over the dropdown button */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  /* 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 menutop (.icon) */
  @media screen and (max-width: 600px) {
    .menutop a:not(:first-child), .dropdown .dropbtn {
      display: none;
    }
    .menutop a.icon {
      float: right;
      display: block;
      padding-top:5px;
      padding-right:10px;
    }
  }
  
  /* The "responsive" class is added to the menutop with JavaScript when the user clicks on the icon. This class makes the menutop look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 600px) {
    .menutop.responsive {position: relative;}
    .menutop.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .menutop.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .menutop.responsive .dropdown {float: none;}
    .menutop.responsive .dropdown-content {position: relative;}
    .menutop.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  }

/* Body */
body.content {
  background-color:#fbfbfb;
  } 

div.main {
    width:75%;
    text-align:left; 
    align:left; 
    float:center; 
    position:relative;
    margin-top:15px;
    }

/* Content and text */
div.content {
  width:100%; 
  text-align:left; 
  align:left; 
  float:left; 
  position:relative;
  margin-right:15px;
  }

div.columns {
  width:100%; 
  text-align:left; 
  align:left; 
  float:left; 
  position:relative;
  margin-right:15px;
  margin-top: 25px;
  margin-bottom: 25px;
  column-width: 100px;
  column-count: 4;
  column-gap: 40px;
  column-rule-width: 4px;
  column-rule-color: #000000;
  }

div.pagenav {
  float:left; 
  width:100%;
  align:center;
  position:relative;
  background:#f7f1e8;
  text-align:left;
  margin-top:5px;
  margin-bottom:15px;
  padding-left:10px;
  }

div.video {
  width:100%;
  margin-top:20px;
  margin-bottom:20px;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align:left; 
  }

div.imgbar {
width:100%;
margin-top:20px;
margin-bottom:20px;
text-align:center;  
}

div.imgright {
  width:300px; 
  align:right; 
  float:right; 
  margin-left:15px;
  margin-bottom:15px;
  margin-top:5px;
  border-radius:5px;
  }

div.imgleft {
  width:300px; 
  align:left; 
  float:left; 
  margin-right:15px;
  margin-bottom:15px;
  margin-top:5px;
  }

div.imgleftvert {
  height:300px; 
  align:left; 
  float:left; 
  margin-right:15px;
  margin-bottom:15px;
  margin-top:5px;
  }

 div.imgrightvert {
  height:300px; 
  align:right; 
  float:right; 
  margin-left:15px;
  margin-bottom:15px;
  margin-top:5px;
  }

img.imgbar {
max-width:100%;
align:center;
}
img.content{
  width:300px;
  }

img.contentvert{
  height:300px;
  }

p.list{
  margin-left:25px;
}

HR.content {
  width: 98%;
  align: center;
}

A:link.text, A:visited.text, A:active.text {
  text-decoration: none; 
  color:#425cf0;
  font-size:12pt;
  font-weight:normal;
  font-family:Verdana;
  line-height:175%;
  }  
    
A:hover.text {
  text-decoration: none; 
  color:#60caf8;
  font-size:12pt;
  font-weight:normal;
  font-family:Verdana;
  line-height:175%;
  } 

font.text {
  color:#000000; 
  font-size:12pt; 
  font-family:Verdana; 
  line-height:175%;
  }

font.textbold {
  color:#000000; 
  font-size:12pt; 
  font-family:Verdana; 
  font-weight:bold;
  line-height:175%;
  }

font.texttable {
  color:#b96c0d; 
  font-size:12pt; 
  font-family:Verdana; 
  font-weight:normal;
  line-height:175%;
  }

font.textheader {
  color:#b96c0d; 
  font-size:12pt; 
  font-family:Verdana; 
  font-weight:normal;
  line-height:175%;
  background-color: #f7f1e8;
  }

font.textitalic {
  color:#000000; 
  font-size:12pt; 
  font-family:Verdana; 
  font-weight:normal;
  font-style:italic;
  line-height:175%;
  }

font.textsub {
  color:#0c0c0c; 
  font-size:11pt; 
  font-family:Verdana; 
  font-weight:normal;
  line-height:150%;
  }  

font.textupdated {
  color:#9c6608; 
  font-size:11pt; 
  font-family:Verdana; 
  line-height:175%;
  }

    div.highlight {
width:100%;
margin-top:10px;
margin-bottom:10px;
text-align:left;
background:#f7ddb7  
}

font.highlight {
  color:#442c03; 
  font-size:12pt; 
  font-family:Verdana; 
  line-height:175%;
  }

h1.contentname {
  color : #b96c0d;
  font-size : 16pt;
  font-family : Verdana;
  font-weight : bold;
  line-height : 150%;
  margin-top : 25px;
  margin-bottom : 5px;
  text-decoration: none;
  }

h2.text {
  color : #b96c0d;
  font-size : 14pt;
  font-weight : bold;
  font-family : Verdana;
  line-height : 150%;
  margin-top : 25px;
  margin-bottom : 5px;
  margin-left: 0px;
  text-decoration: none;
  }

h3.text {
color : #b96c0d;
font-size : 12pt;
font-weight : bold;
font-family : Verdana;
line-height : 150%;
margin-top : 25px;
margin-bottom : 5px;
margin-left: 0px;
text-decoration: none;
  }  

table.content {
  width:100%;
  align:left;
  margin-top:25px;
  margin-bottom:25px;
  background-color:#eeeeee;
  margin-left:0pt;
  margin-right:5%;
  }

td.content {
  padding-top: 3px; 
  padding-bottom: 8px;
  padding-right:10px;
  border-bottom:1px;
  border-bottom-style: dotted;
  border-bottom-color:#bbbbbb;
  }

/* Footer */

div.footer {
    width:100%; 
    text-align:center; 
    align:center; 
    float:left; 
    position:relative;
    margin-top:20px;
    margin-right:10px;
    margin-bottom:50px;
    vertical-align:center;
    background-color: #eeeeee;
    border: 1px solid;
    border-color: #000000;
    padding-top:10px;
    padding-bottom:10px;
    }

A:link.footer, A:visited.footer, A:active.footer {
    text-decoration:none; 
    color: #425cf0; 
    font-family:Verdana; 
    font-size:11pt; 
    font-weight:normal; 
    line-height:100%;
    padding: 10px 10px;
    }

A:hover.footer {
    font-family:Verdana; 
    font-size:11pt; 
    font-weight:normal; 
    line-height:100%;
    color: #87a6f0; 
    padding: 10px 10px;
    }
        
font.footer {
    color:#575555; 
    font-size:11pt; 
    font-family:Verdana; 
    font-weight:normal; 
    line-height:100%;
    padding: 8px 8px;
    }

HR.footer {
    width: 90%;
    align: center;
}
img.social {
    width: 30px;
    object-fit: cover;
    object-position: bottom;
    }

/* advertisements */

div.ads {
  float:left; 
  width:100%;
  align:left;
  position:relative;
  background:#fbfbfb;
  text-align:left;
  margin-top:30px;
  margin-bottom:30px;
  }

ul.text {
  list-style-type: circle;
  padding:20px;
}

ol.text {
  list-style-type: decimal;
  padding:20px;
  margin-bottom:10px;
  color:#cccccc;
}

.text li {
  margin-bottom:15px;
  color:#000000;
  font-family:Verdana;
  font-size:12pt;
  line-height:175%;
  border:1px solid;
  border-color:#cccccc;
  padding-left:10px;
}

/* forms */

div.form {
  float:left; 
  width:100%;
  align:center;
  position:relative;
  background:#fafaf3;
  text-align:left;
  margin-top:10px;
  margin-bottom:10px;
  }
input[type=text] {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  box-sizing: border-box;
  font-family:Verdana; 
  font-size:11pt; 
  font-weight:normal; 
  color: #575555;
  }
input[type=email] {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  box-sizing: border-box;
  font-family:Verdana; 
  font-size:11pt; 
  font-weight:normal; 
  color: #575555;
}
textarea {
  width: 100%;
  height: 100px;
  margin:10px 0;
  padding: 10px 10px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #ffffff;
  resize: none;
  font-family:Verdana; 
  font-size:11pt; 
  font-weight:normal; 
  color: #575555;
}
input[type=submit] {
  width: 20%;
  background-color: #eebf26;
  border:2px solid;
  border-color:#cccccc;
  color: #000000;
    padding: 10px 10px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-family:Verdana; 
  font-size:12pt; 
  font-weight:normal; 
  line-height:150%;
}

label.form {
  cursor: default;
  }

font.form {
    color:#865904; 
    font-size:12pt; 
    font-family:Verdana; 
    font-weight:none; 
    line-height:100%;
    }


/* mobile */

@media screen and (max-width: 800px) {

  div.header {
    width:95%; 
    text-align:left; 
    align:left; 
    float:center; 
    position:relative;
    margin-bottom:10px;
    vertical-align:middle;
    }

  div.main {
    width:95%;
    text-align:left; 
    align:left; 
    float:center; 
    position:relative;
    margin-top:15px;
    }

  img.header{
    width: 100%;
    object-fit: cover;
    object-position: bottom;
    }
  
    img.social{
    width: 20px;
    object-fit: cover;
    object-position: bottom;
    }

  div.video {
    width:90%; 
    text-align:left; 
    align:left; 
    float:left; 
    margin-top: 15px;
    margin-bottom:15px;
    }

  div.imgleft {
    width:90%; 
    text-align:left; 
    align:left; 
    float:left; 
    margin-top: 15px;
    margin-bottom:15px;
    }

  div.imgright {
    width:90%; 
    text-align:left; 
    align:left; 
    float:left; 
    margin-top: 15px;
    margin-bottom:15px;
    }

  div.imgleftvert {
    width:90%; 
    text-align:left; 
    align:left; 
    float:left; 
    margin-top: 15px;
    margin-bottom:10px;
    }
  
  div.imgrightvert {
    width:90%; 
    align:left; 
    float:left; 
    margin-top: 15px;
    margin-bottom:15px;
    }

  img.content {
    width:100%;
    align:center;
      }

           }