/*
 Theme Name:   Cascade Snowbike 2017 Child Theme
 Theme URI:    https://cascadesnowbike.com/twenty-seventeen-child/
 Description:  Twenty Seventeen Child Theme
 Author:       Dave Reuss
 Author URI:   http://cascadesnowbike.com
 Template:     twentyseventeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
*/

body{
/* 	font-family: 'PT Sans', "Helvetica Neue",helvetica,arial,sans-serif */
}


iframe { 
  width: 100%;
  height: auto;
}

/* prevent zoom when using select on mobile - might not work, 7-7-21 */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
body select:focus, body textarea:focus, body input:focus {
        font-size: 16px !important;
    }
}

/* Homepage rental card img position */
.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail.jetpack-lazy-image.lazyloaded.jetpack-lazy-image--handled{
	display:block;
	margin: auto;
}

/* Nav Menu Styling */
.main-navigation .sub-menu li a{
	color: #222;
}

.main-navigation a{
	font-family: "Helvetica Neue",helvetica,arial,sans-serif;
	font-size: 1.2em;
	font-weight: 400;
	padding: 1em .92em;
	color: #eee;
}

body .dropdown-toggle{
	color: #fff !important;
	font-weight: bold;
	top: 12px;
}

body .wc-block-cart__submit-button{
	background-color: #f5f2ee;
	color: #222;
	box-shadow: none !important;
	border: 1px solid #969696;
}

body .wc-block-cart__submit-button:hover{
	background-color: #969696;
	color: #222;
	box-shadow: none !important;
}

.home .entry-title{
	text-align:center;
}

.navigation-top{
	background-color: #000 !important;
}

/* Mobile Menu Nav color */
body .menu-toggle{
	color: white;	
}

/* Random Styles need to track down */
.page .panel-content .entry-title, 
.page-title, 
body.page:not(.twentyseventeen-front-page) .entry-title{
	font-family: 'Oswald', "Helvetica Neue",helvetica,arial,sans-serif;
	text-transform: uppercase;
	font-style: italic;
	font-size: 1.6rem;
}

.custom-logo-link{
	text-align:center;
	display:flex;
	padding-right: 0;
	justify-content: center;
}

body .ri-grid{
	margin: 0 auto;
}

/* Content Structure */
.entry-header .entry-title{
	margin-bottom: .75em;
}

.site-main li{
	margin-left: 15px;
}
.wc-block-grid__products li{
	margin-left:0;
}

.banner{
	width: 100%;
	background: #000;
	padding: 8px 20%;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.home .reserve-now h2{
	color: #fff;
	text-align: center;
	font-family: 'Contrail One', "Helvetica Neue",helvetica,arial,sans-serif;
}

.arrowSeperator {
	display: block;
	text-align: center;
	border: 1px solid #ddd;
	width: 100%;
	height: 0;
	position: relative;
}

.arrowSeperator:before{
	content:'';
	width: 0; 
	height: 0; 
	border-left: 15px solid transparent; /*// this is the length of the side of the arrow*/
	border-right: 15px solid transparent; /*// this is the length of the side of the arrow*/
	border-bottom: 15px solid #ddd; /*// set to same color as the line, this is the height of the arrow*/
	position: absolute;
	bottom: 100%;
	left: 50%; /*// used to center arrow*/
	right: 50%;/* // used to center arrow*/
	margin: 0 -15px; /*// left & right offset need to match the width of the arrow to center arrow*/
	z-index:1;
}

/* // this arrow lays over the other arrow 
// offset slightly to show a line */
.arrowSeperator:after{
	content:'';
	width: 0; 
	height: 0; 
 	border-left: 25px solid transparent;/* //this is the length of the side of the arrow */
 	border-right: 25px solid transparent; /*//this is the length of the side of the arrow */
	border-bottom: 25px solid #000; /*// set to color of background, this is the height of the arrow*/
	position: absolute;
	bottom: 100%;
	left: 50%; /*// used to center arrow*/
	right: 50%; /*// used to center arrow*/
	margin: 0 -25px -2px -25px;	/*// left & right offset need to match the width of the arrow to center arrow*/
	z-index: 2;
}

/* Header CTA */
#top-menu > li.header-menu-cta > a {
    color: #222;
    background: #f5f2ee;
    border: 1px solid #222;
    border-radius: 5px;
}

/* Hover button styling */
#top-menu > li.header-menu-cta > a:hover {
  background: #969696;
  border: 1px solid #969696;
  color: #222;
}

/* Header CTA ON state */
#top-menu > li.header-menu-cta.current-menu-item > a{
	color: #fff !important;
	background-color: #969696;
}
/* Reserve CTA  */
.reserve-cta{
  width: 100%;
  float: left;
  margin-bottom: 18px;
}

.reserve-cta .cta,
.more-link{
    color: #222;
    background: #f5f2ee;
    border: 1px solid #969696;
    border-radius: 5px;
	padding: 12px;
	width: 62%;
	display: block;
	margin: 0 auto;
	font-size: 1.3em;
	text-align: center;
	-webkit-transition: background-color .3s ease-out;
  	-moz-transition: background-color .3s ease-out;
  	-o-transition: background-color .3s ease-out;
  	transition: background-color .3s ease-out;
}

/* Hover button styling */
.reserve-cta a.cta:hover,
.more-link:hover{
  background: #969696;
  border: 1px solid #969696;
  box-shadow: none !important;
}

/* View availability button */
.button.product_type_simple,
.button.product_type_variable{
    color: #fff;
    background: #e59630;
	border: 1px solid #e59630;
	padding: 2%;
	width: 96%;
	margin: 0 2%;
	text-align: center;
	position: absolute;
	bottom: 10px;
	left: 0;
}

/* Hover button styling */
.button.product_type_simple:hover,
.button.product_type_variable:hover{
  	background: #C67410;
  	border: 1px solid #e59630;
  	color: #eee !important;
  	box-shadow: none !important;
}

/* Call To Action Buttons */
.cta-btn {
  	position: relative;
  	display: block;
  	margin: 30px auto;
  	padding: 0;
  	overflow: hidden;
  	border-width: 0;
  	outline: none;
  	border-radius: 2px;
  	box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  	background-color: #2ecc71;
  	color: #ecf0f1;
  	transition: background-color .3s;
}

.cta-btn:hover, .cta-btn:focus {
  	background-color: #C67410;
}

.cta-btn > * {
  	position: relative;
}

.cta-btn span {
  	display: block;
  	padding: 12px 24px;
}

.cta-btn:before {
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	display: block;
  	width: 0;
  	padding-top: 0; 
  	border-radius: 100%;
  	background-color: rgba(236, 240, 241, .3);
  	-webkit-transform: translate(-50%, -50%);
  	-moz-transform: translate(-50%, -50%);
  	-ms-transform: translate(-50%, -50%);
  	-o-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
}

.cta-btn:active:before {
  	width: 120%;
  	padding-top: 120%;
  	transition: width .2s ease-out, padding-top .2s ease-out;
}

/* Blog Styling */
.blog-post{
	border-bottom: 1px solid #ccc;
	margin: 0 0 12px;
	float:left;
	padding: 8px 0;
}

.blog-post img{
	float: left;
	display: block;
	margin: 0 8px 12px;
}

.more-link{
	margin: 15px 0 0;
	width: 100%;
}

/* HomePage Cards */
.cards img {
  	height: auto;
  	max-width: 100%;
  	vertical-align: middle;
}

.card_image{
	max-height: 195px
}

.cards .btn {
  	color: #000;
  	padding: 0.8rem;
  	font-size: 14px;
  	text-transform: uppercase;
  	border-radius: 4px;
  	font-weight: 400;
  	display: block;
  	width: 100%;
  	cursor: pointer;
  	border: 1px solid rgba(0, 0, 0, 0.2);
  	background: transparent;
}

.cards .btn:hover {
  	background-color: rgba(255, 255, 255, 0.72);
}

.cards {
  	display: flex;
  	flex-wrap: wrap;
  	list-style: none;
  	margin:0 5% 0;
  	padding: 3% 0 0;
	z-index: 5;
	position:relative;
	justify-content: center;
}

body li.cards_item {
  	display: flex;
  	padding: 1rem;
  	margin: 0;
}

@media (min-width: 56rem) {
  .cards_item {
    width: 33.3333%;
	max-width: 450px;
  }
}

.card {
  	background-color: white;
  	border-radius: 0.25rem;
  	box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
  	display: flex;
  	flex-direction: column;
  	overflow: hidden;
}

.card_content {
  	padding: 1rem;
  	background: linear-gradient(to bottom left, #fff 40%, #ccc 100%);
  	height: 100%;
}

.card_title {
  	color: #000;
  	font-size: 1.1rem;
  	font-weight: 700;
  	letter-spacing: 1px;
  	text-transform: capitalize;
  	margin: 0px;
}

.card_text {
  	color: #000;
  	font-size: 0.875rem;
  	line-height: 1.5;
  	margin-bottom: 1.25rem;    
  	font-weight: 400;
}

/* Photo Slideshow */
body .wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide{
	background: transparent;	
}

/* Woocommerce Modifications */
/* checkout page on desktop single column */
body .wc-block-components-sidebar-layout .wc-block-components-main,
body .wc-block-components-sidebar-layout .wc-block-components-sidebar{
	padding:0;
	width: 100%;
	background: #fff;
}

/* Checkout - make single column and order */
body .wc-block-checkout__sidebar{
	order: 0;
	margin-bottom: 24px;
}

/* Checkout - make single column and order position over top of pinned sidebar */
body .wc-block-checkout__main{
	order: 1;
	z-index:100;
}

/* Checkout Layout */
.woocommerce .col2-set .col-1, 
.woocommerce-page .col2-set .col-1{
	width: 100%;
}

/* Woo - stripe payment box */
.wc_payment_method .payment_box{
	border: 5px solid #ccc;
	padding: 1em;
}

.wc_payment_method .payment_box fieldset{
	padding:0;
}
.woocommerce #content div.product div.images, 
.woocommerce div.product div.images, 
.woocommerce-page #content div.product div.images, 
.woocommerce-page div.product div.images{
	float:none;
}

.woocommerce #content div.product .woocommerce-tabs, 
.woocommerce div.product .woocommerce-tabs, 
.woocommerce-page #content div.product .woocommerce-tabs, 
.woocommerce-page div.product .woocommerce-tabs{
	width: 48%;
	float: left;
	clear: none;
}

.woocommerce #content div.product div.summary, 
.woocommerce div.product div.summary, 
.woocommerce-page #content div.product div.summary, 
.woocommerce-page div.product div.summary{
	min-height: 400px;
}

/* Woo blocks multi product display */
.wc-block-grid__product .wc-block-grid__product-image:not(.wc-block-components-product-image), 
.wc-block-grid__product .wc-block-grid__product-title{
	min-height: 33px;
}
/* Woo - Archive Product Style */
.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product{
	min-height: 400px;
	background: #eee;
	border: 1px solid #ccc;
	padding: 10px;
	padding-top: 18px;
}

.woocommerce .related.products ul.products li.product {
	min-height: 320px;
	padding: 10px;
}

/* Woo - Archive Product Style */
.archive.woocommerce ul.products li.product, 
.archive.woocommerce-page ul.products li.product{
	min-height: 365px;
}

.post-1256 .entry-summary .price,
.products .post-1256 .price,
li.post-681.product_cat-guide-only .price{
	text-indent: -9999px;
  	line-height: 0; /* Collapse the original line */
}

.post-1256 .entry-summary .price .woocommerce-Price-amount.amount::after,
.products .post-1256 .price .woocommerce-Price-amount.amount::after{
  	content: "$575 - $1725";
	text-indent: 0;
  	display: block;
  	line-height: initial; /* New content takes up original line height */
}

li.post-681.product_cat-guide-only .price .woocommerce-Price-amount.amount::after {
  	content: "$375 - $675";
  	text-indent: 0;
  	display: block;
  	line-height: initial; /* New content takes up original line height */
}

.woocommerce ul.products, 
.woocommerce-page ul.products{
	margin-bottom: 0;
}

ul.products li.product .price, 
ul.products li.product .star-rating,
.woocommerce-loop-product__title{
	text-align: center
}

/* woo product image border */
.entry-content .woocommerce  a img, 
.comment-content .woocommerce  a img, 
.widget .woocommerce  a img,
.woocommerce img, 
.woocommerce-page img{
	box-shadow: none;
	display: block;
	margin: auto;
}

/* Woo description tab cleanup */
.description_tab{
	display: none !important;
}

.wc-tabs{
	margin: 0;
}

.woocommerce-message,
.woocommerce-info{
	background-color: #e59630;
}

/* Woo order detail li */
.order_details li{
	margin: 0 0 0 28px;
}

.woocommerce-checkout p.woocommerce-invalid-required-field span.error {
	color: #e2401c;
   	display: block !important;
   	font-weight: bold;
}
.woocommerce-checkout p.woocommerce-invalid-required-field input {
	border: 2px solid #e2401c;
}

/* Woocommerce Store Notice Styling */
p.demo_store{
	background: #000;
	color: #f5f2ee;
	text-align:center;
}

p.demo_store .woocommerce-store-notice__dismiss-link{
	float: none;
	display: inline-block;
	margin-left: 8px;
	background: #f5f2ee;
	color: #000;
	padding: 8px;
	border-radius: 5px;
}

/* Footer Styling */
.grecaptcha-badge { visibility: hidden; }

.newsletter-signup form {
  	position: relative;
  	display: block;
  	height: 70px;
  	border-radius: 35px;
  	background: white;
  	margin: 0 auto;
  	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  	overflow: hidden;
}

.newsletter-signup form input {
  	line-height: 70px;
  	padding: 0;
  	border: none;
  	outline: none;
  	font-size: 1rem;
  	font-weight: 300;
  	background: #fff;
  	letter-spacing: 0.02em;
}

.newsletter-signup form input:not([type=submit]) {
  	width: 100%;
  	display: block;
  	padding: 0 150px 0 30px;
}

.newsletter-signup form input:not([type=email]) {
  	position: absolute;
  	height: 50px;
  	line-height: 50px;
  	top: 10px;
  	right: 10px;
  	border-radius: 25px;
  	padding: 0 25px;
  	background: #f5f2ee;
	border: 1px solid #969696;
  	color: #222;
  	cursor: pointer;
}

.newsletter-signup form input:not([type=email]):hover {
  	background: #969696;
}

.newsletter-signup form input:focus {
  	outline: none;
  	background: white;
}

.newsletter-signup form input::-webkit-input-placeholder { -webkit-transition:.5s;}
.newsletter-signup form input:-moz-input-placeholder { -moz-transition:.5s;}
.newsletter-signup form input::-moz-input-placeholder { -moz-transition:.5s;}
.newsletter-signup form input:-ms-input-placeholder { -ms-transition:.5s;}

.newsletter-signup form input:focus::-webkit-input-placeholder { color:transparent;}
.newsletter-signup form input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
.newsletter-signup form input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
.newsletter-signup form input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
/* end Newsletter signup */

.footer-widget-1 .widget{
	padding-bottom: 8px;
}
.footer-fs-info{
	background-color:black;
	padding: 15px 3%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer-fs-info img{
	width: 45px;
}

.footer-fs-info .fs-partner-info{
	color: #fff;
	margin: 0 0 0 15px;
	display: inline-block;
	text-align: center;
}

.captcha-links{
	font-size: .77em;
	color: #fff;
}

/* Partner Slider */
.partners{
	padding: 12px 0 0;
	clear:both;
}

.partners h2,
.newsletter-signup h2{
	font-family: 'Contrail One',"Helvetica Neue",helvetica,arial,sans-serif;
}

body #wpls-logo-showcase-slider-1 .wp-post-image, 
body #wpls-logo-showcase-slider-1 .wp-post-image img.wp-post-image,
body #wpls-logo-showcase-slider-1 .wpls-fix-box img.wp-post-image{
	max-height: 75px
}

/* Media Queries */
/* PAGE - content width / spacing */
@media screen and (min-width: 30em){
	.page-one-column .panel-content .wrap {
		max-width: 840px;
		padding: 1em;
	}
	.panel-content .entry-header{
		margin-bottom: 8px;
	}
}

@media screen and (min-width: 48em){
	.page.page-one-column .entry-header, 
	.twentyseventeen-front-page.page-one-column .entry-header, 
	.archive.page-one-column:not(.has-sidebar) .page-header {
		margin-bottom: 0em;
	}
	body .site-footer{
		margin-top: 0;
	}
	.panel-content .wrap{
		margin-bottom: 0;
		padding-bottom: 1em;
		padding-top: 2em
	}
}

@media (max-width: 599px) {
	/* Homepage - product display into two columns on mobile  */
	body .wc-block-grid.has-3-columns .wc-block-grid__products {
        display: flex;
    }
    body .wc-block-grid.has-3-columns .wc-block-grid__product:nth-child(odd) {
        padding-right: 8px;
    }

    body .wc-block-grid.has-3-columns .wc-block-grid__product {
        flex: 1 0 50%;
        margin: 0 0 24px;
        max-width: 50%;
        padding: 0;
    }
}

@media screen and (max-width: 768px){
	body .navigation-top,
	body .main-navigation ul{
		background-color: #000 !important;
	}
	
	body .main-navigation .sub-menu li a{
		color: #eee;
	}
	
	body .wrap{
		padding: 0 1em;
	}

	.banner{
		padding: 8px 5%;
	}
	
	body .page .panel-content .entry-title, 
	body .page-title, body.page:not(.twentyseventeen-front-page) .entry-title{
		font-size: 1.2rem;
		padding: 0 0 8px;
	}
	
	body.woocommerce #content div.product .woocommerce-tabs, 
	body.woocommerce div.product .woocommerce-tabs, 
	body .woocommerce-page #content div.product .woocommerce-tabs, 
	body .woocommerce-page div.product .woocommerce-tabs{
		width: 100%;
	}

	body .woocommerce ul.products[class*=columns-] li.product, 
	body.woocommerce-page ul.products[class*=columns-] li.product,
	body.woocommerce .related.products ul.products li.product {
		width: 100%
	}
	
	.home .woocommerce ul.products,
	body.woocommerce ul.products,      
	body .woocommerce-page ul.products{
		text-align: center;
	}
	
    body .button.product_type_simple, 
	body .button.product_type_variable{
		position:initial;
		float:left;
	}
	
	select{
		width: 100%;
	}
	
	body.woocommerce .reset_variations{
		display:block;
		text-align: center;
		margin-top: 5px;
	}
	
	.footer-fs-info{
		flex-direction: column;
	}
	
	.footer-fs-info img{
		display:block;
		width: 35px;
		margin: 0 auto 8px;
	}
	.footer-fs-info .fs-partner-info{
		width: 100%;
		margin: 0;
	}
}

@media screen and (max-width: 767px){
	/* 	Home page call cta button device width */
	.reserve-cta .cta,
	.more-link{
		width: 96%;
		margin: 0 2% 18px;
	}
}

@media screen and (min-width: 768px) and (max-width: 981px) {
	.js .main-navigation ul, 
	.js .main-navigation>div>ul{
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-evenly;
	}
	.main-navigation a{
		font-size: 1.0em;
		padding: 1em .43em;
	}
}

@media screen and (max-width: 767px){
	/* Nav - ride reservation cta style	 */
	#top-menu>li.header-menu-cta>a{
		margin-top: 12px;
		text-align: center;
	}
}

@media screen and (min-width: 48em){
	/* 	Subnav needs to have higher z-index to not get hidden */
	.navigation-top{
		z-index:101;
	}
	
	/* adjusts main nav on desktop for li items to space out to what's available	 */
	.js body .main-navigation>div>ul{
		display: flex;
		justify-content: space-between;
		margin: 0 5%;
	}
	
	/* parallax image height */
	.panel-image {
		height: initial;
	}
	
	.site-content{
		padding-top: 1em;
	}
}


/* --- Fix home hero header stretching the logo --- */

/* Stop hero section from forcing oversized width */
.home .site-header,
.home .header-inner,
.home .custom-header,
.home .custom-header-media,
.home .wp-custom-header {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Fix background video/image stretching beyond viewport */
.home .wp-custom-header video,
.home .wp-custom-header img,
.home .custom-header-media img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* Bulletproof the logo to keep its ratios */
.home .site-logo img,
.home .custom-logo,
.home .custom-logo-link img {
    width: auto !important;
    height: auto !important;
    max-width: 90% !important;
    max-height: 120px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Prevent the header or hero from widening the viewport */
html, body {
    overflow-x: hidden !important;
}
