@charset "utf-8";
/* CSS Document */

/*
Theme Name: BlindMatrix
Theme URI: https://www.blindmatrix.co.uk
Description: The BlindMatrix custom Wordpress theme
Version: 1.1
Author: Colin James Firth
Author URI: http://colinjamesfirth.uk
Tags: None
*/


/* -------------------------- RESET -------------------------------- */   

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	text-decoration: none;
	overflow: visible;
	font-weight: normal;
	background-repeat: no-repeat;
}

html {
	background: white;
    font-family: Arial ,sans-serif;
    font-size: 18px;
    width: 100%;
	max-width: 100%;
	overflow: auto;
    background-color: white;
    -ms-overflow-x: hidden;
    overflow-x: hidden;
}

body {
	display: block;
	position: relative;
	margin: 0;
	max-width: 100%;
	width: 100%;
	font-weight: 400;
	color: #4E4E4C;
   	-ms-overflow-x: hidden !important;
	overflow-x: hidden !important;
	line-height: 1;
	font-size: 18px;
}

/* ...now reset main content elements back to a base font-size */
h1, .h1, h2, h3, h4, h5, h6, p, li, figcaption, blockquote, td, label, input, textarea { 
	font-size: 16px; font-size: 1rem; line-height: 1.5; font-weight: 400;
}
a, abbr, em, strong { font-size: 1em; }

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus, :active {
	outline: 0;
}

a {
	font-family: inherit;
	color: inherit;
	font-size: 1em;
	font-weight: inherit;
    outline: 0;
}

a:hover {
	text-decoration: underline;
	color: inherit;
    outline: 0;
}

img { 
	display: block;
	position: relative;
	overflow: hidden; 
	width: 100%;
	height: auto;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}


input, textarea { 
	font-size: 100%;
	font-family: Arial, Helvetica, sans-serif;
}

strong { font-weight: bold; letter-spacing:normal; }

figure {
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	margin-before: 0;
	margin-after: 0;
	margin-start: 0;
	margin-end: 0;
}

input[type="submit"] {
	-webkit-appearance: none;
    -webkit-border-radius:4px; 
    border-radius:4px;
}

* { 
	-moz-box-sizing: border-box; *behavior: url(/objects/scripts/boxsizing.htc);
	-webkit-box-sizing: border-box; *behavior: url(/objects/scripts/boxsizing.htc);
	box-sizing: border-box; *behavior: url(/objects/scripts/boxsizing.htc);
	*behavior: url(/wp-content/themes/thetrainingroom2014/scripts/boxsizing.htc);
}

/* ADDITIONALS */


/* add font-awesome to these elements */
.button:after {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
	font-family: "Source Sans Pro", "Helvetica Neue",Arial, sans-serif;
	font-weight: 300;
}

.wrapper {
	display: block;
	position: relative;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
    padding: 0 2rem;
    padding: 0 3vmin;
}
.wrapper.wrapper-narrow { max-width: 800px; }
.wrapper.wrapper-wide { max-width: 100%; }
.wrapper.wrapper-extra { max-width: 1300px; }

/* for accessibility */
/*a:focus, .button:focus, input[type="submit"]:focus { outline: 2px dotted #999 !important; }*/


/*
@media screen and (max-width: 1250px) {
	.wrapper {
		width: 92%;
        width: calc(100% - 64px);
        width: calc(100% - 4rem);
	}
}

*/

@media screen and (max-width: 980px) {
	html {
        font-size: 14px;
    }
}



/************************/
/* DOCUMENT STYLES */
/************************/

html {
    margin-top: 89px;
}

section#main {
    display: block;
    position: relative;
}
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

a { color: #33beff; text-decoration: none; }
a:hover, a:focus { color: #333; text-decoration: underline; }


h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 1em 0;
}

h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 2em 0 1em 0;
    margin: 2em 0 1em 0;
}



/************************/
/* BUTTONS */
/************************/

.btn {
    display: inline-block;
    position: relative;
    width: auto;
    padding: 0.7em 1.4em;
    border-radius: 0.5rem;
    background: white;
    cursor: pointer;
}
.btn-primary {
    background: white;
    border: 2px solid white;
    color: #d5057a;
    font-size: 1.2em;
    margin: 0;
    font-weight: 700;
}
.btn-primary:hover, .btn-primary:focus {
    border-color: #d5057a;
    background: #d5057a;
    color: white;
    text-decoration: none;
}
.btn-primary.btn-dark {
    background: #d5057a;
    border-color: #d5057a;
    color: white;
}
.btn-primary.btn-dark:hover, .btn-primary.btn-dark:focus {
    border-color: #33beff;
    background: #33beff;
    color: white;
}
.btn-inline {
    font-size: 0.9em;
    padding: 0.2em 0.6em;
    border-radius: 0.2em;
    top: -0.1em;
    margin: 0 0.4em;
}


.home .banner .btn {
    margin: 2em 0;
}




/************************/
/* ADDITIONAL */
/************************/




.video-embed {
	display: block;
    position: relative;
	width: 100%;
	max-width: 500px;
	height: auto;
	border: 4px solid #ccc;
	margin: 2rem auto;
}
.play-video {
    cursor: pointer;   
}



.pop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #f4f4f4;
    background: rgba(0,0,0,0.9);
    cursor: pointer;   
    z-index: 3000;
}
.pop .positioner {
    display: flex;
    position: relative;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
}

.pop .video-embed {
    max-width: 80vw;
}
.pop .video-embed:after {
    content: '\00d7';
    display: block;
    position: absolute;
    z-index: 3000;
    width: 2rem;
    height: 2rem;
    top: -3rem;
    right: 0;
    color: white;
    font-size: 2rem;
    text-align: right;
}





/************************/
/* HEADER AND NAV */
/************************/


header {
    z-index: 100;
    display: block;
    position: fixed;
    top: 0;
    width: 100%;    
    border-bottom: 1px solid #ccc;
    vertical-align: top;
    background: white;
    height: 89px;
}

header .wrapper {
    max-width: 100%;
    padding-left: 2em;
    padding-right: 2em;
}

header a#logo {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 240px;
    max-width: 50%;
    height: 89px;
    margin-right: 2rem;
    display: flex;
    align-items: center;
}
header a#logo img {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    width: 100%;
    height: auto;
    padding: 1rem 0;
}
header nav {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
header nav ul {
    display: block;
    position: relative;
    list-style-type: none;
    padding: 0;
    margin: 0;
}
header nav > ul > li {
    display: inline-block;
    position: relative;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
} 
header nav a {
    display: block;
    line-height: 1;
    font-size: 0.9rem;
    font-weight: 700;
    color: #33beff;
    font-size: 0.9rem;
}
header nav > ul > li > a {
    padding: 2rem 1rem;
    text-transform: uppercase;
}

header nav ul ul {
    z-index: 100;
    display: none;
    position: absolute;
    top: 88px;
    left: 0;
    width: 250px;
    background: white;
    box-shadow: 0 10px 50px rgba(0,0,0,0.1);
}
header nav ul ul li {
    border-top: 1px solid #ccc;
}   
header nav ul ul li a {
    padding: 1.5rem 1rem;
}   

header nav a:hover,
header nav a:focus {
    background: #33beff;
    color: white;
    text-decoration: none;
}
header nav > ul > li:hover ul,
header nav > ul > lia:focus ul {
    display: block;
}


header nav li:hover > a,
header nav li:focus > a {
    background: #33beff;
    color: white;

}

header a.standout-link {
    color: #d5057a;
}   
header a.standout-link:hover,
header a.standout-link:focus {
    background: #d5057a;
    color: white;
}   

.flexbox header .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* navigation responsive breakpoints */
@media screen and (max-width: 1170px) {
    
     header nav {
        position: absolute;
        top: 0;
        right: 0; 
         background: white;
         width: 6rem;
         max-width: 50%;
         height: auto;
     }
    header nav > ul {
        display: block;
        position: absolute;
        top: 89px;
        left: 1000%;
        background: white;
        width: 100%;
        transition: opacity 0.2s;
        opacity: 0;
        box-shadow: 0 10px 50px rgba(0,0,0,0.1);
    }
    header nav:before {
        content: "MENU";
        display: block;
        float: right;
        width: 7em;
        height: 0px;
        padding: 44px 0 44px 0;
        line-height: 0;
        text-align: center;
        color: #33beff;
        font-weight: 400;
    }

    header nav:hover {
        width: 50%;
    }
    header nav:hover:before {
        color: white;
        background: #33beff;
        width: 7em;
    }
    header nav:hover > ul {
        left: 0;
        opacity: 1;
    }

    
    header nav ul li {
        display: block;
        width: 100%;
        border-top: 1px solid #ccc;
    }
    header nav ul li ul {
        display: block;
        position: absolute;
        width: 100%;
        left: 1000%;
        top: 0;
        transition: opacity 0.2s;
        opacity: 0;
    }
    header nav ul li:hover ul {
        left: -100%;
        opacity: 1;
    }
    header nav li.fullonly {
        position: absolute;
        top: 0;
        left: 1000%;
    }
    
    
}

/************************/
/* BANNER */
/************************/


.banner {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    padding: 4rem 0;
    padding: 10vmin 0;
    margin-bottom: 4rem;
    margin-bottom: 10vmin;
    
    text-align: center;
/*    background-image: url(images/bk-tile.png);
    background-repeat: repeat; */
/*    background-image: url(images/bk-harlequin.jpg);
    background-size: cover;
    background-position: center center;
*/    
    background-image: url(images/bk-harlequin.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    

}
.banner h1 {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    padding: auto;
    font-weight: 700;
    color: white;
    text-align: center;    
    font-size: 32px;
    font-size: 2rem;
}
@media screen and (min-height: 600px) and (min-width: 550px) {
    .banner h1 {
        font-size: 3em;
        font-size: 6vmin;
    }
}


.banner h2 {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    padding: auto;
    font-size: 1.5em;
    font-weight: 700;
    color: white;
    text-align: center;
}



/************************/
/* ARTICLE */
/************************/


article {
    font-size: 1rem;
    color: #333;
    margin: 0 auto 6em auto;
    line-height: 1.2;
}

article.copy {
    width: 100%;
    max-width: 800px;
    text-align: left;
}

article.copy h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0 0 0.5em 0;
}
article.copy p + h2 {
    margin-top: 1.5em;   
}

article.copy h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 2em 0 0.5em 0;
}

article p {
    margin-bottom: 1em;
    text-align: left;
}
article p.intro {
    font-size: 1.5em;
}
article ul {
    list-style-type: disc;
    list-style-position: outside;
    margin-bottom: 4em;
}
article ul li {
    margin-left: 1.2em;       
}

ul.features {
    margin: 4rem auto;
    list-style-type: none;   
}
ul.features li {
    margin: 0 0 1em;
    background: #f5f5f5;
    padding: 1em 2em;
    border-radius: 0.5em;
}   

article.copy blockquote.pull-quote {
    
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin: 2rem auto;
    max-width: 80%;
    width: 600px;
    padding: 2rem;
    font-size: 2.5rem;
    font-weight: 300;
}
article.copy blockquote.pull-quote:before {
    content: "\201c";
    font-weight: 700;
    color: #d5057a;
}   
article.copy blockquote.pull-quote:after {
    content: "\201d";
    font-weight: 700;
    color: #d5057a;
}   


/************************/
/* CALLS TO ACTION */
/************************/

ul.page-cta {
    display: block;
    position: relative;
    margin: 3em 0;
    padding: 0;
}
ul.page-cta li {
    display: block;
    padding: 0;
    margin: 0 0 0.5em 0;
}
ul.page-cta a {
    display: inline-block;
    padding: 1em 1.5em;
    background: #f5f5f5;
    border-radius: 0.5em;
    color: #33beff;
}
ul.page-cta a:hover,
ul.page-cta a:focus {
    background: #33beff;
    color: white;
    text-decoration: none;
}





/************************/
/* BUCKETS */
/************************/


.buckets {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    font-size: 0;
}

.bucket {
    display: inline-block;
    position: relative;
    vertical-align: top;
    width: 100%;
    height: auto;
    font-size: 16px;
    text-align: center;
    padding: 1em;
    margin: 0;
}

.buckets-one .bucket { width: 100%; }
.buckets-two .bucket { width: 50%; }
.buckets-three .bucket { width: 33%; }
.buckets-four .bucket { width: 25%; }
.buckets-five .bucket { width: 20%; }

@media screen and (max-width: 800px) {
    .buckets-three .bucket { width: 50%; }
    .buckets-four .bucket { width: 50%; }
}
@media screen and (max-width: 600px) {
    .buckets-two .bucket { width: 100%; }
    .buckets-three .bucket { width: 100%; }
    .buckets-four .bucket { width: 100%; }
    .buckets-five .bucket { width: 33%; }
}



.buckets-one.spaced .bucket { width: 100%; margin-right: 0; }
.buckets-two.spaced .bucket { width: 49%; margin-right: 1%; }
.buckets-three.spaced .bucket { width: 32%; margin-right: 1%;  }
.buckets-four.spaced .bucket { width: 24%; margin-right: 1%;  }
.buckets-five.spaced .bucket { width: 19%; margin-right: 1%;  }

@media screen and (max-width: 800px) {
    .buckets-three.spaced .bucket { width: 49%; margin-right: 1%;  }
    .buckets-four.spaced .bucket { width: 49%; margin-right: 1%;  }
}
@media screen and (max-width: 600px) {
    .buckets-two.spaced .bucket { width: 100%; margin-right: 0; }
    .buckets-three.spaced .bucket { width: 100%; margin-right: 0; }
    .buckets-four.spaced .bucket { width: 100%; margin-right: 0; }
    .buckets-five.spaced .bucket { width: 32%; margin-right: 1%;  }
}


.flexbox .buckets {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
}


.flexbox .bucket.spaced {
    margin-right: 0;
    
}


.bucket img {
    width: 100%;
    max-width: 100px;
    height: auto;
    margin: 0 auto 0em auto;
}
img.circle {
    border-radius: 50%;
}


.panel {
    margin: 4em auto;
    background: #f5f5f5;
    border-radius: 16px;
    padding: 32px;
}
.panel-grey { background: #f5f5f5; }
.panel-blue { background: #33beff; color: white; }
.panel-purple { background: #d5057a; color: white; }





/************************/
/* FOOTER */
/************************/

footer {
    background: #222222;
    color: white;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    padding: 0 2rem;
    padding: 0 3vmin;
}
footer a { color: #33beff; }
footer a:hover, footer a:focus { color: white; }


footer.main-footer div {
    margin: 0 auto;   
    padding: 2em 0;

}
footer.main-footer div.block {
    max-width: 700px;   
}


footer.main-footer div.copyright {
    color: #999;
}
footer.main-footer div.copyright p {
    font-size: 14px;   
}
footer.main-footer p {
    margin-bottom: 0.5em;   
}

footer.main-footer h3 {
    margin: 0 auto 0.2em;
    font-weight: 700;
}

footer.main-cta {
    padding: 4em;
    margin-top: 8em;
    margin-top: 10vh;
    text-align: center;
    background-image: url(images/bk-harlequin.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;   
    
}





/************************/
/* HOMEPAGE */
/************************/




body.home .banner {   
    background-color: #33beff;
    color: white;
    padding: 4em 0 0 0;
    padding: 6vmax 0 0 0;
    margin-bottom: 4em;
    background-image: url(images/bk-harlequin.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
/*body.home .banner:after {*/
body.home .banner .device-group {    
    content: "";
    display: block;
    position: relative;
    width: 350px;
    height: 175px;
    bottom: -20px;
    
    width: 42vmin;
    height: 21vmin;
    bottom: -1vmin;
    
    margin: 0 auto;
    background-image: url(images/header-devices-004.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}



body.home .banner h1 {   
    color: white;
    text-shadow: none;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 auto 0.2em;
    padding: 0;
    font-size: 40px;
    font-size: 2.5rem;
}
@media screen and (min-height: 600px) and (min-width: 550px) {
    body.home .banner h1 {
        font-size: 4em;
        font-size: 7vmin;
    }
}



body.home .banner h2 {
    color: white;
    margin: 0 auto;
    padding: 0;
    line-height: 1.2;
}   



body.home article {
    margin-bottom: 4em;
}
body.home article#features h2 {
    font-weight: 400;
    margin-top: 4rem;

}
body.home article#features h2 a {
    font-weight: 700;
}
body.home article#features h2 + p {
    margin-bottom: 2rem;   
}

body.home article h2, 
body.home article p {
    text-align: center;   
}




.stars {
    display: block;
    position: relative;
    width: 100%;
    text-align: center;
    margin: 0 auto 1em;
}
.stars img {
    display: inline-block;
    margin: 0 0.2em;
    width: 1em;
    height: 1em;
}


body.home .buckets.bucket-features {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}


body.home .bucket-features .bucket {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: #f5f5f5;
    margin-bottom: 0.8em;
    border-radius: 0.5em;
    padding: 2.2rem;

}
body.home .bucket-features h3 {
    margin: 0;
    padding: 0;
    font-size: 1.1rem;
    font-weight: 400;
}
body.home .bucket-features h3.icon-tick:before {
    margin: 1rem auto;
    display: block;
}

body.home .bucket-features img.circle {
  /*  border: 4px solid #33beff; */
}

#compatibility {
    margin: 0 auto;
    text-align: center;   
}
#compatibility article {
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    width: auto;
    background: #d5057a;
    color: white;
    padding: 1.2em 2.4em;
    font-size: 1.5rem;
    border-radius: 0.5em;
}


ul.features li {
    padding: 2em;
}
ul.features h3 {
    margin-top: 0;
}
ul.features p {
    margin-bottom: 0;   
}
.home article#features .cta {
    margin-top: 2rem;   
}
.home article#features .cta .btn {
    margin-bottom: 1rem;   
}

#panel-overview {
    padding: 4rem;
}

#video-home-intro {
	margin-bottom: 0;;
}






/************************/
/* FAQs */
/************************/



h2:target {
    color: #d5057a;
}

h2:target:before {
    content: "";
    display: block;
    position: relative;
    height: 120px;
    margin-top: -120px;
    visibility: hidden;
}

ul.anchor-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul.anchor-menu li {
    margin: 0;
    padding: 1em 0;
    border-top: 1px solid #ccc;
}




/************************/
/* ICONS */
/************************/

.icon {
    font-size: 0;   
}

.icon:before {
    content: "";
    display: inline-block;
    position: relative;
    width: 2rem;
    height: 2rem;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
.icon.icon-tick:before { background-image: url(images/icon-tick-purple.png); }

    
/************************/
/* TABLES */
/************************/

table.comparison {
    width: 100%;
    margin: 4rem auto;
	border-top: 1px solid #ccc;
}

table.comparison .icon:before {
    width: 1rem;
    height: 1rem;
}

table.comparison tr {
     border-bottom: 1px solid #ccc;
}
table.comparison td,
table.comparison th {
    padding: 0.5em 0.2em;
    vertical-align: top;
    text-align: center;
}
table.comparison td:nth-child(1),
table.comparison th:nth-child(1){
    width: 50%;
    text-align: left;
}
table.comparison td:nth-child(2) {
    width: 25%;
}
table.comparison td:nth-child(3) {
    width: 25%;
}
table.comparison th {
    padding: 1.5em 0;
}



#buckets-features-comparison {
	padding-bottom: 2rem;
}

#buckets-features-comparison .bucket h2 {
	text-align: left;
}
#buckets-features-comparison .bucket .sub {
	display: block;
	text-align: left;
}


form#contactform {
    background: #f4f4f4;
    padding: 2rem;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

form#contactform div {
    text-align: left;
}

form input[type="text"],
form input[type="password"], 
form input[type="email"],
form textarea {
    display: block;
    position: relative;
    width: 100%;
    border: 1px solid #ccc;
    outline: 0;
    box-shadow: none;
    padding: 0.5em 1em;
    margin-bottom: 1em;
}
form textarea {
    min-height: 10rem;   
}
form label {
    display: block;
    position: relative;
    margin: 0 0 0.3em;
}
form label:hover,
form label:focus {
    text-decoration: underline;
    cursor: pointer;
}

.erroralert {
    color: #f40;	
}

.g-recaptcha {
    margin-bottom: 3rem;   
}