/*------------------------------------------------------------------
[1. Background Images]
*/
.portfolio-hero-section {
	height: 60rem;
	max-height: 40vh;
}

.hero-solder{
	background-image:url('/images/home-slider/solder-gun-hero.jpg');
}

.hero-desk{
	background-image:url('/images/home-slider/desk-hero.jpg');
}

.hero-coffee-cake{
	background-image:url('/images/home-slider/coffee-cake-slide.jpg');
}

.hero-camping{
	background-image:url('/images/home-slider/camping-slide.jpg');
}

.hero-insulive{
	background-image:url('/images/home-slider/insulive-slide.jpg');
}

.hero-iwoofer{
	background-image:url('/images/portfolio/iwoofer/iWoofer-hero.jpg');
}

.hero-motorcycle{
	background-image:url('/images/home-slider/motorcycle-slide.jpg');
}

.hero-thermometre{
	background-image:url('/images/home-slider/thermometre-slide.jpg');
}

.hero-biome{
	background-image:url('/images/portfolio/biome/gradient-bg.jpg');
}

.insulive-hero-2{
	background-image:url('/images/portfolio/insulive/bg-blur-dark.jpg');
}

.hero-souschef{
	background-image:url('/images/home-slider/souschef-slider-hero.jpg');
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (		min--moz-device-pixel-ratio: 2),
only screen and (			-o-min-device-pixel-ratio: 2/1),
only screen and (				min-device-pixel-ratio: 2),
only screen and (					min-resolution: 192dpi),
only screen and (						min-resolution: 2dppx) {
		.hero-solder{
			background-image:url('/images/home-slider/solder-gun-hero@2x.jpg');
		}

		.hero-desk{
			background-image:url('/images/home-slider/desk-hero@2x.jpg');
		}

		.hero-coffee-cake{
			background-image:url('/images/home-slider/coffee-cake-slide@2x.jpg');
		}

		.hero-camping{
			background-image:url('/images/home-slider/camping-slide@2x.jpg');
		}

		.hero-insulive{
			background-image:url('/images/home-slider/insulive-slide@2x.jpg');
		}

		.hero-motorcycle{
			background-image:url('/images/home-slider/motorcycle-slide@2x.jpg');
		}

		.hero-thermometre{
			background-image:url('/images/home-slider/thermometre-slide@2x.jpg');
		}

		.hero-souschef{
			background-image:url('/images/home-slider/souschef-slider-hero@2x.jpg');
		}
}

/*------------------------------------------------------------------
[2. Background Color & Color Classes]
*/

/* fjw-red */
.bkg-fjw-red{
	background-color: #F1253B;
	border-color: #F1253B;
}
.bkg-hover-fjw-red:hover{
	background-color: #F1253B;
	border-color: #F1253B;
}
.border-fjw-red,
.border-hover-fjw-red:hover{
	border-color: #F1253B;
}
.color-fjw-red,
.color-hover-fjw-red:hover{
	color: #F1253B;
}

/* light grey */
.bkg-grey-light{
	background-color: #f4f4f4;
	border-color: #f4f4f4;
}
.bkg-hover-grey-light:hover{
	background-color: #f4f4f4;
	border-color: #f4f4f4;
}
.border-hover-grey-light:hover{
	border-color: #f4f4f4;
}
.color-grey-light,
.color-hover-grey-light:hover{
	color: #f4f4f4;
}

/* white */
.bkg-white{
	background-color: #ffffff;
	border-color: #ffffff;
}
.bkg-hover-white:hover{
	background-color: #ffffff;
	border-color: #ffffff;
}
.border-hover-white:hover{
	border-color: #ffffff;
}
.color-white,
.color-hover-white:hover{
	color: #ffffff;
}


.hero-content-inner blockquote p {
	font-desk: 2.8rem;
}

.hero-content-inner blockquote cite {
	 font-desk: 1.6rem;
}


.timeline button.small {
	padding: 0.4rem 1.5rem;
}


.mobile .header {
    background: none;
}
.header .logo a {
	padding: 0 1.4rem;
	line-height: 4.4rem;
	background-color: #F1253B;
}
.header-transparent .navigation .navigation-show.nav-icon {
	background-color: #F1253B;
}
.header-transparent .navigation .navigation-show.nav-icon:hover {
	color: #F1253B;
	background-color: #111111;
}
.header .logo a:first-child{
	width: 7rem;
	opacity: 0;
	visibility: hidden;
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
}
.header .logo a:last-child{
	width: 20rem;
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateX(-7rem);
	-ms-transform: translateX(-7rem);
	transform: translateX(-7rem);
}
.header-compact .logo{
	width: 7rem;
}
.header.header-background .logo a:last-child{
	-webkit-transform: translateX(-7rem);
	-ms-transform: translateX(-7rem);
	transform: translateX(-7rem);
	opacity: 0;
	visibility: hidden;
}
.header.header-background .logo a:first-child {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
	-webkit-transition-duration: 0ms;
	transition-duration: 0ms;
}
.header.header-background .logo a:first-child:hover {
	-webkit-transition-duration: 200ms;
	transition-duration: 200ms;
}
.side-navigation-wrapper .logo{
	width: 20rem;
}
.mobile .header .header-inner > .row {
	padding: 0;
}

/* Header Background Logo Swap to Dark Logo - On Scroll! */
.header-background .logo a:first-child{
	opacity: 0;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

/* Logo Nav Dark */
.nav-dark .logo a:first-child{
	display: block !important;
	top: 0;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.nav-dark .logo a:last-child{
	display: none !important;
}

.header .v-align-middle > .button:not(.nav-icon), .header .dropdown > .button:not(.nav-icon) {
	background: rgba(0,0,0,0.3);
}

/* Logo Mobile Header & Breakpoints */
.mobile .header .logo a:first-child{
	display: block !important;
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	visibility: visible;
}
@media only screen and (max-width: 960px){
	.header .logo-inner{
		display: table-cell;
		vertical-align: middle;
	}
	.header .logo a{
		position: relative;
	}
	.header .logo a:first-child{
		opacity: 1;
		top: 0;
		-webkit-transform: translateX(0) !important;
		transform: translateX(0) !important;
		visibility: visible;
	}
	.header .logo a:last-child{
		display: none !important;
	}
}









@media only screen and (max-width: 768px){
   .content-grid-half-mobile .grid-item {
      width: 50%;
   }
	 #insuliveWaist {
		 display: none;
	 }
}

.mobile .tm-slider-container.fullscreen {
 top: 0 !important;
 left: 0 !important;
 height: calc(100vh - 140px) !important;
}

.grid-container.small-margins .grid-item {
	margin-bottom: 0;
	padding: 0.5rem;
	position: relative;
}



.case-study, .case-study-content {
	padding: 40px;
}

.case-study-content p {
	font-desk: 1.8rem;
}

.case-study .row {
	margin-bottom: 40px;
}

.case-study .skills {
	font-desk: 1.3rem;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	color: #aaaaaa;
}

.case-study .project-title {
	line-height: 7rem;
	font-desk: 4rem;
	margin: 1rem 0 0 0;
}

.case-study button {
	padding: 15px 30px;
	margin: 0;
}

@media only screen and (max-width: 960px){
	.case-study, .case-study-content {
		padding: 20px;
	}
	.case-study .row {
		margin-bottom: 20px;
	}
	.case-study .project-title {
		line-height: 4rem;
		font-desk: 3rem;
		margin: 0;
	}
	.case-study button {
		padding: 10px 20px;
	}
	.case-study p {
		margin: 0 0 15px 0;
		font-desk: 1.6rem;
	}
}

@media only screen and (max-width: 768px){
	.case-study button {
		width: 100%;
	}
}


.overlay-navigation-wrapper .navigation-hide {
	top: 4rem;
	right: 6rem;
}

.mobile .overlay-navigation-wrapper .navigation-hide {
	top: 0;
	right: 3rem;
}

.overlay-navigation {
	padding: 10rem 8rem 8rem 8rem;
	padding-top: 10rem;
}

.overlay-navigation:first-child {
	padding-top: 12rem;
}

.primary-navigation {
	opacity: 1;
  transition: opacity 4s linear;
}

.hidden {
	opacity: 0;
  transition: opacity 4s linear;
}

.contact-form-container .form-element, .contact-form-container textarea, .signup-form-container .form-element, .signup-form-container textarea, .search-form-container .form-element, .comment-form .form-element, .comment-form textarea {
	text-transform: none;
}

.contact-form-container textarea {
	redesk: vertical;
}

.parallax {
	width: 100% !important;
}

.tm-parallax img {
	margin-left: -30px !important;
}



/*------------------------------------------------------------------
Lazy Sizes Blur
*/

.mediabox {
	position: relative;
	display: block;
	height: 0;
	width: 100%;
	padding-bottom: 66.6667%;
}

.mediabox-img.ls-blur-up-is-loading,
.mediabox-img.lazyload:not([src]) {
	visibility: hidden;
}

.ls-blur-up-img,
.mediabox-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;

	/* only if you want to change the blur-up option from always to auto or want to use blur up effect without a lowsrc image. */
	font-family: "blur-up: auto", "object-fit: cover";

	object-fit: cover;
}

.ls-blur-up-img {
	filter: blur(10px);
	opacity: 1;
	transition: opacity 1000ms, filter 1500ms;
}

.ls-blur-up-img.ls-inview.ls-original-loaded {
	opacity: 0;
	filter: blur(5px);
}