/*
Theme Name: 	Insette
Theme URI: 		http://www.insette.com
Description: 	Bespoke theme for Insette
Version: 		1.0
Author: 		Thunder Doodle
Author URI: 	http://thunderdoodle.co.uk
*/

/*
===========================
CONTENTS:

01 Sensible defaults
02 Typography
03 General layout
04 Media queries 
===========================
*/

/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "reset.css";

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ }
body 				{ background:#fff; /* Don't forget to style your body to avoid user overrides */ }
::-moz-selection 	{ background:#0000FB; color:#f5f5f5; }
::selection 		{ background:#0000FB; color:#f5f5f5; }

.clearfix:after 	{ visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
* html .clearfix    { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* ---------------------------------------------------------------------------------------------------------- 
02 Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/*

11 / 16	= 		0.6875em 		(11px equivalent)
12 / 16	= 		0.75em	 		(12px equivalent)
14 / 16	= 		0.875em 		(14px equivalent)
15 / 16 = 		0.937em 		(15px equivalent)
16 / 16	= 		1em 			(16px equivalent)
18 / 16 = 		1.125em 		(18px equivalent)
20 / 16 = 		1.25em 			(20px equivalent)
21 / 16 = 		1.3125em 		(21px equivalent)
22 / 16 = 		1.375em 		(22px equivalent)
24 / 16 = 		1.5em 			(24px equivalent)
28 / 16 = 		1.75em 			(28px equivalent)
30 / 16 = 		1.875em 		(30px equivalent)
32 / 16 = 		2em 			(32px equivalent)
36 / 16 = 		2.25em 			(36px equivalent)
42 / 16 = 		2.625em 		(42px equivalent)
44 / 16 = 		2.75em 			(44px equivalent)
48 / 16 = 		3em 			(48px equivalent)
50 / 16 = 		3.125em 		(50px equivalent)
54 / 16 = 		3.375em 		(54px equivalent)
60 / 16 = 		3.75em 			(60px equivalent)
72 / 16 = 		4.5em 			(72px equivalent)
82 / 16 = 		5.125em 		(82px equivalent)

*/

body,
input,
textarea 			{ font-family: 'Montserrat', sans-serif; color: #4B4B4B; font-size: 16px; line-height: 1em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

h1, 
h2, 
h3, 
h4, 
h5, 
h6 					{ font-family: 'Roboto Condensed', sans-serif; letter-spacing: 1px; font-weight: 700; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

h1					{ text-transform: uppercase; letter-spacing: 2px; font-size: 4em; line-height: 1.2em; }
h2					{ font-weight: 400; color: #0000FB; text-transform: uppercase; letter-spacing: 2px; font-size: 2.25em; line-height: 1.2em; }
h2.section-title	{ background: url(../img/logo-wrapper.png) no-repeat 0 50%; background-size: contain; margin: 0 0 80px 0; text-align: center; clear: both; }
h2.section-title span { display: inline-block; background: #fff; padding: 0 20px; }
h2.section-title.grey span { background: #ececec; }
h2.section-title.product-name { margin: 30px 0; }
.product-single .product-blurb h2.section-title	{ margin: 0 0 40px 0; }
.product-single .product-blurb .blurb-content-wrapper h2.section-title	{ margin: 0 0 10px 0; }
h3					{ color: #0000FB; text-transform: uppercase; letter-spacing: 2px; font-size: 2.25em; line-height: 1.2em; }
h3.section-title	{ background: url(../img/logo-wrapper.png) no-repeat 0 50%; background-size: contain; margin: 0 0 60px 0; }
h3.section-title span { display: inline-block; background: #fff; padding: 0 20px; margin: 0 0 0 -20px; }
h4					{ color: #0000FB; text-transform: uppercase; letter-spacing: 2px; font-weight: 400; font-size: 1.75em; line-height: 1.2em; }
h4.section-title	{ background: url(../img/h4-line.png) no-repeat 0 50%; background-size: contain; margin: 0 0 50px 0; }
h4.section-title span { display: inline-block; background: #fff; padding: 0 20px 0 0; }
h5					{ font-size: 1.25em; line-height: 1.2em; }
h5.product-name		{ font-size: 1em; text-transform: uppercase; color: #0000FB; text-align: center; font-weight: 400; margin: 26px 0 0 0; }
h5.product-name a 	{ font-weight: 400; }
h6					{ font-size: 1em; line-height: 1.2em; }

p,
li					{ font-size: 1em; line-height: 1.6em; }

.blurb-content p 	{ font-size: 1.25em; line-height: 1.7em; margin: 0 0 1.7em 0; }
.dedication .blurb-content p { font-size: 1.125em; line-height: 1.7em; margin: 0 0 1.7em 0; }
p.caption { margin-top: 10px; }
.blurb-content p.double-margin { margin: 0 0 3.4em 0; }
.blurb-content p.lead { font-size: 1.5em; color: #0000FB; }
.blurb-content ul	{ margin: 0 0 40px 0; }
.blurb-content li 	{ font-size: 1.25em; line-height: 1.7em; margin: 0 0 0.5em 0; }
.blurb-content.col5 p,
.blurb-content.col4 p 	{ font-size: 1.1em; }
.blurb-content.col5 li,
.blurb-content.col4 li 	{ font-size: 1.1em; }

i.fas				{ display: inline-block; margin: 0 20px 0 0; color: #0000FB; }

.feature-msg p 		{ font-size: 1.5em; line-height: 1.9em; }

.font-robo			{ font-family: 'Roboto Condensed', sans-serif; letter-spacing: 2px; text-transform: uppercase; }

a					{ font-weight: 700; text-decoration: none; color: #0000FB; }
a:hover				{ color: #0000FB; text-decoration: underline; }

a.block-btn			{ font-family: 'Roboto Condensed', sans-serif; letter-spacing: 2px; text-transform: uppercase; display: inline-block; padding: 22px 30px; background: #0000FB; color: #fff; }
a.block-btn:hover	{ text-decoration: none; background: #f5f5f5; color: #0000FB; }
a.block-btn.white	{ background: #fff; color: #0000FB; }
a.block-btn.white:hover	{ background: #0000FB; color: #fff; }
a.block-btn.wide 	{ display: block; }

a.keyline-btn			{ font-family: 'Roboto Condensed', sans-serif; letter-spacing: 2px; text-transform: uppercase; display: block; padding: 22px 30px; background: #fff; color: #0C4CFC; border: 2px solid #0C4CFC; text-align: center; }
a.keyline-btn:hover	{ text-decoration: none; background: #0C4CFC; color: #fff; }

/* ---------------------------------------------------------------------------------------------------------- 
03 General layout stuff -------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

.col1	{ width: 5.98%; }
.col2	{ width: 14.52%; }
.col3	{ width: 23.07%; }
.col4	{ width: 31.62%; }
.col5	{ width: 40.17%; }
.col6	{ width: 48.71%; }
.col6.with-gutter	{ width: 51.29%; }
.col7	{ width: 57.26%; }
.col8	{ width: 65.81%; }
.col9	{ width: 74.35%; }
.col10	{ width: 82.90%; }
.col11	{ width: 91.45%; }
.col12	{ width: 100%; }
.col50	{ width: 50%; }

.gutter-left { margin-left: 2.56%; }
.gutter-right { margin-right: 2.56%; }
.gutter-bottom { margin-bottom: 2.56%; }

.pad-left-1 { padding-left: 12.98%; }
.pad-right-20 { padding-right: 3.5%; }

.outer	{ width: 100%; }
.inner	{ width: 1170px; margin: 0 auto; }

.left	{ float: left; }
.right	{ float: right; }

.centered { margin-left: auto; margin-right: auto; }
.sixteen-nine { width: 100%; padding-top: 56.25%; }

.placeholder-image { display: block; width: 100%; padding-top: 71%; background: url(img/placeholder.png) no-repeat 50% 50% #CBCED1; background-size: 50% auto; }

/* HEADER */
#header {  }
#header .logo-wrapper { text-align: left; padding: 40px 0 40px 30px; background: url(../img/logo-wrapper.png) no-repeat 0 50%; background-size: contain; }
#header h1 { display: inline-block; width: 191px; height: 128px; margin: 0; text-align: center; background: #fff; }
#header h1 a { display: inline-block; overflow: hidden; width: 171px; height: 128px; text-indent: -2000px; background: url(../img/logo.png) no-repeat; background-size: contain; }

.desktop-menu-wrapper { text-align: center; font-weight: 700; position: absolute; top: 40%; right: 0; background: #fff; }
.menu-header { padding:0 0 40px 0; }
.menu-header li { display: inline-block; font-size: 1.125em; margin: 0; padding: 0 0 0 30px; }
.menu-header li a { display: block; padding: 10px 0 20px 0; color: #0000FB; border-bottom: 1px solid #ffffff; }
.menu-header li a:hover,
.menu-header li.current-menu-item a { color: #0000FB; border-bottom: 1px solid #0000FB; text-decoration: none; }

.btn-menu { display: none; padding: 10px; float: right; margin: 40px 0 0 0; border: 1px solid #0C4CFC; font-size: 16px; }
.btn-menu:hover { text-decoration: none; }
.btn-menu.open { background: #0C4CFC; color: #fff; }
.btn-menu.open i.fas { color: #fff; }

.mobile-menu-wrapper  { display: none; clear: both; background: #0C4CFC; padding: 0; }
.menu-header-mobile { margin: 0 0 20px 0; }
.menu-header-mobile li { width: 100%; float: none; padding: 0; border-bottom: 1px solid #fff; }
.menu-header-mobile li:last-child { border-bottom: none; }
.menu-header-mobile li a { display: block; background: #0C4CFC; color: #fff; padding: 15px 0; }
.menu-header-mobile li a:hover { background: #0C4CFC; text-decoration: none; }

/* FOOTER */

#footer { background: #ECECEC; padding: 60px 0; }
#footer .inner { border-top: 1px solid #0000FB; padding: 30px 0 0 0; }
.footer-menu-wrapper { text-align: left; font-weight: 700; }
.menu-footer { padding: 0; margin: 0 0 50px 0; }
.menu-footer li { display: inline-block; font-size: 1.125em; margin: 0 30px 0 0; padding: 0; }
.menu-footer li a { display: block; padding: 0; color: #0000FB; border-bottom: 1px solid #ececec; }
.menu-footer li a:hover,
.menu-footer li.current-menu-item a { color: #0000FB; border-bottom: 1px solid #0000FB; text-decoration: none; }

/* SUBFOOTER */

#subfooter { background: #ECECEC; padding: 60px 0; text-align: center; }

/* SLIDER */

.slide-wrapper { width: 100%; padding-top: 49.2%; overflow: hidden; }
.slider ul.slide-list { position: absolute; top: 0; left: 0; width: 100%; }
.slider ul.slide-list li { width: 100%; padding-top: 49.2%; background: #ececec; }
.slider ul.slide-list li .slide-image { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: cover !important; background-repeat: no-repeat !important; }
.slider ul.slide-list li .slide-details { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 4.7%; }
.slider ul.slide-list li .slide-title { font-size: 5.125em; line-height: 1em; color: #fff; font-weight: 700; font-style: italic; display: block; }
.slider ul.slide-list li .slide-subtitle { font-size: 5.125em; line-height: 1em; color: #fff; font-style: italic; display: block; }
.slider ul.slide-list li .slide-btn { position: absolute; bottom: 9.4%; }

/*.slider ul.slide-list li.slide-01 .slide-image { background-image: url(../img/home-banners/banner-1@2x.jpg); }
.slider ul.slide-list li.slide-02 .slide-image { background-image: url(../img/home-banners/banner-2@2x.jpg); }
.slider ul.slide-list li.slide-03 .slide-image { background-image: url(../img/home-banners/banner-3@2x.jpg); }*/

.slider-nav { text-align: center; padding: 30px 0; }
.slider-nav li { display: inline-block; padding: 0 10px; }
.slider-nav li a { background: #C1C1C1; display: block; border-radius: 15px; width: 15px; height: 15px; overflow: hidden; text-indent: -2000px; }
.slider-nav li a.selected { background: #0100FE; }

/* FULL-WIDTH-BANNER */

.full-width-banner { padding-top: 40%; background-color: #ececec; background-repeat: no-repeat !important; background-size: cover !important; }

/* BOXED-BANNER */

.boxed-banner { background-color: #ececec; background-repeat: no-repeat !important; background-size: cover !important; min-height: 300px; }
.boxed-banner img { width: 100%; height: auto; }

/* FULL-WIDTH-MAP-BANNER */

.full-width-map-banner { height: 720px; margin: 0 0 20px 0; background-color: #ececec; background-repeat: no-repeat !important; background-size: cover !important; }

/* GENEREAL BLURB */

.general-blurb { padding: 70px 0; text-align: center; }
.general-blurb .blurb-image-wrapper { margin: 0 0 60px 0; }
.general-blurb .blurb-image-wrapper img { width: 100%; height: auto; }
.general-blurb .dedication { padding: 70px 0; margin-top: 60px; text-align: left; border-top: 1px solid #0000FB; }

/* GENERAL BLURB WITH IMAGE */

.general-blurb-with-image { padding: 90px 0 180px 0; }
.general-blurb-with-image .blurb-image-wrapper { padding: 20px 0; }
.general-blurb-with-image .blurb-image-wrapper img { width: 100%; height: auto; }

.general-blurb-multi-column { padding: 90px 0 140px 0; }

/* PRODUCT BLURB */

.product-blurb { padding: 0; text-align: left; }
.product-blurb .blurb-image-wrapper { margin: 0 0 20px 0; background: #f5f5f5; min-height: 300px; }
.product-blurb .blurb-image-wrapper img { width: 100%; height: auto; }
.blurb-content-wrapper { padding: 0; }
.blurb-content { padding: 0 20px 0 0; }
.dedication .blurb-content { padding: 0; }
.dedication .blurb-content p { padding: 0 20px 0 0; }
.product-single h4.section-title { margin: 0 0 10px 0; font-size: 1.2em; }
ul.variant-list { padding: 0 25px 0 0; margin: 0 0 20px 0; }
ul.variant-list li { float: left; margin: 0 25px 0 0; font-size: 1.2em; }
.back-to-products { padding: 100px 0; }

/* FEATURE-MSG */

.feature-msg .col8 { padding: 60px 0 140px 0; text-align: center; }
.feature-msg.blue .inner { background: #0C4CFC; color: #fff; }
.feature-msg.blue .col8 { padding: 100px 0 100px 0; }

/* PRODUCT LIST */

.product-list { margin: 0 0 30px 0; }
.product-list li.product { margin-bottom: 2.56%; }
.product-list li.hide { display: none; }
.product-list li a.product-image-link { display: block; width: 100%; padding-top: 100%; background: #fff; position: relative; overflow: hidden; }
#product-grid .product-list li a.product-image-link { padding-top: 174%; }
.product-list li a.product-image-link:hover .product-image { transform: scale(1.05); }
.product-image { display: block; width: 100%; padding-top: 100%; position: absolute; top: 0; left: 0; background-size: cover !important; background-repeat: none !important; transition: transform .2s ease-in-out; }
#product-grid .product-image { padding-top: 174%; }
.product-image.lazy { display: none; }
.product-details { display: block; width: 100%; text-align: center; padding: 0; }
.product-details .product-name { font-family: 'Roboto Condensed', sans-serif; display: block; text-transform: uppercase; letter-spacing: 2px; font-size: 3em; line-height: 1.2em; color: #fff; }
.products .product-details .product-name { font-size: 2em; line-height: 1.2em; }
.product-btn { margin: 20px 0 0 0; display: block; padding: 22px 30px; color: #FFF; background: #0000FB; }
.product-btn:hover { color: #0000FB; background: #FFF; text-decoration: none; }
.product-gutter-sizer { width: 2.56%; }

.product-filters { padding: 0 0 60px 0; text-align: center; }
.product-filters li { display: inline-block; padding: 0 30px; }
.product-filters li a { display: block; padding: 10px 0 20px 0; color: #0000FB; border-bottom: 1px solid #ffffff; }
.product-filters li a.selected { color: #0000FB; border-bottom: 1px solid #0000FB; text-decoration: none; }

.product-list li.col4:nth-child(3),
.product-list li.col4:nth-child(6),
.product-list li.col4:nth-child(9),
.product-list li.col4:nth-child(12) { margin-right: 0 }

.product-list li.col3:nth-child(4),
.product-list li.col3:nth-child(8),
.product-list li.col3:nth-child(12),
.product-list li.col3:nth-child(16) { margin-right: 0 }

/* CONTACT */

.head-office-details-col { width: 47.36%; padding: 0 0 30px 0; }


/* ---------------------------------------------------------------------------------------------------------- 
04 Media queries (using a mobile-first approach) ------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@media screen and (max-width:1190px) {

	.inner	{ width: 960px; }
	
	body, input, textarea { font-size: 14px; }
	
}

@media screen and (max-width:990px) {
	
	.inner	{ width: 92%; }
	
	.desktop-menu-wrapper { display: none; }
	.btn-menu { display: block; }
	.mobile-menu-wrapper.show  { display: block; }
	
	#header .logo-wrapper { text-align: left; padding: 20px 0; background: none; float: left; }
	#header h1 { width: 80px; height: 60px; }
	#header h1 a { width: 80px; height: 60px; }
	
	.full-width-banner { padding-top: 80%; }
	
	.feature-msg .col8 { padding: 60px 0 140px 0; }
	.feature-msg.blue .col8 { padding: 60px 0 60px 0; }
	
	body, input, textarea { font-size: 12px; }
	.feature-msg p 		{ font-size: 1.3em; line-height: 1.9em; }
	
	.product-details .product-name { font-size: 2em; }
	.products .product-details .product-name { font-size: 1.5em; }
	
	.full-width-map-banner { height: 400px; }
	#map_canvas { height: 400px !important; }
	
	.general-blurb-multi-column { padding: 40px 0; }
	.head-office-details-col { width: 100%; }
	
	/*.product-blurb .blurb-image-wrapper { padding: 10px; }*/

	.product-blurb .blurb-image-wrapper { min-height: 20px; }
}

@media screen and (max-width:800px) {
	
	.col1,
	.col2,
	.col3,
	.col4,
	.col5,
	.col6,
	.col6.with-gutter,
	.col7,
	.col8,
	.col9,
	.col10,
	.col11,
	.col12,
	.col13,
	.col14,
	.col15,
	.col16 ,
	.col50		{ width: 100%; }
	
	.pad-left-1 { padding-left: 0; }
	
	.product-list li.col3 { width: 31.62%; }
	.product-list li.col4 { width: 31.62%; }
	
	.product-list li { overflow: hidden; }
	
	h2.section-title { margin: 0 0 40px 0; }
	h3.section-title { margin: 0 0 40px 0; }
	.general-blurb-with-image { padding: 40px 0; }
	.general-blurb-with-image .blurb-image-wrapper { padding: 0 0 40px 0; }
	
	.blurb-content.col5 p,
	.blurb-content.col4 p 	{ font-size: 1.25em; }
	.blurb-content.col5 li,
	.blurb-content.col4 li 	{ font-size: 1.25em; }
	
	#footer { padding: 40px 0; text-align: center; }
	#subfooter { padding: 40px 0 0 0; }
	.menu-footer { margin: 0 0 40px 0; }
	.menu-footer li { display: block; text-align: center; margin: 0 0 10px 0; }
	.menu-footer li a { display: inline-block; }
	
	.product-filters { padding: 40px 0; }
	.product-filters li { display: block; padding: 0 10px; font-size: 1.25em; }
	.product-filters li a { display: inline-block; padding: 15px 0 0 0; }
	.product-filters li a.selected {  }
	
	.back-to-products { padding: 60px 0 0 0; }
	.product-blurb { padding: 40px 0 70px 0; }
	.feature-msg .col8 { padding: 40px 0; }
	.feature-msg.blue .col8 { padding: 40px 20px; }

	.boxed-banner { overflow: hidden; }
	.boxed-banner img { height: 300px; width: auto; margin-left: 50%; transform: translateX(-50%); }

	.slide-wrapper { padding-top: 100%; }
	.slider ul.slide-list li { padding-top: 100%; }
	.slider ul.slide-list li.slide-01 .slide-image { background-image: url(../img/home-banners/01-square.jpg) !important; background-size: cover; }
	.slider ul.slide-list li.slide-02 .slide-image { background-image: url(../img/home-banners/02-square.jpg) !important; background-size: cover; }
	.slider ul.slide-list li.slide-03 .slide-image { background-image: url(../img/home-banners/03-square.jpg) !important; background-size: cover; }
	.slider ul.slide-list li .slide-title,
	.slider ul.slide-list li .slide-subtitle { font-size: 4.5em; }
}

@media screen and (max-width:640px) {
	.product-list li.col3 { width: 48.71%; }
	.product-list li.col4 { width: 48.71%; }
}

@media screen and (max-width:420px) {
	.product-list li.col3 { width: 100%; }
	.product-list li.col4 { width: 100%; }
	
	.product-list li a { padding-top: 50%; }
	.product-overlay { padding-top: 50%; }
	.product-image { padding-top: 50%; }
}