/*Variables*/
:root {
	/*breakpoints*/
	--sm-width: 576px;
	--md-width: 768px;
	--lg-width: 992px;
	--xl-width: 1200px;


	/*colors*/
	--primary-color: #002d55;
	--secondary-color: #26a9e1;
	--tertiary-color: #e6edf5;
	--light-color: #fff;
	--grey-color: #545454;
	--light-grey-color: #909090;
	--lighter-grey-color: #bbbdbf;

	--hover-opacity: 0.7;
	/*text*/
	/*--xxxxl-text: 152px;
	--xxxl-text: calc(111px + 2vw);
	--xxl-text: 72px;
	--xl-text: 48px;
	--large-text: 36px;
	--ml-text: 30px;
	--medium-text: 22px;*/

	--xxxl-text: calc(60px + 2vw);
    --xxl-text: calc(24px + 2vw) !important;
    --xl-text: calc(10px + 2vw);
    --large-text: calc(16px + 1vw);
    --ml-text: calc(21px + 0.5vw);
    --medium-text: calc(12px + 0.5vw);

	--xl-line-height: 1.4em;
	--large-line-height: 1.2em;
	--medium-line-height: 1em;
	/*margins*/
	--medium-gutter: calc(15px + 2vw);
	--small-gutter: calc(var(--medium-gutter) / 2);
	--tiny-gutter: calc(var(--medium-gutter) / 5);
	/*other*/
	--animation-transition:  0.3s cubic-bezier(0,0.5,0.5,1);
}
/*Utility*/
html, body {
    color: var(--grey-color);
}

@media (min-width: 992px)
html, body {
    font-size: 16px;
}
html, body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #000000;
}
body > div.container {		
	    margin: 0 auto;
	max-width: 9999px !important;
	padding: 0 !important;		
}
.row {
	margin: 0;
}
@media (min-width: 1600px) {
	.container {
		margin: 0 auto;
	    max-width: 1510px;
	}
}
body > div.container {
  max-width: 9999px !important;
  padding: 0 !important;
}
.small-container {
	width: 85%;
}
@media all and (max-width: 1024px) {
	.small-container {
		width: 100%;
	}
}
.flex-middle {
	align-items: center;
}
.invisible {
	visibility: hidden;
}
html, body {
	color: var(--grey-color);
}
.embed-responsive.embed-responsive-16by9 {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px; height: 0; overflow: hidden;
}
.embed-responsive-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*Text Classes*/


@font-face {
  	font-family: 'ntcornelia-regular';
  	src: url('../fonts/ntcornelia-regular.eot');
  	src: url('../fonts/ntcornelia-regular.eot?#iefix') format('embedded-opentype'),
  		url('../fonts/ntcornelia-regular.woff2') format('woff2'),
       	url('../fonts/ntcornelia-regular.woff') format('woff'),
       	url('../fonts/ntcornelia-regular.ttf') format('truetype');
  	font-weight: normal;
  	font-style: normal;
}

a {
    color: #26A9E0;
    text-decoration: none;
    transition: color 0.3s cubic-bezier(0,0.5,0.5,1);
}
a:hover {
	color: #26A9E0;
}
.primary-color {
	color: var(--primary-color);
}
a.primary-color:hover {
	text-decoration: underline;
}
.secondary-color {
	color: var(--secondary-color);
}
.fancy {
	font-family: 'NT Cornelia';
	font-weight: 400;
	letter-spacing: -0.025em;
}
.regular {
	font-family: Roboto;
	letter-spacing: 0;
}
.ca-pipe-title {
	text-transform: lowercase;
	font-weight: normal;
}
@media all and (min-width: 768px) {
	.ca-pipe-title strong {
		border-left: 0.1em solid currentColor;
		padding-left: 0.5em;
		margin-left: 0.5em;
	}
}
@media all and (max-width: 768px) {
	.ca-pipe-title strong {
		display: block;
	}
}
.light-text {
	color: var(--light-color);
}
.muted-text {
	color: var(--grey-color);
}
.bold {
	font-weight: 600;
}
.uppercase {
	text-transform: uppercase;
}
.lowercase {
	text-transform: lowercase;
}
.xxxxl-text {
	font-size: var(--xxxxl-text);
}
.xxxl-text {
	font-size: var(--xxxl-text);
}
.xxl-text {
	font-size: var(--xxl-text);
}
.xl-text {
	font-size: var(--xl-text);
}
.large-text {
	font-size: var(--large-text);
}
.ml-text {
	font-size: var(--ml-text);
}
.medium-text {
	font-size: var(--medium-text);
}
.large-line-height {
	line-height: var(--large-line-height);
}
.md-line-height {
	line-height: var(--medium-line-height);
}
.new-line {
	display: block;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}
@media all and  (max-width: 576px)  {
	.xxxl-text {
		--xxxl-text: calc(48px + 2vw);
	}
}
/*Gutter Classes*/

.margin-bottom {
	margin-bottom: var(--medium-gutter);
}
.margin-bottom-small {
	margin-bottom: var(--small-gutter);
}
.remove-padding-top {
	padding-top: 0 !important;
}
.container.medium-gutter, section.medium-gutter {
	padding: var(--medium-gutter) 0;
}
.container.small-gutter, section.small-gutter {
	padding: var(--small-gutter) 0;
}
.container.small-gutter > div {
	padding-left: var(--small-gutter);
	padding-right: var(--small-gutter);
}
.medium-padding {
	padding: var(--medium-gutter);
}
.small-padding {
	padding: var(--small-gutter);
}
.tiny-padding {
	padding: var(--tiny-gutter);
}
/*Column Classes*/
@media all and (min-width: 992px) {
	.col-lg-1-5 {
		flex: 0 0 20%;
	    max-width: 20%;
	}
	.col-lg-2-5 {
		flex: 0 0 40%;
		max-width: 40%
	}
	.col-lg-3-5 {
		flex: 0 0 60%;
	    max-width: 60%;
	}
}
@media all and (min-width: 768px) {
	.col-md-1-5 {
		flex: 0 0 20%;
	    max-width: 20%;
	}
	.col-md-2-5 {
		flex: 0 0 40%;
		max-width: 40%
	}
	.col-md-3-5 {
		flex: 0 0 60%;
	    max-width: 60%;
	}
}

/*Link/Button Classes*/
.ca-button {
	display: inline-block;
	text-transform: lowercase;
	font-weight: 500;
	border: 5px solid;
	position: relative;
	z-index: 1;
	color: var(--primary-color);
}
.ca-button:hover {
	font-weight: 600;
	color: var(--light-color);
	border-color: var(--primary-color);
}
.ca-button:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    height: 100%;
    max-height: 0;
    transition: all var(--animation-transition);
    background: var(--primary-color);
}
.ca-button:hover:after {
	max-height: 100%;
}
.light-button {
	border-color: var(--light-color);
	color: var(--light-color);
}
.light-button:hover {
	color: var(--primary-color);
	border-color: var(--light-color);
}
.light-button:after {
	background: var(--light-color);
}
.large-button {
	font-size: var(--large-text);
    line-height: calc(var(--large-text) * 1.4);
    padding: 0 calc(var(--large-text) * 1.15);
}
.ca-pipe-link + .ca-pipe-link {
	border-left: 0.1px solid currentColor;
	padding-left: 0.5em;
	margin-left: 0.5em;
	font-weight: bold;
}
a.light-text:hover {
	color: var(--light-color);
	text-decoration: underline;
}
.ca-text-button:after {
    content: '\00BB';
    padding-left: 10px;
}
/*General Styles*/
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, div.h1 {
	color: var(--primary-color);
}
.light-box {
	background: var(--light-color);
	border: 1px solid var(--lighter-grey-color);
	padding: var(--tiny-gutter);
	height: 100%;
}
.light-box img{
	max-width: 100%;
}
/*Nav AKA Header Top on Christy Sports*/

nav {
	background-color: #E6EDF5;
}
nav .container {
	display: flex;
	justify-content: space-between;
}
nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
nav li {
	display: inline-block;
}
nav a {
	font-size: 14px;
    font-weight: bold;
    color: #002D55;
    margin-right: 15px;
    display: flex;
    align-items: center;
    height: 30px;
}
nav .blue-link {
	background-color: #002D56;
    color: #FFFFFF;
    padding-left: 15px;
    padding-right: 15px;
}
nav li:last-child .blue-link {
	margin-right: 0;
}
/*Header*/

@media (min-width: 1200px) {
	header img {
	    height: 100px;
	}
}

header {
    border-bottom: 7px solid #002D56;
    padding-top: 10px;
    padding-bottom: 15px;
}

header .container {
	display: flex;
    align-items: center;
}

header h2 {
	font-size: 20px;
    font-weight: bold;
    color: #002D55;
    padding-right: 15px;
    padding-left: 15px;
}
@media (min-width: 992px) {
	.headerMiddle__slogan {
	    align-items: center;
	}
}
@media screen and (min-width: 1200px) {
	.headerMiddle__slogan {
	    padding-top: 20px;
	}
}
/*Action Line*/
#actionLine {
	text-align: left;
	min-height: 40px;
	display: flex;
	align-items: center;
	box-shadow: 0 0 24px rgba(0,0,0,0.3);
    position: relative;
    z-index: 1;
    background-color: #26A9E1;
    padding-top: 5px;
    padding-bottom: 5px;
}
#actionLine h5 {
    font-weight: bold;
	color: var(--light-color);
	transition: all var(--animation-transition);
	margin: 0;
}

/*Banners*/
#hero-image {
	background-image: url('../img/christy-review-banner.jpg');
    background-size: cover;
    background-position: top center;
    position: relative;
   	min-height: 33vw;
	min-height: 322px;
	display: flex;
	align-items: middle;
}
#hero-image .container {
    padding: var(--medium-gutter) 0;
}
#hero-image .container {
	align-items: flex-start;
}
#hero-image {

}
@media all and (min-width: 576px) and (max-width: 768px) {
	#hero-image {
		min-height: 550px;
	}
}
@media all and (max-width: 576px) {
	#hero-image {
		min-height: 375px;
	}
}
/*Category Section*/



#home-categories h2 {
    font-size: var(--large-text);
    font-family: 'ntcornelia-regular';
    font-weight: 400;
    letter-spacing: -0.025em;
    text-align: center;
    margin: var(--medium-gutter);
    text-transform: uppercase;
}


.ca-cat {
	background-size: cover;
	overflow: hidden;
	padding: 0;
    background-position: center;
    transition: all var(--animation-transition);
    position: relative;
    background-repeat: no-repeat;
    height: 100%;
}
@media all and (max-width: 992px) {
	.ca-cat {
		/*background-size: cover;*/
	}
}
.ca-cat:hover {
    /*background-size: 120%;*/
}
.ca-cat h5 {
	font-size: var(--xl-text);
	color: var(--light-color);
	background: rgba(0,0,0,0.5);
	text-transform: lowercase;
	padding: 0 20px;
	line-height: var(--xl-line-height);
	position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
#cat-col-3 {
	display: flex;
    flex-wrap: wrap;
}
#home-categories #cat-col-3 .ca-cat-col {
	height: 50%;
	padding: 0.3vw 0;
}
#home-categories .ca-row {
	margin: 0;
}
#home-categories .ca-cat-col .ca-row {
    margin: 0 -0.3vw;
}
#home-categories .ca-cat-col {
	padding: 0 0.3vw;
}
.ca-cat a {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#cat-row-2 .ca-cat {
	padding-bottom: 150%;
}
#cat-row-1 .ca-cat {
	background-color: #c4df9b;
	padding-top: 30%;
	background-position: bottom;
}
@media all and (max-width: 576px) {
	#ski {
		background-image: url('../images/ski-small.jpg') !important;
	}
}
@media all and (min-width: 576px) {
	#cat-row-1 .ca-cat {
		padding-top: 33%;
	}
	#cat-row-2 .ca-cat {
		padding-bottom: 40%;
	}
	.ca-height-100 {
		height: 100%;
	}
	.ca-height-50 {
		height: 50%;
	}
	.ca-height-62 {
		height: 62%;
	}
	.ca-height-38 {
		height: 38%;
	}
}
#home-categories .ca-cat-col.ca-height-38 {
	padding: 0.6vw 0.3vw 0px;
}
@media all and (max-width: 576px) {
	#home-categories  .ca-cat-col.ca-height-38 {
		padding: 0px 0.3vw 0.6vw;
	}
}
.ca-cat-col > .ca-row {
    padding: 0.3vw 0;
}
.ca-color-overlay:before {
    content: '';
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    mix-blend-mode: color;
    opacity: 1;
    transition: all var(--animation-transition);
}
.ca-red-overlay:before {
	background: #9e0b0f;
}
.ca-yellow-overlay:before {
	background: #fbc85d;
}
.ca-green-overlay:before {
	background: #c4df9b;
}
.ca-blue-overlay:before {
	background: #00a9af;
}
.ca-cat:hover.ca-color-overlay:before {
	opacity: 0;
}
#locations article:nth-child(odd) {
	background: var(--tertiary-color);
}
#locations article > div:first-child {
	background-size: cover;
	background-position: center;
    position: relative;
}
#locations article > div:first-child div {
	padding-bottom: 100%;
	display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
#locations article > div:first-child:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0) 50%);
	z-index: 0;
}
#locations article > div:first-child h5 {
	position: absolute;
	z-index: 2;
	color: #fff;
	font-weight: bold;
	bottom: 0;
}
#locations article > div:last-child {
	-webkit-column-count: 2;
    column-count: 2;
    font-size: var(--medium-text);
}
#locations ul.parentCity {
	list-style: none;
    font-weight: bold;
    position: relative;
    padding-left: 20px;
}
#locations ul.parentCity > li p {
	display: inline-block;
	cursor: pointer;
}
#locations ul.parentCity:before {
	position: absolute;
    left: 0;
}
#locations ul.parentCity:not(.click):before {
	content: '+';
}
#locations ul.parentCity.click:before {
	content: '-';
}
#locations ul.parentCity li > ul {
	position: relative;
	max-height: 0;
	overflow: hidden;
	transition: all 0s ease-in;
	font-weight: normal;
    list-style: none;
    margin: 0;
    padding: 0;
    opacity: 0;
}
#locations ul.parentCity.click li > ul {
	max-height: 999px;
	transition: all 1s ease-out;
	opacity: 1;
}