/*
Theme Name: PARunning	
Theme URI: http://www.parunning.com
Description: A custom responsive theme based on Bootstrap - built for PA Running Company in 2024</a>.
Author: Julie Cleaves
Author URI: http://www.dynamicdzine.com
Version: 1.0
*/

@font-face {
    font-family: 'montserratblack';
    src: url('./fonts/montserrat/montserrat-black-webfont.woff2') format('woff2'),
         url('montserrat-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'montserratbold';
    src: url('./fonts/montserrat/montserrat-bold-webfont.woff2') format('woff2'),
         url('montserrat-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'montserratextrabold';
    src: url('./fonts/montserrat/montserrat-extrabold-webfont.woff2') format('woff2'),
         url('montserrat-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'montserratitalic';
    src: url('./fonts/montserrat/montserrat-italic-webfont.woff2') format('woff2'),
         url('montserrat-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'montserratlight';
    src: url('./fonts/montserrat/montserrat-light-webfont.woff2') format('woff2'),
         url('montserrat-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'montserratmedium';
    src: url('./fonts/montserrat/montserrat-medium-webfont.woff2') format('woff2'),
         url('montserrat-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'montserratregular';
    src: url('./fonts/montserrat/montserrat-regular-webfont.woff2') format('woff2'),
         url('montserrat-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'montserratsemibold';
    src: url('./fonts/montserrat/montserrat-semibold-webfont.woff2') format('woff2'),
         url('montserrat-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'montserratthin';
    src: url('./fonts/montserrat/montserrat-thin-webfont.woff2') format('woff2'),
         url('montserrat-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'montserratextralight';
    src: url('./fonts/montserrat/montserrat-extralight-webfont.woff2') format('woff2'),
         url('montserrat-extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
	--linkColor:#0e538f;
	--linkHoverColor:#000;
	--navBack:#ffffff;
	--topNavBack:#000000;
	--mycujooLink:#ffffff;
	--topNavSearchLink:#ffffff;
	--navLink:#000;
	--navLinkHover:#fff;
	--ddZMenuBack:#000;
	--ddZMenuColor:#fff;
	--homeJumboBack:#000;
	--homeNextGameBack:#000;
	--homeNextGameTxt:#fff;
	--blackColor:#000000;
	--blackTrans:rgba(0,0,0,.8);
	--whiteColor:#ffffff;
	--button1Text:#ffffff;
	--button2Text:#ffffff;
	--button3Text:#ffffff;
	--button1Hover:#ffffff;
	--button2Hover:#ffffff;
	--button3Hover:#ffffff;
	/* this is navy color */
	--color1:rgb(0,0,128); 
	/*this is teal blue */
	--color2:rgb(33,234,234); 
	/* this is green */
	--color3:rgb(20,239,207);
	/* this is orange */
	--color4:rgb(255,57,11);
	/* this is yellow */
	--color5:rgb(225,233,21);
	/*this is light gray */
	--color6:rgb(230,231,232); 
	/* this is dark gray */
	--color7:rgb(65,64,66);	
	--colorLightBack:#d6ebf4;
	--pageTopBack:#000000;
	--pageTitle:#ffffff;
	--footBack:#000;
	/*stat Back */
	--statBack:rgb(230,231,232);
	--statDark:rgb(208,210,211); 
}

/* ddz bootstrap overwrites */
html {overflow-y: scroll; }

body {
    padding-top:0px; 
    padding-bottom: 40px;
	font-family: 'montserratlight', Verdana, Arial, Helvetica, sans-serif; 
	font-size:16px;
}

.navbar {
	position: relative;
	margin-bottom: 0px;
}
.container {
	position:relative;
}
.nav > li > a:hover, .nav > li > a:focus {
	background-color:transparent;
}
.navbar-header { width:100%; margin-top:1em; height:120px; }
.navbar-collapse > ul#menu-main-menu > li.menu-item > a { float:right; }
.navbar-collapse > ul#menu-main-menu > li.menu-item::after {
	 content: "/";
	 display:inline-block;
	 margin-top:3px;
}
.navbar-collapse > ul#menu-main-menu > li.menu-item:last-of-type::after {
	 content: "";
	 display:inline;
	 padding-right:5px;
}

/* text and background colors */
/* color1 = navy, color2 = teal, color3 = turquoise, color4 = orange, color5 = yellow*/
.color1Txt { color:var(--color1);  }
.color2Txt { color:var(--color2);  }
.color3Txt { color:var(--color3);  }
.color4Txt { color:var(--color4);  }
.color5Txt { color:var(--color5);  }
.color6Txt { color:var(--color5);  }
.color7Txt { color:var(--color5);  }

.color1Back { background-color:var(--color1);  }
.color2Back { background-color:var(--color2);  }
.color3Back { background-color:var(--color3);  }
.color4Back { background-color:var(--color4);  }
.color5Back { background-color:var(--color5);  }
.color6Back { background-color:var(--color6);  }
.color7Back { background-color:var(--color7);  }


a img { border:none;outline:0; }
a:focus { outline:0; }
a { color:#ff6633;text-decoration:underline;font-weight:bold; }
a:hover { color:rgb(0,0,102); }
a.noUline { text-decoration:none; }
a.whiteLink { color:#fff; text-decoration:none; }
a.whiteLink:hover { color:rgb(225,233,21); }
a.blackLink { color:#000; text-decoration:none; }
a.tealLink { color:var(--color2); text-decoration:none; }
a.blackLink:hover, a.tealLink:hover { color: var(--color1); }


img { border:none; outline:0; }
h1.introTxt { font-size:16px; text-align:center; margin-bottom:1em; }
h1.ddZ-noTopPad, h3.ddZ-noTopPad { 
	padding-top:0px;
	-webkit-margin-before:0px;
	-webkit-margin-after:0px;
	margin-top:0px;
}
h2 { font-size:22px; color:#ff6633; }
h5 { text-decoration:underline; }
p { margin-top:20px; }
ul { list-style-type:square; }
hr.carved {
  clear: both; 
  float: none; 
  width: 100%; 
  height: 2px;
  margin: 1.4em 0;
  border: none; 
  background: #ddd;
  background-image: -webkit-gradient(
      linear,
      left top,
      left bottom,
      color-stop(0.5, rgb(221,221,221)),
      color-stop(0.5, rgb(255,255,255))
  );
  background-image: -moz-linear-gradient(
      center top,
      rgb(221,221,221) 50%,
      rgb(255,255,255) 50%
  );
}
hr { width:100%; }
hr.ddZ-orange { border-top:1px solid #ff6633; }
input["text"] {
    width: 100%; 
    padding: 0px
}
/* buttons */
.btn-color1SkeletonButt, .btn-color1SkeletonButt:link, .btn-color1SkeletonButt:visited {
    background-color: transparent;
    color: var(--color1);
    border: 2px solid var(--color1);
	font-weight:bold;
	border-radius:0px;
	cursor:pointer;
	text-align:center;
	font-size:120%;
	padding-top:10px;
	padding-bottom:10px;
}
.btn-color1SkeletonButt:active, .btn-color1SkeletonButt:hover, .btn-color1SkeletonButt > a:hover  {
    background-color:var(--color1);
    color:var(--button1Hover);
}
.btn-color1Butt, .btn-color1Butt:link, .btn-color1Butt:visited {
    background-color: var(--color1);
    color: var(--button1Text);
    border: 2px solid var(--color1);
	font-weight:bold;
	border-radius:0px;
	cursor:pointer;
	text-align:center;
	font-size:120%;
	padding-top:10px;
	padding-bottom:10px;
}
.btn-color1Butt:active, .btn-color1Butt:hover {
    background-color:  var(--color4);
	color: var(--button1Hover);
    border: 2px solid var(--color4);
}
.btn-color2SkeletonButt, .btn-color2SkeletonButt:link, .btn-color2SkeletonButt:visited {
    background-color: transparent;
    color: var(--color2);
    border: 2px solid var(--color2);
	font-weight:bold;
	border-radius:0px;
	cursor:pointer;
	text-align:center;
	font-size:120%;
	padding-top:10px;
	padding-bottom:10px;
}
.btn-color2SkeletonButt:active, .btn-color2SkeletonButt:hover {
    background-color: var(--color2);
    color:var(--button2Hover);
}
.btn-color2Butt, .btn-color2Butt:link, .btn-color2Butt:visited {
    background-color: var(--color2);
    color: var(--button2Text);
    border: 2px solid var(--color2);
	font-weight:bold;
	cursor:pointer;
	text-align:center;
	font-size:120%;	border-radius:0px;
	padding-top:10px;
	padding-bottom:10px;
}
.btn-color2Butt:active, .btn-color2Butt:hover {
    background-color:  var(--color4);
	color: var(--button2Hover);
    border: 2px solid var(--color4);
}
.btn-color3SkeletonButt, .btn-color3SkeletonButt:link, .btn-color3SkeletonButt:visited {
    background-color: transparent;
    color: var(--color3);
    border: 2px solid var(--color3);
	font-weight:bold;
	border-radius:0px;
	cursor:pointer;
	text-align:center;
	font-size:120%;
	padding-top:10px;
	padding-bottom:10px;
}
.btn-color3SkeletonButt:active, .btn-color3SkeletonButt:hover {
    background-color:var(--color3);
    color:var(--button3Hover);
}
.btn-color3Butt, .btn-color3Butt:link, .btn-color3Butt:visited {
    background-color: var(--color3);
    color: var(--button3Text);
    border: 2px solid var(--color3);
	font-weight:bold;
	border-radius:0px;
	cursor:pointer;
	text-align:center;
	font-size:120%;
	padding-top:10px;
	padding-bottom:10px;
}
.btn-color3Butt:active, .btn-color3Butt:hover {
    background-color:  var(--color4);
	color: var(--button3Hover);
    border: 2px solid var(--color4);
}
.btn-whiteSkeletonButt, .btn-whiteSkeletonButt:link, .btn-whiteSkeletonButt:visited {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
	font-weight:bold;
	border-radius:0px;
	cursor:pointer;
	text-align:center;
	font-size:120%;
	padding-top:10px;
	padding-bottom:10px;
}
.btn-whiteSkeletonButt:active, .btn-whiteSkeletonButt:hover, .btn-whiteSkeletonButt > a:hover  {
    background-color:#fff;
    color:var(--color1);
}

.btn-color1SkeletonButt > a { color: var(--color1); }
.btn-color2SkeletonButt > a { color: var(--color2); }
.btn-color3SkeletonButt > a { color: var(--color3); }
.btn-color1Butt > a { color: var(--button1Text); }
.btn-color2Butt > a { color: var(--button2Text); }
.btn-color3Butt > a { color: var(--button3Text); }
.btn-color1Butt > a:hover, .btn-color1SkeletonButt > a:hover { color: var(--button1Hover); }
.btn-color2Butt > a:hover, .btn-color2SkeletonButt > a:hover { color: var(--button2Hover); }
.btn-color3Butt > a:hover, .btn-color3SkeletonButt > a:hover { color: var(--button3Hover); }
.btn-color1Butt > a, .btn-color1SkeletonButt > a, .btn-color2Butt > a, .btn-color2SkeletonButt > a, .btn-color3Butt > a, .btn-color3SkeletonButt > a { text-decoration:none; }


/* header & menu */
a.dropdown-item { font-size:20px; }
a.nav-link {
    display: block;
    padding: 0px;
}
.ddZ-navPad { margin-left:150px; margin-right:150px; }
/* style main menu links */
#menu-mainmenu > li > a.nav-link {
    color: var(--navLink) !important;
	padding-right: .7rem;
	padding-left: .7rem;
/*	font-weight:bold;
	font-variant: small-caps; */
}
#menu-mainmenu > li > a.nav-link:hover {
    color: var(--navLinkHover) !important;
	background-color: var(--color1);
}
#menu-top-nav li:nth-child(2) {
	border-right: 1px solid #ffffff;
	padding-right:20px;
}
#menu-top-nav li:nth-child(6) {
	border-left: 1px solid #ffffff;
	padding-left:20px;
}
.navbar { text-transform: uppercase; font-size:20px; box-shadow:0px 2px 4px rgba(192,192,192,.10), 0px 4px 6px rgba(192,192,192,.2), 0px 6px 8px rgba(192,192,192,.3)  }
.navbar-brand {
    font-size: 2rem;
}
#navbarMain { width: auto; }
/* style toggler */
.navbar-toggler { border: none; }

ul#menu-mainmenu { list-style-type:none; padding-inline-start:0px; }

.navbar-nav {
	text-align:right;
}
.navbar-nav > li > a {
    padding-top: 3px;
    padding-bottom: 5px;
	text-decoration:none;
}

/*
//old config stuff
.navbar-collapse {
	max-height: none;
	width:100%;
	text-align:center;
}
.dropdown-menu {
	padding:0px;
}

ul.dropdown-menu li.menu-item { text-align:left; }
ul.dropdown-menu li.menu-item a { text-decoration:none; }
#guyline1 {
	position:absolute;
	margin-top:10px;
	margin-left:270px;
	width:0px;
	height:1px;
	border-bottom:1px solid #fff;
}
#guyline2 {
	position:absolute;
	margin-top:14px;
	margin-left:270px;
	width:0px;
	height:1px;
	border-bottom:1px solid #fff;
}
#lilguy {
	position:absolute;
	margin-top:-5px;
	margin-left:270px;
}
*/

.ddZ-navyBack { background-color:rgb(34,28,63); }
.ddZ-yellowBack { background-color:rgb(225,233,21); }
.ddZ-orangeBack { background-color:rgb(225,57,11); }
.ddZ-tealBack { background-color:rgb(33,234,234); }
.ddZ-greenBack { background-color:rgb(20,239,207); }
.ddZ-whiteBack { background-color:rgba(245,245,245,0.75); }


/* ddz-classes */
.ddZ-boldIt { font-weight:bold; }
.ddZ-CenterIt { text-align:center; }
.ddZ-ClearIt { clear:both; }
.ddZ-font30 { font-size:30px; }
.ddZ-font26 { font-size:26px; }
.ddZ-font20 { font-size:20px; }
.ddZ-font18 { font-size:18px; }
.ddZ-font16 { font-size:16px; }
.ddZ-font14 { font-size:14px; }
.ddZ-font12 { font-size:12px; }
.ddZ-orange { color:#ff6633; }
.ddZ-top1em { margin-top:1em; }
.ddZ-top2em { margin-top:2em; }
.ddZ-bottom1em { margin-bottom:1em; }
.ddZ-whiteTxt { color:#fff; }
.ddZ-navyTxt { color:rgb(34,28,63); }
.ddZ-yellowTxt { color:rgb(225,233,21); }
.ddZ-orangeTxt { color:rgb(225,57,11); }
.ddZ-tealTxt { color:rgb(33,234,234); }
.ddZ-greenTxt { color:rgb(20,239,207); }

.ddz-topBorder { border-top:1px solid #000; }
.ddz-fR { float:right; }
.ddz-fL { float:left; }
.ddz-topUp8 { margin-top:-8px; }
.ddz-topUp10 { margin-top:-10px; }
.ddz-top0 { margin-top:0px; }
.ddz-top10 { margin-top:10px; }
.ddZ-top1em { margin-top:1em; }
.ddZ-top2em { margin-top:2em; }
.ddz-bottom5 { padding-bottom:5px; }
.ddz-bottom0 { padding-bottom:0px; margin-bottom:0px; }
.ddZ-padAll10 { padding:10px; }
.ddz-bottom1 { padding-bottom:1em; }
.ddz-bottom2 { padding-bottom:2em; }
.ddZ-wide80 { width:80%; }
.ddZ-high100 { height:100%; }
.ddZ-wide100 { width:100%; }
.leftPic { float:left; margin-right:1em; }
.rightPic { float:right; margin-left:1em; }
.ddZ-padLR30 { padding-left:30px; padding-right:30px; }

/* Modal */
#searchModal.modal { margin-top:30px !important; z-index: 9999; }
#searchModalBody { margin-left:15px; margin-right:15px; }
.modal-header { justify-content:center; background-color:var(--color1); color:#fff; }
h4.modal-title { color:#fff; text-align:center; margin-block-start:0px; margin-bottom:0px !important; }
.close {
    position: absolute;
    top: 5px;
    right: 15px;
    padding: 15px;
    background: 0 0;
    border: none;
    font-size: 30px;
}	
.modal-dialog { top: 1em; }
.modal-footer { background-color:white; }

/* videos */
.relVideo { position:relative;padding-bottom:56.25%;height:0px;overflow:hidden; }
.relVideo iframe { position: absolute; top: 0; left: 0; width:100%; height:100%; }

/* front page */
#homeJumboBack {
	width:100%;
	padding:2em;
	background-color:var(--homeJumboBack);
}
.homeJumboVideo { position:relative; }
.homeJumboVideoWrapper { position:static; top:0px; left:0px; }
.homeJumboTitleMovie {
    background: linear-gradient(to bottom, rgba(0,0,0,0) 10%, rgba(0,0,0,0.9) 66%);
    position: absolute;
    bottom: 0;
	padding: 1em 10px 7px 10px;
	width: calc(100% - 30px);
	min-height:70px;
	display: flex;
	
}

.homeYTButtDiv {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -30px;
    margin-top: -60px;	
}
.homeYTButt {
	z-index:11;
	color:rgba(0,0,0,.8);
    -moz-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
    -webkit-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
    transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
}
.homeYTButt:focus, .homeYTButt, .homeYTButt:hover {
    outline: 0;
}
.homeYTButt:hover {
	color:rgb(255,0,0);
}
.homeYTButtPlay {
	color:white;z-index:12;
}
.homeYTVidOverlay {
	position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,.3);z-index:10;display:none;
}

#homeCTAGrid {
	display:grid;
	box-sizing: border-box;
	grid-template-columns:1fr 1fr;
	grid-template-rows: 1fr;
	grid-template-areas:
		"homeCTAGridL homeCTAGridR"
}
#homeCTAGridL {
	grid-area:homeCTAGridL;
	background-color:rgb(114,145,147);
	display:grid;
	box-sizing: border-box;
	align-items:center;
}
#homeCTAGridR {
	grid-area:homeCTAGridR;
	background-color:rgb(114,145,147);
	display:grid;
	box-sizing: border-box;
	align-items:center;
}

.fpJumboBox { padding:3.5em 20px; }
.fpJumboTxt { font-family:'montserratblack', Verdana, Arial, Helvetica, sans-serif; font-size:50px; }
.fpBoxPad { padding:3em 1em; }
.fpBoxIcon { width:40%; }
.fpBoxTxt { width:100%; text-align:center; margin-top:1em; 	font-family: 'montserratbold', Verdana, Arial, Helvetica, sans-serif; }
.homeAboutSection { padding:3em 50px; }
.homeAboutTitle { text-align:center; font-family: 'montserratbold', Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; }
.homeBlog {
	display:grid;
	grid-template-columns:2fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-template-areas:
		"homeBlogB1 homeBlogB2 homeBlogB4 homeBlogB6"
		"homeBlogB1 homeBlogB3 homeBlogB5 homeBlogB7";	
	overflow:hidden;
}
#homeBlogB1 {
	grid-area: homeBlogB1;
	overflow:hidden;
	position:relative;
}	
#homeBlogB2 {
	grid-area: homeBlogB2;
	overflow:hidden;
	position:relative;
}
#homeBlogB3 {
	grid-area: homeBlogB3;
	overflow:hidden;
	position:relative;
}
#homeBlogB4 {
	grid-area: homeBlogB4;
	overflow:hidden;
	position:relative;
}
#homeBlogB5 {
	grid-area: homeBlogB5;
	overflow:hidden;
	position:relative;
}
#homeBlogB6 {
	grid-area: homeBlogB6;
	overflow:hidden;
	position:relative;
}
#homeBlogB7 {
	grid-area: homeBlogB7;
	overflow:hidden;
	position:relative;
}

.homeBlogOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgba(230,231,232,.9);
	/*background: #000;
    opacity: .8; */
    z-index: 1000;
	text-align:center;
}
#hbo1, #hbo2, #hbo3, #hbo4, #hbo5, #hbo6, #hbo7 { display:none; }
#hbo1 { padding:250px 70px 0px 70px;}
#hbo2, #hbo3, #hbo4, #hbo5, #hbo6, #hbo7 { padding:100px 50px 0px 50px; }