/*
Theme Name: Crux Child Theme
Theme URI: http://codestag.com/themes/crux
Description: Child theme for customizing Crux.
Version: 1.0
Author: Codestag
Author URI: http://codestag.com/
Template: crux
*/

/* Import Stylesheets, don't remove these.
-----------------------------------------------------------*/
@import url('../crux/style.css');

/* Required Wordpress Classes, don't remove these.
-----------------------------------------------------------*/
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.alignleft { float: left; }
.alignright { float: right; }

/* Make all custom CSS changes BELOW this line
-----------------------------------------------------------*/
/* Example: Change the sidebar background to blue:
#sidebar {
	background: blue;
}
*/


/* Use Old FontAwesome 4 for prev/next on slider */
.ls-crux .ls-nav-start:after,
.ls-crux .ls-nav-stop:after,
.ls-crux .ls-nav-prev:after,
.ls-crux .ls-nav-next:after {
  font-family: 'FontAwesome';
}

/* make the small top nav orange */
.subheader {
	color: #ffffff;
	background-color: #f15423;
	position: relative;
}

.footer-navigation {
	color: #ffffff;
	background-color: #f15423;	
}
.footer-menu.navigation {
	text-align: right;
}

@media only screen and (max-width: 900px) {
	.lancer-angled-header a {
		color: #fff;
		font-size: 1.2rem;
		line-height: 2;
	}
	.lancer-angled-header {
		background: #f15423;
		text-align: center;
		color: #fff;
		padding: 0;
	}
}

@media only screen and (min-width: 901px) and (max-width: 1150px) {
	.lancer-angled-header a {
		font-size: 1.4vw;
		width: 41%;
	}
}
@media only screen and (min-width: 901px) {
	.lancer-angled-header {
	  display:  block;
	  padding: 0;
	  overflow: visible;
	  color: #fff;
	  text-transform: uppercase;
	  float: right;
	  text-align: center;	
	  position: absolute;
	  height: 0;
	  top: 0;
	  right: 0;
	  width: 100%;
	}
	.lancer-angled-header a {
		color: #fff;
		width: 44%;
        float: right;
        line-height: 77px;
	}
	.lancer-angled-header:before {
	  content: '';
	  position: absolute;
	  top: 42px;
	  right: -69px;
	  width: 50%;
	  height: 33px;
	  background: #f15423;
	  -webkit-transform-origin: 100% 0;
	  -ms-transform-origin: 100% 0;
	  transform-origin: 100% 0;
	  -webkit-transform: skew(45deg);
	  -ms-transform: skew(45deg);
	  transform: skew(45deg);
	  z-index: -1;
	}
}
.footer-navigation {
	/* so I can use abosolute on the slant div */
	position: relative;
}
.footer-slant {
	  position: absolute;
	  top: -33px;
	  left: -69px;
	  width: 50%;
	  height: 33px;
	  background: #f15423;
	  -webkit-transform-origin: 100% 0;
	  -ms-transform-origin: 100% 0;
	  transform-origin: 100% 0;
	  -webkit-transform: skew(45deg);
	  -ms-transform: skew(45deg);
	  transform: skew(45deg);
}

/* Product Detail Page PDP */
/*
@media (min-width: 1024px) {
	.main-product-wrapper .product-details-left {
		max-width: 672px;
		float: left;
		width: 60%;
	}
	.main-product-wrapper .product-details-right {
    	margin-left: 60%;
	}
}
*/