html
{font-size:100%;}

body
{margin:0px;
border:0px;
padding:0px;
font-family:'Open Sans', sans-serif;
font-weight:400;
color:#1E1E1E;
line-height:20px;
background-color:#F6F6F6;
width:100%;}

h1
{font-size:1.0em;
font-weight:700;}

h2
{font-size:1.2em;
font-weight:700;}

h3
{text-align:center;}

h4
{color:#1E1E1E;
font-size:1.3em;
font-weight:700;}

.bold
{font-weight:700;}

.italic
{font-style:italic;
font-size:0.9em;
font-weight:700;
color:#949494;}

.center
{text-align:center;}

.nowrap
{white-space:nowrap;}

hr
{margin-top:20px;
clear:both;
color:#FDFDFD;}

th
{font-size:0.78em;
color:#9E9E9E;
text-align:left;
padding-top:8px;}

.td1
{padding:0px;
padding-top:40px;}

.td2
{width:100%;
margin:0px;
padding:0px;}

.td3
{font-size:0.7em;
color:#9E9E9E;
font-weight:700;
text-align:left;
width:50%;}

.td4
{text-align:right;
padding-right:10px;
width:50%;}
a
{color:#2E3192;
font-weight:700;
text-decoration:none;}

a:hover
{color:#EA1A47;
font-weight:700;
text-decoration:none;}

ul
{margin-left:0px;
margin-top:8px;
margin-bottom:0px;
list-style-type:none;
font-size:1.0em;}

.button
{font-family:'Open Sans', sans-serif;
font-size:1.1em;
color:#EFEFEF;
border-left:3px solid #E3E3E3;
border-top: 3px solid #E3E3E3;
border-right: 3px solid #CFCFCF;
border-bottom: 3px solid #CFCFCF;
border-radius:8px;
background-color:#000000;
padding:8px;}

.button1
{font-family:'Open Sans', sans-serif;
float:right;
margin-top:8px;
margin-right:0px;
border-radius:6px;
padding:4px;
font-size:0.9em;
font-weight:700;
width:75px;
height:35px;}

.button2
{font-family:'Open Sans', sans-serif;
color:#2E3192;
font-size:0.8em;
background-color:#F6F6F6;
margin:6px;
border:0px;
padding:0px;}

.button3
{font-family:'Open Sans', sans-serif;
color:#FFFFFF;
background-color:#2E3192;
margin-top:40px;
margin-left:auto;
margin-right:auto;
border-radius:6px;
padding:20px;
cursor:pointer;}

.button4
{font-family:'Open Sans', sans-serif;
text-align:center;
margin:12px;
margin-top:0px;
border-radius:6px;
padding:4px;
font-size:0.9em;
font-weight:700;
height:35px;}

@media all and (display-mode: standalone) {
.button4
{display:none;}
}
@media all and (display-mode: fullscreen) {
.button4
{display:none;}
}

.button5
{font-family:'Open Sans', sans-serif;
text-align:center;
margin:12px;
margin-top:0px;
margin-right:12px;
border-radius:6px;
padding:4px;
font-size:0.9em;
font-weight:700;
height:35px;
position:relative;top:-47px;
float:right;}

.button:hover
{box-shadow: 0 0 10px #EA1A47;
cursor:pointer}

.button1:hover
{box-shadow: 0 0 10px #EA1A47;
cursor:pointer}

.button2:hover
{color:#EA1A47;
cursor:pointer;}

.button3:hover
{box-shadow: 0 0 10px #EA1A47;
cursor:pointer}

.clearboth
{clear:both;}

.container1
{position:relative;
top:70px;
box-sizing:border-box;
margin-left:auto;
margin-right:auto;
padding:10px;
width:80%;
min-width:300px;
max-width:880px;
border:0px;
background-color:#F6F6F6;}

.container1 h1
{font-size:1.2em}

.container1 h2
{font-size:1.0em}

.container1 h3
{text-align:left;
margin-bottom:40px;
color:#0F0F0F}

.container2
{box-sizing:border-box;
position:absolute;
top:0px;
height:60px;
padding:7px;
background-color:#2E3192;
width:100%;}

.container2 h1
{position:relative;
top:2px;
padding-left:6px;
color:#FFFFFF;}

.container2 h1 a
{color:#FFFFFF;
font-weight:700;
text-decoration:none;}

.container2 h1 a:hover
{color:#EA1A47;
font-weight:700;
text-decoration:none;}

@media screen and (max-width: 550px){
.container2 h1 .text_hide2
{display:none;}
}

@media screen and (max-width: 500px){
.container2 h1 .text_hide3
{display:none;}
}

@media screen and (max-width: 440px){
.container2 h1 .text_hide
{display:none;}
}

@media screen and (max-width: 390px){
.container2 h1 .text_hide1
{display:none;}
}

.container3
{box-sizing:border-box;
position:relative;
top:65px;
margin-left:auto;
margin-right:auto;
padding:0px;
width:100%;
min-width:300px;
max-width:880px;
border:0px;
background-color:#F6F6F6;}

.container3 h2
{float:left;
margin-left:10px;
margin-top:10px;}

.container4
{box-sizing:border-box;
position:relative;
top:60px;
margin-left:auto;
margin-right:auto;
width:80%;
min-width:300px;
max-width:880px;
border:0px;
background-color:#F6F6F6;}

.container5
{}

.container4 h3
{margin-top:6px;}

.container6
{box-sizing:border-box;
margin-left:auto;
margin-right:auto;
padding:10px;
padding-top:20px;
width:80%;
min-width:250px;
max-width:880px;
border:0px;
background-color:#F6F6F6;}

.container6 h3
{text-align:left;
margin-top:25px;
margin-bottom:40px;
color:#0F0F0F}

.container9
{z-index:100;
position:relative;
box-sizing:border-box;
top:20px;
margin:auto;
border:solid 1px #EBEBEB;
border-radius:6px;
width:50%;
min-width:270px;
padding:20px;
text-align:left;
color:#000000;
font-size:0.9em;
font-weight:500;
background:#FFFFFF;
box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

/* This is used to toggle the add to home screen info */
.container9
{display:none}

@media all and (display-mode: browser) {
.container9
{display:block}
}

@media all and (display-mode: standalone) {
.container9
{display:none}
}

.container10
{position:relative;
top:60px;
background-color:#2E3192;
width:100%;}

@media all and (display-mode: standalone) {
.container10
{display:none;}
}
@media all and (display-mode:fullscreen) {
.container10
{display:none;}
}

.container11
{display:none;}

.container12
{z-index:100;
position:relative;
box-sizing:border-box;
top:20px;
margin:auto;
border:solid 1px #EBEBEB;
border-radius:6px;
width:50%;
min-width:270px;
padding:20px;
text-align:left;
color:#000000;
font-size:0.9em;
font-weight:500;
background:#FFFFFF;
box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

/* This is used to toggle the add to home screen info */
.container12
{display:none}

@media all and (display-mode: browser) {
.container12
{display:block}
}

@media all and (display-mode: standalone) {
.container12
{display:none}
}

.container14
{position:relative;
top:60px;
background-color:#2E3192;
width:100%;}

@media all and (display-mode: standalone) {
.container14
{display:none;}
}
@media all and (display-mode:fullscreen) {
.container14
{display:none;}
}

/* This is used to toggle divs in membership card */
.hideinfo {
display: none;}

.content1
{box-sizing:border-box;
margin-top:10px;
border:solid 1px #EBEBEB;
border-radius:6px;
padding:20px;
padding-top:10px;
background-color:#FFFFFF; width:100%;
box-shadow:1px 3px 4px #CFCFCF;}

.content3
{box-sizing:border-box;
margin-top:0px;
border:solid 1px #EBEBEB;
border-radius:6px;
padding:20px;
padding-bottom:40px;
background-color:#FFFFFF;
box-shadow:1px 3px 4px #CFCFCF;}

.content4
{box-sizing:border-box;
margin-top:10px;
padding:0px;
padding-bottom:40px;
width:100%;}

.content5
{box-sizing:border-box;
margin-top:10px;
padding:0px;
padding-bottom:15px;
width:100%;}

.content5 hr
{margin-top:10px;}

.content6
{display:flex;
width:100%;}

.content6 h3
{margin-top:28px;}

@media screen and (max-width: 762px){
.content6 h3
{margin-top:14px;}
}
@media screen and (max-width: 482px){
.content6 h3
{margin-top:8px;}
}

@media screen and (max-width: 436px){
.content6 h3
{margin-top:0px;}
}

.content7
{float:left;
width:15%;
min-width:120px;
height:auto;}

.content8
{padding:6px;
flex:1;
margin-top:6px;
margin-bottom:34px;
height:25px;
background-color:#2E3192;
color:white;}

@media screen and (max-width: 400px){
.content8 p .text_hide
{display:none;}
}

.content9
{position:relative;
top:-20px;
border-collapse: collapse;
clear:both;
background-color:#FFFFFF;}

@media screen and (min-width: 500px){
.element9
{top:-20px}
}

.content9  tr
{border-bottom:solid 1px #D9D9D9;}

.content9  th
{padding:6px;
 padding-right:12px;
 font-size:0.9em;
 font-weight:700;}

.content9  td
{width:fit-content;
 padding:6px;
 padding-right:12px;
 font-size:0.9em;
 font-weight:700;}

.content10
{margin-top:0px;
border-collapse: collapse;
clear:both;
background-color:#FFFFFF;}

.content10  tr
{border-bottom:solid 1px #D9D9D9;}

.content10  th
{padding:6px;
 padding-right:12px;
 font-size:0.9em;
 font-weight:700;}

.content10  td
{width:fit-content;
 padding:6px;
 padding-right:12px;
 font-size:0.9em;
 font-weight:700;}

.content11
{box-sizing:border-box;
margin-top:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
padding-bottom:15px;
width:50%;}

.content12
{margin:8px;
margin-bottom:12px;
border:1px solid #BFBFBF;
border-radius:6px;
padding:8px;
font-size:1.0em;
background-color:#EEEEEE;}

.element1
{float:left;
position:relative;
left:2px;
top:-1px;
margin-right:6px;
width:64px;}

@media screen and (max-width: 390px){
.element1
{width:40px;
left:2px;
top:8px;}
}

.element2
{float:right;
position:relative;
top:-24px;
right:6px;
color:#EFEFEF;}

.element3
{margin:6px;
float:right;
font-weight:700;}

.element4
{margin:6px;
float:left;
font-weight:700;}

.element5
{margin-top:5px;
float:left;
margin-left:10px;
margin-bottom:0px;
border:0px;
font-size:1.2em;
cursor:pointer;
background-color:#F6F6F6;}

.element5  h2
{margin-top:0px;
padding-top:1px;}

.element6
{margin:0px;
margin-top:2px;
padding-left:10px;}

.element7
{float:right;
position:relative;
top:-34px;
right:-2px;
border:0px;
cursor:pointer;
background-color:#2E3192;}

.element8
{padding-top:20px;
padding-bottom:40px;
text-align:center;
font-weight:bold;}

.element9
{margin-top:5px;
float:left;
margin-left:10px;
margin-bottom:0px;
border:0px;
font-size:1.2em;
cursor:pointer;
background-color:#F6F6F6;}

.element9  h2
{margin-top:0px;
padding-top:1px;}

.element10
{position:relative;
top:-44px;}

.element11
{float:right;
display:flex;
align-items:center;
border:0px;
margin-left:8px;
margin-top:10px;
margin-right:-5px;
margin-bottom:0px;
padding:0px;
height:220px;}

.element12
{vertical-align:middle;
border:1px solid black;
padding:3px;
max-height:175px;}

@media screen and (max-width: 680px){
.element12
{max-width:250px;}
 }
@media screen and (max-width: 550px){
.element12
{max-width:200px;}
 }
@media screen and (max-width: 460px){
.element12
{max-width:150px;}
 }
@media screen and (max-width: 390px){
.element12
{max-width:130px;}
 }

.contain
{object-fit:contain;}

.element14
{font-size:0.78em;
font-weight:700;
color:#9E9E9E;
text-align:left;
padding-bottom:10px;}

.element15
{float:left;
height:80px;
padding-top:0px;
padding-right:6px;
padding-bottom:10px;}

.element16
{margin:6px;
text-align:center;
font-weight:700;}

.element17
{color:#000000;
font-size:0.9em;
font-weight:700;}

.element18
{margin-left:0px;
border:1px solid #000000;
padding:2px;}

.element19
{margin-top:20px}

.element20
{font-size:0.90em;
font-weight:700;
color:#9E9E9E;
text-align:left;
padding-bottom:10px;}

.element21
{color:#1E1E1E;
font-size:1.3em;
font-weight:700;}

.element22
{margin-bottom:35px;}

.element23
{color:#000000;
font-size:1.1em;
font-weight:700;}

.element24
{margin-top:20px;
font-size:0.9em;}

.element25
{font-size:0.80em;
font-weight:700;
color:#9E9E9E;
float:left;}

.element26
{margin-left:10px;
margin-right:10px;}

.element27
{width:20%;
min-width:25px;}

.element28
{color:#1E1E1E;
font-size:1.2em;
font-weight:700;}

.element29
{width:0px;
color:red;
font-size:2.8em;
font-weight:bold;
position: relative;
top:65px;
right:-25px;
text-align:center;
transform: rotate(-45deg);}

@media screen and (max-width: 460px){
.element29
{font-size:2.2em;
top:50px;
right:-25px;}
 }

.element30
{height:80px;
margin-right:20px;}

.element31
{height:80px;}

.element32
{color:#1E1E1E;
font-size:1.0em;}

/* Use for BHPA logo */
.img_responsive
{max-width:100%;
height:auto;}

.img1 {margin-left:4px;
width:116px}

@media screen and (max-width: 762px){
.img1
{width:69px;}
}

/* Use for info image */
.img2
{float:left;
margin:0px;
border:0px;
border-radius:30px;
padding:0px;
height:30px;}

.img2:hover
{margin:0px;
border-radius:30px;
padding:0px;
box-shadow: 0 0 10px #EA1A47;}

/* Use for info image */
.img3
{margin:0px;
border:0px;
margin-left:3px;
border-radius:30px;
padding:0px;
height:30px;}

.img3:hover
{box-shadow: 0 0 10px #EA1A47;}

/* Use for error message with warning triangle inside content 6 */
.img_left1
{float:left;
margin:8px;
margin-left:0px;
margin-bottom:10px;
border-radius:6px;
width:auto;}

input[type=email]
{font-size:0.9em;
width:90%;
border:0px;
border-bottom:1px solid #9E9E9E;
padding:6px;
background-color:#FFFFB8;}

input[type=text]
{font-size:0.9em;
width:90%;
border:0px;
border-bottom:1px solid #9E9E9E;
padding:6px;
background-color:#FFFFB8;}

input[type=password]
{font-size:0.9em;
width:90%;
border:0px;
border-bottom:1px solid #9E9E9E;
padding:6px;
background-color:#FFFFB8;}

input[type="file"]::file-selector-button {
font-family:'Open Sans', sans-serif;
font-size:0.95em;
color:#EFEFEF;
margin:2px;
border-left:3px solid #E3E3E3;
border-top: 3px solid #E3E3E3;
border-right: 3px solid #CFCFCF;
border-bottom: 3px solid #CFCFCF;
border-radius:8px;
background-color:#000000;
padding:8px;
padding-right:2px;}

input[type="file"]::file-selector-button:hover {
box-shadow: 0 0 0 3px #EA1A47;
cursor:pointer}

/* This is used to hide the install button if it's disabled */
.button1:disabled,
.button1[disabled]{
display:none}

.spacer10
{clear:both;
height:10px;}

.spacer15
{clear:both;
height:15px;}

.spacer30
{clear:both;
height:30px;}

.spacer40
{clear:both;
height:40px;}