/*
Theme Name:   BA Clic Components v2
Description:  BA Clic Components Theme by Lairdesign
Author:       Lairdesign
Author URI:   BAclicbox.com
*/

body {
	font-family: "roboto",sans-serif;
	border-top: 10px solid #ced332;
	font-size: 14px;
	background-color:#FFF;
	background-size: cover;
	background-repeat: no-repeat;
}

h4 {
	font-size: 1.2em;
	font-weight: bold;
}

.home #siteintro {
	padding: 1em 0 0 0;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(216,216,216,1) 100%);
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(216,216,216,1) 100%);
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(216,216,216,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d8d8d8',GradientType=0 );
}

#siteintro {
    padding: 1em 0;
    border: 1px solid #eaeaea;
    margin-bottom: 1em;
}
#mobile-nav .button {
    padding: 1em !important;
}

nav#mobile-nav {
	margin-top: 1em;
	display: none;
}

nav#mobile-nav ul {
	list-style: none;
	background-color: #333;
	margin: 0;
}

nav#mobile-nav ul li {
	padding: 1em;
	display: block;
	border-bottom: 1px solid #464545;
}

nav#mobile-nav ul li a {
	color: #fff;
}

nav#mobile-nav .button.secondary {
	background-color: transparent;
	text-align: left;
	padding: 1em;
	border-radius: 0;
	margin: 0;
}

img.hpw16 {
    display: none;
}

video#video {
    width: 100%;
}

#videoMessage {
    margin-top: 1em;
    padding: 1em;
}

#siteintro i.fa.fa-bars {
    font-size: 2em;
    margin: 10px 0 20px;
    color: #ced332;
}

li {
    font-size: 1em;
    color: #667377;
}

img.hp-cabinet {
	display: none;
}

img.hp-cabinet {
	position: relative;
	max-width: 100%;
	z-index: 1;
	top: -2em;
}

p {
	color: #657276;
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 1em;
}

h2 {
	color: #575656;
	font-size: 1.4285714285714286em;
	font-weight: bold;
	margin-top: 1em;
}

h3 {
	color: #E56900;
	font-weight: bold;
	font-size: 1.1428571428571428em;
}

/* Main Nav */

ul#menu-main-navigation {
	text-align: left;
	position: relative;
	top: 1em;
	margin-left: 0;
}

ul#menu-main-navigation li {
	list-style: none;
	display: inline;
	padding: 6px;
	margin: 0;
}

ul#menu-main-navigation li.button.secondary {
	padding: 1em 4em;
}

ul#menu-main-navigation li a {
	display: inline-block;
	color: #657276;
	font-weight: bold;
	font-size: 1.2857142857142858em;
}

ul#menu-main-navigation li.button.secondary {
	font-size: 0.7777777777777778em;
}

ul#menu-main-navigation li.button a {
	color: #ffffff;
}

.button {
	color: #fff;
	border-radius: 2em;
	padding: 1em 3em;
}

.button.orange {
	background-color: #E56900;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
	display: block;
}

.button.orange i {
	color: #FFF;
	font-size: 1.3333333333333333em;
	vertical-align: inherit;
	margin-right: 0.3333333333333333em;
}

.button.greygreen {
	background-color: #3c4542;
	color: #ced332;
	font-weight: bold;
	font-size: 18px;
	text-align: center;
	display: block;
}

.button.greygreen i {
	color: #fff;
	font-size: 1.3333333333333333em;
	vertical-align: inherit;
	margin-right: 0.3333333333333333em;
}


#above-fold {
	margin-top: 1em;
	position: relative;
}

#features {
	background-color: #fff;
}

i.fa.fa-check-square-o {
	font-size: 1.3em;
}

p.lead {
    color: #657276;
    font-size: 16px;
    line-height: 28px;
    margin: 28px 0;
}

.negative, .negative .large-6 {
	margin: 0;
	padding: 0;
}

.negative .columns {
	padding: 0;
}

.textbox {
	background-color: #fff;
	padding: 1em;
}

.alignright {
    float: right;
    margin-left: 10px;
}

.alignleft {
    float: left;
    margin-right: 10px;
}

#videos .textbox p {
	font-size: 1em;
	line-height: 1.5em;
}

a.video-link {
	color: #007759;
	font-weight: bold;
}

a.video-link i { 
	color: #575656;
}

#videos {
	position: relative;
}

#videos h2 {
	/* margin-top: -1em; */
	display: inline-block;
	margin-bottom: 1em;
}

#features {
	background-color: #fff;
	padding: 3em 0;
}

.button.secondary {
	background-color: #657276;
	color: #fefefe;
}

footer {
    background-color: #ced332;
    color: #333;
    margin-top: 4em;
}

footer p, footer a, footer h3, footer tel {
    color: #333 !important;
}

footer a:hover {
    color: #fff;
    border-bottom: 1px solid #fff;
}

footer section.copyright p a, footer section.copyright p {
	color: #fff !important;
}

footer p {
	margin-bottom: 0;
}

section.mainfoot, section.copyright {
	padding: 2em 0;
}

section.copyright {
	background-color: #333;
}

.secondary-nav {
	display: none;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0;
	height: 0;
	background-color: #fff;
	border: 1px solid #eaeaea;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
}

.button {
	padding: 1em 3em !important;
}

.tick {
	font-size: 1.125em;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.5em;
}
		
.tick li {
	margin: 0 0 0.5em 0;
	padding: 0;
	font-weight: bold;
}
		
.tick i {
	margin-right: 5px;
	color: #E56900;
}

.sb-module {
	margin: 1em 0 3em 0;
}

.sb-module a {
    font-weight: bold;
}

table#overview {
	table-layout: fixed;
}

table#overview tr {
	border: 1px solid #eaeaea;
}

table#overview th, table#overview td {
	border-left: 1px solid #eaeaea;
}

table#overview img {
	width: 70%;
}

.colors img {
	border: 1px solid #eaeaea !important;
	margin-bottom: 1em;
}

/*#overview tr td:nth-child(n+6):nth-child(-n+9) {
	background: #cde4df;
}

#overview tr td:nth-child(n+10):nth-child(-n+11) {
	background: #e5f1ee;
}*/

#overview tr td:nth-child(6) {
	border-left: 1px solid #aaa;
}

#overview tr th:nth-child(1), #overview tr td:nth-child(10) {
	border-left: 1px solid #aaa;
}

#overview tr th:nth-child(1) {
	border-right: 1px solid #aaa;
}

#overview tr td:nth-child(11) {
	border-right: 1px solid #aaa;
}


/* Clicbox Page tabs */

ul#clicbox-video-tabs {
	margin-top: 1em;
}

ul#clicbox-video-tabs li {
	margin-right: 1%;
}

#clicbox-video-tabs .tabs-title > a[aria-selected='true'] {
	background: #4c5558 !important;
}

#clicbox-video-tabs .button {
	background: #657276;
}

#clicbox-video-tabs .tabs-panel {
	padding: 0;
}

#clicbox-video-tabs.tabs {
	border: none !important;
}

#clicbox-video-tabs.tabs-content {
	border-top: 1px solid #e6e6e6;
	margin-bottom: 1em;
}

#clicbox-tabs.tabs-title > a {
	color: #657276 !important;
}

#clicbox-tabs.tabs-title > a[aria-selected='true'] {
	background: #f1f1f1 !important;
}

#clicbox-tabs.tabs-content {
	margin-bottom: 3em;
}

#clicbox-tabs p.lead {
	line-height: 25px;
	font-size: 18px;
}

.column img {
	margin-bottom: 1em;
	border: 1px solid #f1f1f1;
}

/**/


/* Become a Stockist */

img.watch {
    position: relative;
    top: -3em;
}

.stockist {
    background: #fafafa;
    border: 1px solid #eaeaea;
	padding:1em;
}

.wpcf7-form-control-wrap {
    margin-bottom: 2em;
}

#wpcf7-f40-o1 > form > div.row > div > div > div > div > div > div,
#wpcf7-f27-p6-o1 > form > div.row > div:nth-child(2) > div > div > div > div {
    text-align: center;
    margin: 0 auto;
}

.stockist h3 {
    color: #657276;
}

/**/

a.wpsl-directions {
	float: right;
}

.mainfoot h3 {
    margin-top: 1em;
}

article.news-post {
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 2em;
}

article.news-post h2 {
    margin-top: 10px;
}

article.news-post section.meta p {
    font-size: 12px;
}

#related_posts, section.content {
    margin-top: 1em;
}

section.content p:first-child {
    font-size: 20px;
    line-height: 28px;
}

article.news-post header {
    border-bottom: 1px solid #eaeaea;
}

.wexhibit p {
    font-weight: bold;
    font-size: 22px;
    line-height: 28px;
}

.row.we-social .fa {
    font-size: 3em;
}

.row.we-social {
    text-align: center;
    margin: 0;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 2em;
}

.row.we-social i.fa.fa-facebook-square {
    color: #3b5998;
}

.row.we-social i.fa.fa-twitter-square {
    color: #55acee;
}

.row.we-social i.fa.fa-youtube-square {
    color: #bb0000;
}

.row.we-social h2 {
    text-transform: uppercase;
    margin-bottom: 1em;
}

span.wpcf7-list-item {
    margin: 0 !important;
}

.button.disabled, .button[disabled] {
    opacity: 1;
}

[type='checkbox'] {
    margin: 0;
}

/* Medium and up */
@media screen and (min-width: 40em) {
	
	#siteintro {
	    padding: 1em 0 0 0;
	    border: 1px solid #eaeaea;
	    margin-bottom: 1em;
	}
	
	.wexhibit p {
	    font-size: 30px;
	    line-height: 34px;
	    font-weight: bold;
	}
	
	.row.we-social .fa {
	    font-size: 6em;
	}
	
	.mainfoot h3 {
	    margin-top: 0;
	}
	
	#siteintro img.logo {
	    margin-top: 1em;
	}

	ul#menu-main-navigation li {
	    padding: 8px;
	    margin: 0;
	}
	
	ul#menu-main-navigation li a {
	    font-size: 1em;
	}
	
	ul#menu-main-navigation li.button.secondary {
	    font-size: 0.7777777777777778em;
	    padding: 10px 20px !important;
	}
	
	ul#menu-main-navigation {
	    text-align: right;
	    margin-left: 0;
	}
	
	#above-fold {
	    margin-top: 3em;
	    position: relative;
	    width: 100%;
	    height: 400px;
	    /*background: url(img/pattern.png);*/
	    background-repeat: repeat-y;
	    overflow: hidden;
	}

	#videoBlock {width: 100%; height: 360px; position: absolute; top: 0; left: 0;}
	
	#video_overlays {	
		position:absolute;
		float:left;
		width:100%;
		min-height:700px;
		/*background: url(http://baclicbox.com/wp-content/themes/clic-components-v2/img/pattern.png);*/
		background-repeat: repeat;
		z-index:3000;
	}
	
	#videoMessage {
	    width: 45%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    padding: 1em;
	    background-color: white;
	    opacity: 1;
	    margin: 2em 0 0 2em;
	    text-align: center;
		z-index: 10000 !important;
	}
	video#video {
	    width: 100%;
	}
	#videoMessage *{padding:0.4em; margin:0}
	#videoMessage {color:white;z-index:99 }
	#videoMessage h1{font-size: 3em;color:#ffffff;text-align:center;}
	#videoMessage h2{font-size: 2.5em;color:#ffffff;text-align:center;}
	#videoMessage h3{font-size: 2.0em;color:#ffffff;text-align:center;}
	
	p.lead {
	    font-size: 15px;
	    line-height: 21px;
	    margin: 20px 0;
	}
	
	.button.orange {
		background-color: #E56900;
		font-weight: bold;
		font-size: 18px;
		text-align: center;
		display: block;
		width: auto;
		margin: 0 auto;
		z-index: 1;
		position: absolute;
		top: 8em;
		padding: 1em 5em;
		left: 57%;
	}
	
	.button.greygreen {
		background-color: #3c4542;
		font-weight: bold;
		font-size: 18px;
		text-align: center;
		display: block;
		width: auto;
		margin: 0 auto;
		z-index: 1;
		position: absolute;
		top: 8em;
		padding: 1em 5em;
		left: 57%;
	}
	
	img.hp-cabinet {
		display: block;
	}
	

	
	#siteintro {
	    padding: 1em 0;
	    border: none;
	    margin-bottom: 2em;
	}
	
	.home #siteintro {
	    margin-bottom: 0;
	}
	
}


/* inbetweeny styles */
@media (min-width:1024px) and (max-width:1390px) {

	#above-fold {
	    height: 460px !important;
	}
	
	#videoMessage {
	    width: 35% !important;
	    margin: 2em 0 0 2em !important;
	}
	
	ul#menu-main-navigation li a {
	    font-size: 1em !important;
	}
	
	ul#menu-main-navigation li {
	    font-size: 16px !important;
	}
	
	ul#menu-main-navigation {
		top: 0 !important;
	}
	
}


/* inbetweeny styles */
@media (min-width:640px) and (max-width:890px) {

	#above-fold {
	    height: 288px !important;
	    margin-top: 2em;
	}
	
	#videoMessage {
	    width: 40% !important;
	    margin: 1em !important;
	}
	
	ul#menu-main-navigation li a {
	    font-size: 1em !important;
	}
	
	ul#menu-main-navigation {
		top: 0 !important;
	}
	
	#videoMessage * {
	    padding: 0.2em 0;
	    margin: 0;
	}
	
	ul#menu-main-navigation li.button.secondary {
	    font-size: 0.7777777777777778em;
	    padding: 10px !important;
	}
	
	ul#menu-main-navigation {
	    top: 10px !important;
	}
	
}
      
	  
/* Large and up */
@media screen and (min-width: 64em) {
	
	#siteintro img.logo {
	    margin-top: 0;
	}
	
	#above-fold {
	    position: relative;
	    width: 100%;
	    height: 620px;
	    /*background: url(img/pattern.png);*/
	    background-repeat: repeat-y;
	    overflow: hidden;
	    background-color: #d4d4de;
	    background: #eeedef;
	    background: -webkit-linear-gradient(left, #eeedef , #d4d4de);
	    background: -o-linear-gradient(right, #eeedef, #d4d4de);
	    background: -moz-linear-gradient(right, #eeedef, #d4d4de);
	    background: linear-gradient(to right, #eeedef , #d4d4de);
	}
	
	
	
	#videoMessage {
	    width: 25%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    padding: 1em;
	    background-color: white;
	    opacity: 1;
	    margin: 8em 0 0 2em;
	    text-align: center;
		z-index: 10000;
	}
	
	p.lead {
		font-size: 18px;
		line-height: 34px;
	}
	
	img.hpw16 {
		display: block;
	    z-index: 100;
	    position: relative;
	    top: -50px;
	    left: 350px;
	}
	
	.wexhibit p {
	    font-size: 34px;
	    line-height: 40px;
	    font-weight: bold;
	}
	
	ul#menu-main-navigation {
	    text-align: right;
	    top: 1em;
	    margin-left: 0;
	}
	
	ul#menu-main-navigation li {
	    padding: 1em 0.5em;
	    margin: 0;
	    font-size: 18px;
	}
	
	ul#menu-main-navigation li.button.secondary {
	    font-size: 16px;
	    margin-left: 10px;
	}
	
	img.logo {
	    width: 100%;
	    position: relative;
	    top: 3em;
	}
	
	#videos {
		position: relative;
		background-color:#BCBDBF;
	}
	
	#videos h2 {
		margin: 0 0 2em 0;
		display: inline-block;
	}
	
	.minus-right {
		margin-right: 0;
		padding-right: 0;
	}

	.home-video-wrap {
		-webkit-box-shadow: 3px 3px 7px 0px rgba(0,0,0,0.5);
		-moz-box-shadow: 3px 3px 7px 0px rgba(0,0,0,0.5);
		box-shadow: 3px 3px 7px 0px rgba(0,0,0,0.5);
		margin-bottom: 10px;
	}
	
	.video-wrap {
		/*top: -135px;*/
		overflow: hidden;
		width: 100%;
		/* overflow: hidden; */
		position: relative;
		margin: 1em 0 2em 0;
	}
	
	.secondary-nav {
		display: block;
		overflow: hidden;
		margin-top: 15px;
	}
	
	.secondary-nav ul {
		float: right;
	}
	
	.secondary-nav li {
		float: left;
		list-style: none;
		margin-left: 16px;
	}
	
	.secondary-nav li a {
		font-weight: bold;
	}
	
}