/* HTML5 display-role reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* END HTML5 display-role reset */

i, em {font-style:italic;}
b, strong {font-weight:700;}

*, p, body {font-family: 'Lato', sans-serif;  font-size:18px;} 
p, body {line-height:1.5em;}

body {margin:0; background:white; padding:0;}
div {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

.center {text-align:center;}

hr {  border-color: #ccc;  border-style: dotted;  border-width: 1px 0 0;  margin: 1em 0 1em;  height: 0; clear:both;}
footer hr {  border-color: #555;}

.clear {clear:both;}

#feature {width:100%; height:auto; margin:0; padding:0; overflow:hidden; text-align:center; background:url('Membership-Header_1800x600_back.jpeg'); background-color:#13120e; height:300px; background-size:auto 125%; background-position:center; background-repeat:no-repeat;}
#feature h1 {color:#969696; font-family:'Roboto Slab'; font-size:2.5em; text-align:left; font-weight:400; margin-left:1em; margin-top:100px;}
#feature h2 {color:#eee; font-family:'Roboto Slab'; font-size:3em; text-align:right; font-weight:400; margin-right:1em; margin-top:0;}
.featureimage {width:100%; max-width:1800px; height:auto; margin:0; padding:0; margin-bottom:-10px;}

h1 {font-size:4em; line-height:1.1em; font-weight:700;}
h1.together {text-align:center; color:#004990; text-transform:uppercase;}
h2 {font-size:2em; line-height:1.1em; font-weight:600; margin-bottom:.5em;}
h2.mainheader {font-size:3em; line-height:1.1em; font-weight:600;}
h2.dogh2 {font-size:2.5em; line-height:1.1em; font-weight:600; color:#004990;}
h3 {font-size:1.4em; line-height:1.5em; font-weight:400; margin-bottom:1em;}
h3.grey {color:#666;}
h3.mainheader {font-size:2.5em !important; line-height:1.1em; font-weight:700;}
h4 {font-size:1.2em; line-height:1.5em; font-weight:400; margin-bottom:1em;}

.caps {font-weight:bold; text-transform:uppercase;}
.mainheader, .uppercase {text-transform:uppercase;}
.followus {line-height:2em;}
.bold {font-weight:700;}
.black {font-weight:900;}
.thin {font-weight:400;}

#header, .header {background:#004990; padding:20px; margin:0; height:100px; line-height:50px; width:100%;}
#headerinner, .headerinner {padding:0; padding-left:20px; margin:0; width:100%; max-width:1600px; margin-left:auto; margin-right:auto;}

#header ul {margin:0;}
.ulright {float:right;}
#header ul li {float:left; margin:0 1em 0 0; font-weight:400; text-transform:uppercase; font-size:1.2em;}
#header:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
#header a {color:#fff; text-decoration:none;}
#dogmenu a {text-decoration:none; color:#DA3370; display:inline-block; margin-left:10px; margin-right:10px;}
.spjlogo {height:60px; width:auto;}


#contentboxblue {background:#bf413d; width:100%; color:#fff;}
#contentboxblack {background:#222; width:100%; color:#fff;}
#contentboxgrey {background:#333; width:100%; color:#ddd;}
.content {padding:20px; margin:0; width:100%; max-width:1200px; margin-left:auto; margin-right:auto;}
.contentfp {max-width:1600px;}

.contentwide {padding:20px; margin:0; width:100%; max-width:1600px; margin-left:auto; margin-right:auto;}


.table21 {width:49%; background:#fff; padding:15px 15px 0 15px; float:left; clear:left; font-size:inherit; line-height:inherit; margin-right:1%; }
.table22 {width:49%; background:#fff; padding:15px 15px 0 15px; float:left; font-size:inherit; line-height:inherit; margin-left:1%; }

.table21actual {width:49%; background:#fff; padding:15px; float:left; clear:left; font-size:inherit; line-height:inherit; margin-right:0%; border-right:1px dotted #aaa;}
.table22actual {width:49%; background:#fff; padding:15px; float:left; font-size:inherit; line-height:inherit; margin-left:0%; }

.table21actual2 {width:49%; background:#fff; padding:15px 15px 0 0; float:left; clear:left; font-size:inherit; line-height:inherit; margin-right:0%;}
.table22actual2 {width:49%; background:#fff; padding:15px 0 0 15px; float:left; font-size:inherit; line-height:inherit; margin-left:0%; }


.table312dogvideo {width:59%; background:#fff; padding:10px; float:left; clear:left; font-size:inherit; line-height:inherit; margin-right:1%; }
.table33dogvideo {width:39%; background:#fff; padding:10px; float:left; font-size:inherit; line-height:inherit; margin-left:1%;}


.table312 {width:64%; background:#fff; padding:10px; float:left; clear:left; font-size:inherit; line-height:inherit; margin-right:1%; }
.table323 {width:64%; background:#fff; padding:10px; float:left; font-size:inherit; line-height:inherit; margin-left:1%; margin-right:1%; }

.table31 {width:32%; background:#fff; padding:10px; float:left; clear:left; font-size:inherit; line-height:inherit; margin-right:1%; }
.table32 {width:32%; background:#fff; padding:10px; float:left; font-size:inherit; line-height:inherit; margin-left:1%; margin-right:1%; }
.table33 {width:32%; background:#fff; padding:10px; float:left; font-size:inherit; line-height:inherit; margin-left:1%;}
.fighticondiv {width:90px; height:80px; float:left; margin:0 0 8px 8px;}
.fighticon {width:80px; height:auto; float:right; margin:0 0 8px 8px;}
.iconleft {width:80px; height:auto; float:left; margin:0 5px 8px 0;}
p.iconbullet {clear:both; margin-top:1em;}

#countdowncontainer {text-align:center;}
.countdown, .countdowntext {font-size:1.55em; line-height:1.1em;}

.socialicon {width:50px; height:50px; margin:0 10px 10px 10px; border-radius:8px;}

.joindiv {margin-top:2em; clear:both; margin-bottom:1em;}
.joindivextrapadding {margin-bottom:3em;}
.joinbutton {background:#004990; color:white; padding:1em; color:#fff !important; font-size:1.25em;}
.joinbuttonsnug {padding:.5em;}
.joinbutton a {color:#fff; text-decoration:none; text-transform:uppercase;}

.mobileonly {display:none;}
.phoneonly {display:inline;}
.phoneonlyblock {display:block;}
.nophone {display:none;}

.videoplayer {width:100%; height:auto;}


@media screen and (max-width:1200px) {
h1 {font-size:3em;}

}


@media only screen and (max-width:1200px) {
#header ul li {font-size:1em;}
}

@media only screen and (max-width:900px) {
.lisocial {display:none;}
}


@media screen and (max-width:1000px) {
h1 {font-size:2.5em;}

.fighticon {width:50px;}
.fighticondiv {width:60px; height:50px;}
br.desktoponly {display:none;}
}

@media screen and (max-width:800px) {
#headerinner {padding-left:0;}
.desktoponly {display:none;}
.mobileonly {display:block;}
#mobilemenu {font-size:1.2em;}
#dogmenu {font-size:.9em;}
#dogmenu a { margin-left:5px; margin-right:7px;}
h2.mainheader {font-size:2.5em;}
.blueboxwide {width:66%;}


#header {background:#004990; padding:10px; margin:0; height:auto; line-height:auto; width:100%;}
#feature {height:auto;}
#feature h1 {font-size:2em; margin-left:.3em; margin-top:1.5em;}
#feature h2 {font-size:2em; margin-right:.3em; margin-bottom:1.5em;}

}


@media screen and (max-width:600px) {
.datatable {font-size:.8em; line-height:1.5em;}
.datatable .hidecolumnmobile {display:none;}

*, p, body {font-size:15px;} 
h1 {font-size:2.5em;}
h2 {font-size:1.5em;}
h3 {font-size:1.2em;}
h4 {font-size:1.2em;}
#feature {height:auto; background-size:auto 125%; background-position:center; background-repeat:no-repeat;}
#feature h1 {font-size:2em; margin-left:.3em; margin-top:.3em;}
#feature h2 {font-size:2em; margin-right:.3em; margin-bottom:.3em;}
.content, .contentwide {padding:10px;}

.table21, .table21actual {width:100%; background:#fff; padding:10px; padding-bottom:0; float:none; clear:both; margin-right:0; border-right:0;}
.table22, .table22actual {width:100%; background:#fff; padding:10px; border-top:1px dotted #ccc; float:none; clear:both; margin-left:0; border-left:0; }
.spjlogo {height:50px; width:auto;}
.socialicon {width:25px; height:25px; margin:5px; border-radius:5px;}

.table31, .table32, .table33, .table312, .table323,  .table33dogvideo, .table312dogvideo {width:100%; background:#fff; padding:10px; float:none; clear:none; margin:0; }

.fighticondiv {width:70px; height:70px}

.footerspjlogo {height:60px; width:auto;}

#dogmenu a { margin-left:5px; margin-right:5px;}

}

@media screen and (max-width:470px) {
*, p, body {font-size:15px;} 
.fighticon {width:50px;}
}





@media screen and (min-width:601px) and (max-width:800px) {
*, p, body {font-size:15px;} 
.table31, .table32, .table33,.table312, .table323, .table33dogvideo, .table312dogvideo {width:100%; background:#fff; padding:10px; float:none; clear:none; margin:0; }
}


a {color:#004990; text-decoration:none;}
a:hover {color:red;}

.joinbutton a {color:#fff;}

a.basic, a.basic:link, a.basic:visited {color:#004292; text-decoration:none;}
a.basic:hover {color:#d0292d;}

.circlegraphcontainer {width:100%; text-align:center;}


.donate1, .donate2, .donate3, .donate4 {width:24%; box-sizing:border-box; margin:.5%; padding:.5%; display:block; float:left;}
.donatelogo {width:100%; height:auto; box-shadow:0 0 5px #bbb; margin-bottom:10px;}

@media handheld, only screen and (max-width: 800px), only screen and (max-device-width: 800px) 
{ 
.donate1, .donate2, .donate3, .donate4 {width:49%; box-sizing:border-box; margin:.5%; padding:1%; display:block; float:left;}
.donatelogo {width:100%; height:auto; box-shadow:0 0 5px #bbb; margin-bottom:3%;}
.donate3 {clear:left;}
}

.bluebox {display:block; background-color:#fff; float:right; width:40%; margin:0 0 15px 15px; padding:10px; color: #222; box-shadow:0; border:4px solid #004990; border-radius:8px;}
.blueboxwide {width:50%;}


.spjblue {color:#004990;}

.navigation {font-size:.8em;}
p#topnavigation {margin-bottom:25px; margin-top:0;}

.small {font-size:.8em; line-height:auto !important; color:inherit;}

.grey {color:#777;}


.bullet {font-weight:400; color:#cdd7e0}

.white {color:#fff;}
a.white:hover {color:#fceb02;}


/* ========== video embed ========== */

.video1 {width:1160px; height:653px;}


@media only screen and (min-width:1001px) and (max-width:1160px) {
.video1 {width:100%; height:653px;}
}

@media only screen and (min-width:801px) and (max-width:1000px) {
.video1 {width:100%; height:525px;}
}

@media only screen and (min-width:601px) and (max-width:1000px) {
.video1 {width:100%; height:425px;}
}

@media only screen and (max-width:800px) {
.video1 {width:100%; height:350px;}
}


@media only screen and (max-width:500px) {
.video1 {width:100%; height:250px;}
}