/* ------------------------- BASE CSS _ DO NOT EDIT ------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

nav ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

/* change colours to suit your needs */
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input, select {
    vertical-align: middle;
}

/* ------------------------- ALL PAGE CSS ------------------------- */
/*
1394px 100%
* {
	box-sizing: border-box;
} */
body {
    font-family: "Montserrat" !important;
    , Arial, Helvetica, sans-serif;
}

.wrapper {
    /* margin: 0 auto 0 0; 1394px */
    width: 100%;
    background-color: ;
}

/* ------------------------- HEADER CSS ------------------------- */
.header-container {
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}

/* Style the header */
.header {
    background-color: #f1f1f1;
    padding: : 100px 0px 0px 0px;
    text-align: center;
    font-size: 35px;
}

.header.header-bg-image {
    width: 100%;
    background-size: cover;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: bottom;
    opacity: 0.9;
}

.header.header-bg-image-top {
    width: 100%;
    background-size: cover;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: top;
    opacity: 0.9;
}

.header.header-bg-image-mid {
    width: 100%;
    background-size: cover;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.9;
}

.header.header-bg-image-mid-membership {
    width: 100%;
    background-size: cover;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: bottom;
    height: 245px;
    overflow: hidden;
    opacity: 0.9;
}

.header-bg-image-title-home p {
    font-family: "Montserrat" !important;
    font-weight: 700 !important;
    font-size: 55px !important;
    color: #FFF;
    text-shadow: 0px -1px 0 #768976, 0px 1px 0 #768976, 1px 0px 0 #768976, -1px 0px 0 #768976;
    vertical-align: middle;
    text-align: right;
    padding-top: 80px;
    padding-bottom: 80px;
    padding-right: 30px;
}



.header-bg-image-title-membership p {
    font-family: "Montserrat" !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    color: #FFF;
    text-shadow: 0px -1px 0 #776565, 0px 1px 0 #776565, 1px 0px 0 #776565, -1px 0px 0 #776565;
    vertical-align: middle;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 10px;
}

.header-bg-image-title p {
    font-family: "Montserrat" !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    color: #FFF;
    /* text-shadow: 0px -1px 0 #776565, 0px 1px 0 #776565, 1px 0px 0 #776565, -1px 0px 0 #776565; */
    vertical-align: middle;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 10px;
}

.header-bg-image-tag p{
    font-family: "Montserrat" !important;
    font-weight: 700 !important;
    font-size: 60px !important;
    color: #FFF;
    /* text-shadow: 0px -1px 0 #776565, 0px 1px 0 #776565, 1px 0px 0 #776565, -1px 0px 0 #776565; */
    vertical-align: middle;
    text-align: center;
    /* padding-top: 80px; */
    padding-bottom: 80px;
}

.header-bg-image-tag-membership p{
    font-family: "Montserrat" !important;
    font-weight: 700 !important;
    font-size: 60px !important;
    color: #FFF;
    text-shadow: 0px -1px 0 #7a7a7a, 0px 1px 0 #7a7a7a, 1px 0px 0 #7a7a7a, -1px 0px 0 #7a7a7a;
    vertical-align: middle;
    text-align: center;
    /* padding-top: 80px; */
    padding-bottom: 60px;
}

/* ------------------------- LOGO CSS ------------------------- */

.logo {
}

#site-title {
    font-family: "Montserrat" !important;
    font-weight: 700 !important;
    font-size: 30px !important;
	float: left;
    color: #24678d;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding-right: 10%;
}
/*
@media screen and (min-width: 767px) #site-title {
    font-size: 30px !important;
} */

/* ------------------------- NAVIGATION CSS ------------------------- */
/* Navigation Menu CSS */
/* Links inside the navbar */
.navbar {
  overflow: hidden;
  background-color: #FFF;
  font-family: Arial;
}

.navbar a {
  float: left;
  display: block;
  font-size: 16px;
  font-weight: bold;
  color: #474747;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.active {
  background-color: #04AA6D;
  color: white;
}

.navbar .icon {
  display: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  font-weight: bold;
  border: none;
  outline: none;
  color: #474747;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #87ceeb;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

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

.fa-caret-down {
    color: #24678d;
}

/* 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) {
  .navbar a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .navbar 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) {
  .navbar.responsive {position: relative;}
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .navbar.responsive .dropdown {float: none;}
  .navbar.responsive .dropdown-content {position: relative;}
  .navbar.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
/* ------------------------- HORIZONTAL LINE CSS ------------------------- */
/* Horizontal line CSS */
.hr-div {
    height: 0px;
    overflow: hidden;
    width: 100%;
}

.styled-hr {
    width: 100%;
}

/* ------------------------- General Content Titles, Headings and Text CSS ------------------------- */
.subpage-title {
    width: 100%;
    padding-top: 60px;
    padding-left: 30px;
    padding-bottom: 30px;
    text-decoration: underline;
    text-align: center;
    color: #474747;
    font-weight: bold;
    font-size: 25px;
}

.p-title {
    font-family: "Montserrat" !important;
    font-size: 14px;
    font-weight: bold;
    color: #24678d;
}

.sub-h3 {
    font-family: "Montserrat" !important;
    font-weight: bold;
    color: #24678d;
    text-align: center;
}

/* Style the quote on home page */
.quote {
    background-color: #f1f1f1;
    background-position: center;
    padding: 5px;
    text-align: center;
    font-size: 14px;
    color: #474747;
    width: 60%;
    font-style: italic;
    font-family: "Montserrat" !important;
    line-height: 200%;
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 20%;
    margin-right: 20%;
}

/* ------------------------- LISTS CSS ------------------------- */
.paragraph-list ol {}

.paragraph-list li {
    font-family: "Montserrat" !important;
    font-size: 14px;
    line-height: 200%;
    text-align: left;
    margin-left: 30px;
    list-style: square;
}

/* ------------------------- FLEXBOX CSS ------------------------- */
/* Flexbox CSS */
/* Container for flexboxes*/
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
    .row {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
}

.row {
    width: 95%;
    display: -webkit-flex;
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
}

.column.equal.left {
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
    padding: 10px;
    margin-bottom: 30px;
    background-color: #FFFFFF !important;
    border-right: 1px solid #474747;
    /* height: 300px; Should be removed. Only for demonstration */
}

.column.equal.right {
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
    padding: 10px;
    margin-bottom: 30px;
    background-color: #FFFFFF !important;
}

.column.equal.middle {
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
    padding: 10px;
    margin-bottom: 30px;
    background-color: #FFFFFF !important;
    border-right: 1px solid #474747;
}

.column.equal.half {
    -webkit-flex: 2;
    -ms-flex: 1;
    flex: 1;
    padding: 10px;
    margin-bottom: 30px;
    background-color: #FFFFFF !important;
    border-right: 1px solid #474747;
    /* height: 300px; Should be removed. Only for demonstration */
}

.column.equal h2 {
    font-family: "Montserrat" !important;
    font-size: 18px;
    line-height: 20px;
    padding-bottom: 5px;
}

.column.equal p {
    font-family: "Montserrat" !important;
    font-size: 14px;
    line-height: 18px;
    text-align: justify;
}

.column-image {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding-left: 0px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    width: 60%;
    background-color: #FFFFFF !important;
}

/* ------------------------- TABLE CSS ------------------------- */
.table-title p {
    font-size: 14px;
    font-weight: lighter;
}

/* Table Title CSS */
.table-title {
    width: 100%;
    padding-top: 60px;
    padding-left: 10px;
    padding-bottom: 10px;
    text-align: center;
    color: #474747;
    font-weight: bold;
    font-size: 30px;
}

/* Table CSS */
div.paleBlueRows {
    font-family: Arial, Helvetica, sans-serif;
    border: 2px solid #FFFFFF;
    background-color: #EEEEEE;
    width: 80%;
    height: 200px;
    text-align: center;
    padding-bottom: 30px;
    margin-left: 10%;
    margin-right: 10%;
}

.divTable.paleBlueRows .divTableCell, .divTable.paleBlueRows .divTableHead {
    border: 2px solid #FFFFFF;
    padding: 3px 3px;
}

.divTable.paleBlueRows .divTableBody .divTableCell {
    font-size: 11px;
}

.divTable.paleBlueRows .divTableRow:nth-child(even) {
    background: #D0E4F5;
}

.divTable.paleBlueRows .divTableHeading {
    background: #0B6FA4;
    border-bottom: 5px solid #FFFFFF;
}

.divTable.paleBlueRows .divTableHeading .divTableHead {
    font-size: 17px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    border-left: 2px solid #FFFFFF;
}

.divTable.paleBlueRows .divTableHeading .divTableHead:first-child {
    border-left: none;
}

.paleBlueRows .tableFootStyle {
    font-size: 14px;
    font-weight: normal;
    padding-bottom: 30px;
    color: #D0E4F5;
    background: #D0E4F5;
    border-top: 3px solid #444444;
}

.paleBlueRows .tableFootStyle {
    font-size: 14px;
}

/* DivTable.com */
.divTable {
    display: table;
}

.divTableRow {
    display: table-row;
}

.divTableHeading {
    display: table-header-group;
}

.divTableCell, .divTableHead {
    display: table-cell;
}

.divTableHeading {
    display: table-header-group;
}

.divTableFoot {
    display: table-footer-group;
}

.divTableBody {
    display: table-row-group;
}

/* ------------------------- FACEBOOK IFRAME CSS ------------------------- */
.wrap-element {
    position: relative;
    overflow: hidden;
    padding-top: 36.25%;
}

.wrapped-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ------------------------- FOOTER CSS ------------------------- */
/* Style the footer */
.footer {
    width: 100%;
    background-color: #f1f1f1;
    text-align: center;
    font-size: 12px;
    margin-left: 30px;
}

.footer p {
    padding-bottom: 5px;
    background-color: #f1f1f1;
    padding: 10px;
    text-align: center;
    color: #474747;
}