
/* ------------ STARTING BASE CSS RULES ----------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900');
  
body {color: #1b1b1b; background:#020310; font-family: 'Lato', sans-serif; font-size: 12.5pt; position: relative; overflow: hidden;}
button {border: 0px; padding: 0; margin: 0; font-size: 12.5pt; } /* Change both font sizes if the base font size needs to be altered. */

p,ul,ol,li {line-height: 1.3em;}
ul ul {list-style-type: circle; margin: 5px 0;}
strong, b {font-weight: 700;}
i {font-style: italic;}

h1, h1 a {font-size: calc(16pt + .9vw); color: #000000; font-family: "Lato",sans-serif; font-weight: 400; line-height:1.2em; margin: 10px 0 10px; text-transform: none; text-align: left; }
h2, h2 a {font-size: calc(16pt + .8vw); color: #fefefe; font-family: "Lato",sans-serif; font-weight: 400; line-height:1.1em; margin: 0px 0 10px; text-transform: none;}
h3, h3 a {font-size: calc(16pt + .7vw); color: #42a2d6; font-family: "Lato",sans-serif; font-weight: 400; line-height:1.1em; margin: 10px 0; text-transform: none;}
h4, h4 a {font-size: calc(14pt + .6vw); color: #000000; font-family: "Lato",sans-serif; font-weight: 400; line-height:1.1em; margin: 10px 0;}
h5, h5 a {font-size: calc(14pt + .5vw); color: #445761; font-family: "Lato",sans-serif; font-weight: 400; line-height:1.1em; margin: 10px 0;}
h6, h6 a {font-size: calc(14pt + .4vw); color: #42a2d6; font-family: "Lato",sans-serif; font-weight: 400; line-height:1.1em; margin: 10px 0;}

p {margin: 1em 0;}
a, a:link, a:visited {color: #42a2d6; transition: all 0.3s;}
a:hover, a:focus {color: #445761;}

form.acf-form {margin-top: 0px;}
form.acf-form .acf-fields > .acf-field {border-top: none; padding: 10px 0;}
form.acf-form .acf-form-submit {padding: 10px 0;}

.form-item input.wpcf7-submit{-webkit-appearance: none; -moz-appearance: none;  appearance: none;  border-radius: 0;} /* This is a FIX for Safari on a CELL PHONE. for the button displays. */

/* Button Colors */
.form-item input.wpcf7-submit,
.mce-content-body a.button[data-mce-selected], 
.af-submit button.acf-button, 
button.af-submit-button,
a.button {background: #42a2d6; border:1px solid #42a2d6; color: #ffffff; font-size: .92em; font-weight: 400; font-family: "Lato",sans-serif; padding: 14px 20px; width: inherit; border-radius: 0px; white-space: pre-wrap; line-height:1em; display:inline-block; text-transform: uppercase; box-sizing: border-box; transition: all 0.3s;}

/* Button HOVER colors */
.form-item input.wpcf7-submit:hover,
.mce-content-body a.button[data-mce-selected]:hover,
.af-submit button.acf-button:hover,
button.af-submit-button:hover,
a.button:hover {background-color: #445761; border-color: #445761; color: #ffffff; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);}

div.panel.show {max-height: 20000px;} /* accordion fix, to let them open alot further if needed. */

.inner {width: 100%; max-width: 1800px; box-sizing: border-box; padding: 10px 2%; margin: 0 auto;}

.nopad {padding-top: 0; padding-bottom: 0;}

.imagewrapper {line-height: 0px;} /* kill off the inherit line height thats on all divs causing 4px at the bottom of a div thats empty */
img {max-width: 100%; height: auto;}

section:after {line-height: 0;} /*This was causing a 1px white space issue between 2 dark colors.  fix for core. */

/* automatically add a video Play button to a image thats linked as a popup youtube video. */
a.popup-youtube {position: relative; display: inline-block; line-height: 0; overflow: hidden;}
a.popup-youtube:after {content: "\f522"; font-family: "dashicons"; color: rgba(255,255,255,.7); text-shadow: 2px 2px 4px rgba(0,0,0,.7); font-size: calc(50px + 5vw); position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: space-around; align-items: center;}
a.popup-youtube img {transition: all 0.3s;}
a.popup-youtube:hover img {transform: scale3d(1.1,1.1,1);}

.video-page a.popup-youtube:after {display: none;} /* so the play button doesnt double up on a video page that already has it. */

html body#tinymce {padding: 5px 15px !important; box-sizing: border-box;}


::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

::-webkit-scrollbar {width: 10px; background: rgba(0,0,0,0);}
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.9);}
::-webkit-scrollbar-thumb {border-radius: 2px;  -webkit-box-shadow: inset 0 0 2px #1c1c1c; background: #8899a8; }
/*  -------------- END OF BASE RULES ---------------------------------------------------  */


#header1 {background: #303030; padding: 0; position: relative; z-index: 10; width: 100%;}
#header2 {background: #999999; padding: 0;}
#header3 {background: #000000; padding: 0;}














/* Blog Tweaks */
.archive.category .inner .allitemswrap {display: flex; align-content:flex-start; justify-content: flex-start; flex-wrap: wrap;}
.archive.category .inner .allitemswrap .itembox.teaser {width:31%; margin-right: 3.5%; margin-bottom:3.5vw; }
.archive.category .inner .allitemswrap .itembox.teaser:nth-of-type(3n+3) {margin-right: 0px;}
.archive.category .inner .allitemswrap .itembox.teaser:nth-of-type(4n+3) {clear: both;}
.archive.category .inner .allitemswrap .itembox.teaser figure {border:1px solid #818285;overflow:hidden; line-height: 0;}
.archive.category .inner .allitemswrap .itembox.teaser img {width:100%;height:auto;transition:all 0.3s;}
.archive.category .inner .allitemswrap .itembox.teaser:hover img {transform:scale3d(1.1,1.1,1);-webkit-transform:scale3d(1.1,1.1,1);}
.archive.category .inner .allitemswrap .itembox.teaser h2,
.archive.category .inner .allitemswrap .itembox.teaser h2.title {font-size:calc(16pt + .35vw);color: #000000; line-height:1.1em; margin-top:5px; margin-bottom:5px; text-transform: none;}
.archive.category .inner .allitemswrap .itembox.teaser .date-date {font-size:.8em; font-style:italic; line-height:1em; margin: 5px 0; color: #1d1d1d; }
.archive.category .inner .allitemswrap .itembox.teaser .textwrap {line-height:1.4em;}
.archive.category .inner .allitemswrap .itembox.teaser a.button {text-align:center;white-space:nowrap; width: inherit; margin-top: 10px; padding: 17px 40px;}

#posts-navigation {display: block; width: 100%;}

/* Blog Next / Prev pagination tweaks */
.navigation.pagination {width: 100%; position: relative;padding: 1px 0; clear: both; margin-bottom: 20px; display: flex; justify-content: space-around; align-items: flex-start;}
.navigation.pagination h2 {display: none;}
.navigation.pagination .nav-links {position: relative;}
.navigation.pagination .nav-links .page-numbers {font-size: 12pt; background: #259a8b; color: #ffffff; position: relative; width: inherit; min-width: 20px; padding: 4px 11px 4px; border-radius: 17px; border: 0;  display: inline-block; margin: 0 ;  -webkit-transition: all 0.8s; transition: all 0.8s; position: relative; overflow: hidden; z-index: 100; text-align: center;}
.navigation.pagination .nav-links .page-numbers.current {background: #0e5f61;}
.navigation.pagination .nav-links .page-numbers:hover {background-color: #0e5f61;}
.navigation.pagination .nav-links .next {font-size: 12pt; background: #259a8b; color: #ffffff; font-weight: normal; position: relative; width: inherit; padding: 4px 20px 4px 30px; border-radius: 0 17px 17px 0; border: 0;  display: inline-block; margin: 0 0 0 -12px;  -webkit-transition: all 0.8s; transition: all 0.8s; position: relative; overflow: hidden; z-index: 1;}
.navigation.pagination .nav-links .next:hover {background: #0e5f61}
.navigation.pagination .nav-links .next:after {content: ' '; width: 33px;height: 33px; display: inline-block; position: absolute; left: -17px; top: -2px; border-radius: 50%; background: #ffffff;}
.navigation.pagination .nav-links .prev {font-size: 12pt; background: #259a8b; color: #ffffff; font-weight: normal; position: relative; width: inherit; padding: 4px 30px 4px 20px; border-radius: 17px 0 0 17px; border: 0;  display: inline-block; margin: 0 -12px 0 0;  -webkit-transition: all 0.8s; transition: all 0.8s; position: relative; overflow: hidden; z-index: 1;}
.navigation.pagination .nav-links .prev:hover {background: #0e5f61;}
.navigation.pagination .nav-links .prev:after {content: ' '; width: 33px;height: 33px; display: inline-block; position: absolute; right: -17px; top: -2px; border-radius: 50%; background: #ffffff;}



#content.single-post .inner {display:block;}
#content.single-post .inner h1.title {margin-bottom:3px;text-align:left;}
#content.single-post .inner .contentwrap {display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}
#content.single-post .inner .post-meta {margin-bottom:0px; }
#content.single-post .inner .date-date {font-size:.8em;font-style:italic;color:#404040;}
#content.single-post .inner .textwrap {display: inline-block; width: 48%;}
#content.single-post .inner .imagewrapper {display: inline-block; width: 48%;}

#footer1 {background: #dddddd;}
#footer2 {background: #999999;}
#footer3 {background: #333333;} 


#bfm-credits {background: #0c0c0c; color: #747b81; text-align: center; display: none; }
#bfm-credits .inner {font-size: .8em; line-height: 1.2em; }
#bfm-credits a {color: #747b81; }
#bfm-credits a:hover {color: #ffffff; }


.js-back-to-top {display: none;}
.js-back-to-top {position: fixed;height: 50px;bottom: 0; right: 20px;  border: 1px solid #ffffff; background: #42a2d6; border-radius: 20px 20px 0 0; transition: all 0.5s; transform: translateY(25px); z-index: 10000;}
.js-back-to-top:before {top: calc(50% - 5px); content: "\f342"; font-family: "dashicons"; color: #ffffff; font-size: 40px;}
.js-back-to-top:hover {transform: translateY(2px); cursor: pointer;}







@media only screen and (min-width:1921px) {
    body {font-size: calc(12.5pt + .2vw); }    

    .inner { max-width: 1877px;}

    .slideshow-banner-box {max-height: 70vh; overflow: hidden;}
    .slideshow-banner-box .itembox {width: 100%; max-height: 70vh;}
    .slideshow-banner-box .itembox figure.imagewrapper img {width: 100%; height: auto;}
} 


@media only screen and (max-width:900px) {
	#content.single-post .inner .textwrap {width: 100%;order: 2;}
	#content.single-post .inner .imagewrapper {width: 100%; order: 1; margin-bottom: 20px;}  

	.archive.category .inner .allitemswrap .itembox.teaser:nth-of-type(3n+3) {margin-right: 4%;}
	.archive.category .inner .allitemswrap .itembox.teaser {width:48%; margin-right: 4%; margin-bottom:4vw; }
	.archive.category .inner .allitemswrap .itembox.teaser:nth-of-type(2n+2) {margin-right: 0px;}	
}


@media only screen and (max-width:700px) {
	.archive.category .inner .allitemswrap .itembox.teaser:nth-of-type(3n+3),
	.archive.category .inner .allitemswrap .itembox.teaser:nth-of-type(2n+2),
	.archive.category .inner .allitemswrap .itembox.teaser {width:100%; margin-right: 4%; max-width: 600px; margin: 0 auto 7vw;}	
}