/*---CSS VARIABLES--------------------------------------------------*/
:root {
	/*--text and backgrounds--*/
	--header-bg-color: #000000;
	--header-txt-color: #FFFFFF;
	--nav-bg-color: #444444;
	--nav-a-txt: #FFFFFF;
	--nav-a-hover-txt: #FFC448;
	--footer-bg-color: #000000;
	--footer-txt-color: #FFFFFF;
	--main-txt-color: #444444;
	--home-callout-bg: #444444;
	--home-callout-txt: #FFFFFF;
	--sb-h5-bg: #000000;
	--sb-h5-txt: #FFFFFF;
	--sb--callout-bg-1: #DCDCDC;
	--sb--callout-bg-2: #E6E6E6;
	--sb--callout-bg-3: #FFFFFF;
	/*--links--*/
	--main-a-bord-bg: #FFC448;
	--main-a-hover-txt: #000000;
	--footer-a: #57B7EC;
	--footer-a-hover: #FFC448;
	--footer-a-hover-brd: #57B7EC;
}

/*---STRUCTURE------------------------------------------------------*/

html, body {
	background: url("../img/webb-dark.png") repeat;
}
body {
	font-family: 'Raleway', sans-serif;
}
.grid-container {
}
header {
	background-color: var(--header-bg-color);
	color: var(--header-txt-color);
	padding: 2em 2em 1em;
}
nav {
	background-color: var(--nav-bg-color);
}
main {
	color: var(--main-txt-color);
	background-color: rgba(255,255,255,.85);
	padding-bottom: 0;
	margin: 2em 0 1em;
}
section {
	margin-top: 0;
	color: #444;
}
.section-content {
	padding: 2em;
}
footer {
	background-color: var(--footer-bg-color);
	color: var(--footer-txt-color);
	text-align: center;
	padding: 2em 1em;
}
/*---TYPOGRAPHY-----------------------------------------------------*/
h1 {
	font-family: 'Raleway', sans-serif;
}
h2, h3, h4, h5, h6 {
	font-family: 'Montserrat',sans-serif;
	font-weight: 600;
}
h2 {
	line-height: 1em;
	margin-top: 0;
}
.required {
	color: red;
	font-weight: 600;
}
h1 {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}
h1:after {
    display: inline-block;
    margin: 0 0 8px 20px;
    height: 3px;
    content: " ";
    text-shadow: none;
    background-color: #999;
    width: 140px;
}
h1:before {
    display: inline-block;
    margin: 0 20px 8px 0;
    height: 3px;
    content: " ";
    text-shadow: none;
    background-color: #999;
    width: 140px;
}

/*---LINK STYLING---------------------------------------------------*/

main a {
	background-repeat: no-repeat;
	background-size: 100% 0.0em;
	background-position: 0 100%;
	transition: background-size 0.125s ease-in;
	color: inherit;
  border-bottom: 2px solid var(--main-a-bord-bg);
  background-image: linear-gradient(120deg, var(--main-a-bord-bg) 0%, var(--main-a-bord-bg) 100%);
}
main a:hover{
  background-size: 100% 100%;
  border-color: vvar(--main-a-bord-bg);
  color: var(--main-a-hover-txt);
}
footer a {
	color: var(--footer-a);
}
footer a:hover {
	color: var(--footer-a-hover);
	border-bottom: 1px dotted var(--footer-a-hover-brd);
}

.home-button {
	text-transform: uppercase;
}

/*---IMAGE STYLING--------------------------------------------------*/

.wrapright {
	display: block;
	float: left;
	margin-right: .25em;
}
.wrapleft {
	display: block;
	float: right;
	margin-left: .25em;
}
.wraprightbord {
	display: block;
	float: left;
	margin-right: .25em;
	padding: .25em;
	border: 1px solid #000;
}
.wrapleftbord {
	display: block;
	float: right;
	margin-left: .25em;
	padding: .25em;
	border: 1px solid #000;
}

.sidebar h5 {
	background-color: var(--sb-h5-bg);
	color: var(--sb-h5-txt);
	text-align: center;
	text-transform: uppercase;
	padding: .5em;
	margin-bottom: 0;
	font-size: 1em;
	margin-top: .375em;
}
.sidebar .callout {
	margin-top: 0;
	border: none;
	font-size: .875em;
	background: var(--sb--callout-bg-1);
  background: linear-gradient(0deg, var(--sb--callout-bg-1) 0%, var(--sb--callout-bg-2) 35%, var(--sb--callout-bg-3) 100%);
}

/*---HONE PAGE STYLES-----------------------------------------------*/

section h3 {
	text-transform: uppercase;
	font-size: 1.25em;
}

.home-callouts h5 {
	font-size: 1.125em;
	text-transform: uppercase;
	color: var(--home-callout-txt);
	text-align: center;
	background-color: var(--home-callout-bg);
	padding: .5em;
	margin-bottom: 0;
}
.benefit-item, .services-item {
	margin-top: .5em;
}

/*---CALENDAR STYLES------------------------------------------------*/

.calendar-item h3 {
  background-color: #56524b;
  padding: 1em;
  margin: 1em 0 0;
  font-weight: 800;
  letter-spacing: 1px;
  font-size: 1em;
  text-transform: uppercase;
  color: #fff;
}


@media screen and (max-width: 39.9375em) {
  .travel-feature-card-content {
    padding-bottom: 15px;
    border-bottom: 1px solid #cacaca;
  }
}

.travel-feature-card-price {
  text-align: right;
}

@media screen and (max-width: 39.9375em) {
  .travel-feature-card-price {
    padding-top: 15px;
  }
  .travel-feature-card-price .price-subtext {
    margin-bottom: 0px;
  }
}

.travel-feature-card-title {
  font-weight: 500;
  font-size: 1.25em;
  color: #0a0a0a;
}

.travel-feature-card-date-range {
  font-size: 0.9em;
  font-weight: 700;
  color: #0a0a0a;
}




/*---MISC STYLES----------------------------------------------------*/





/*---MEDIA QUERIES--------------------------------------------------*/