html, button, input, select, textarea { color: #222; }
body { font-size: 1em; line-height: 1.4; }
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }
.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0;}
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
img { vertical-align: middle; }
a{ text-decoration: none; }
body {font: 16px/26px 'Roboto';}
.wrapper { width: 1026px; /* 1140px - 10% for margins */ margin: 0 auto;  }

p, a {
	font-weight: lighter;
}

/*----------------------------------------------------------------------
COLOURS
----------------------------------------------------------------------*/

.header-container {
    background: #37474F;
}

.strap-container{
	background: #D32F2F;
}

.main-container {
	background: #37474F;
	color: #eeeeee;
}

.video-container {
	background: #546E7A;
	color: #eeeeee;
}

.screens-container {
	background: #37474F;
	color: #eeeeee;
}

.reviews-container {
	background: #D32F2F;
	color: #37474F;
}

.store-container {
	background: #37474F;
	color: #eeeeee;
}

.footer-container {
	background: #111016;
	color: #eeeeee;
}

/* Spans as achors on the page */

.anchor {
	display: block;
	position: relative;
	top: -48px; /* same as height of navigation */
	visibility: hidden;
}


/*----------------------------------------------------------------------
MENU
----------------------------------------------------------------------*/
	nav {
		top: 0px; left: 0px;
		width: 100%;
		background-color: #111016;
		text-align: center;
		position: fixed;
		z-index: 9999;
	}

	nav > .nav-menu {
		display: inline-block;
		vertical-align: top;	/* remove weird space under inline-block */
	}

	/* Hide ddmenu input and labels */
	.nav-menu > input { display: none; }
	.nav-menu > .ddmenu-button { display: none; }
				
	.nav-menu-items > a {
		color: #6d6c75;
		text-decoration: none;
		line-height: 100%;
	}
	
	.nav-menu-items > a:hover {
		color: #dedee0;
	}

	/* Social icons */
	
	nav > .nav-contact {
		display: inline-block;
		vertical-align: top;	/* remove weird space under inline-block */
	}
	
	.nav-contact > .nav-icon {
		color: #6d6c75;
	}

	.nav-icon:hover {
		color: #dedee0;
	}

	/* Menu */

	nav {
		height: 48px;
		white-space: nowrap;
	}

	nav > .nav-menu {
		margin-top: 10px;
	}

	.nav-menu-items > a {
		display: inline-block;
		vertical-align: top;	/* remove weird space under inline-block */	
		height: 24px;
		padding: 2px 26px 0px 26px;
		font-size: 26px;
		border-right: 1px solid #403f45;
	}

	.nav-menu-items > .last-menu {
		border-right: none;
	}

	.nav-menu-items > hr {
		display: none;
	}

	/* Social icons */

	nav > .nav-contact {
		margin-top: 8px;
		margin-left: 30px;

		font-size: 32px;
		font-family: 'Mono Social Icons Font';
	    -webkit-text-rendering: optimizeLegibility;
	    -moz-text-rendering: optimizeLegibility;
	    -ms-text-rendering: optimizeLegibility;
	    -o-text-rendering: optimizeLegibility;
	    text-rendering: optimizeLegibility;
	    -webkit-font-smoothing: antialiased;
	    -moz-font-smoothing: antialiased;
	    -ms-font-smoothing: antialiased;
	    -o-font-smoothing: antialiased;
	    font-smoothing: antialiased;

	    color: #6d6c75;
	}
	
	.nav-contact > .nav-icon {
		margin: 0px 7px;
	}

/*----------------------------------------------------------------------
HEADER
----------------------------------------------------------------------*/

.header-container .logo{
	position: relative;
	max-width: 500px; /* Adjust Width for Logo if needed */
	margin: 0 auto -1.0em;
}

.header-container .logo img{
	width: 100%;
}

.header-container .wrapper{
	text-align: center;
	padding-top: 10px;
}

#masthead{
	margin-top: 48px;
	height: 250px;
	/*
	background: url(../images/bg_tile.png);
	*/
}

.header-container .title
{
	padding-top: 10px;
	padding-bottom: 20px;
	font-family: 'Arial Black', sans-serif;
	font-size: 20px;
	color: #D32F2F;
}

/*----------------------------------------------------------------------
STRAP CONTAINER
----------------------------------------------------------------------*/
.strap-container {
	padding-top: 20px;
	padding-bottom: 20px;
	font-family: 'League Gothic', sans-serif;
	font-size: 64px;
	line-height: 70px;
	color: #37474F;
}

/*----------------------------------------------------------------------
MAIN CONTAINER
----------------------------------------------------------------------*/
.main-container {
	
	padding-bottom: 20px;
}

.main-container h1, h2 {
	font-size: 48px;
	color: #D32F2F;
}

.double_features {
	float: left;
	width: 48%;
	text-align: left;
	font-weight: lighter;
}

.double_features_right {
	float: right;
	width: 48%;
	text-align: left;
	font-weight: lighter;
}

/*----------------------------------------------------------------------
SCREEN CONTAINER
----------------------------------------------------------------------*/
.screens-container {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}

/*----------------------------------------------------------------------
VIDEO CONTAINER
----------------------------------------------------------------------*/
.video-container {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}

.vc {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.vc iframe,
.vc object,
.vc embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*----------------------------------------------------------------------
REVIEWS CONTAINER
----------------------------------------------------------------------*/
.reviews-container {
	text-align: left;

	font-family: 'League Gothic', sans-serif;
	font-size: 32px;
	line-height: 34px;
	color: #37474F;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.reviews-container h3{
	text-align: center;
}

.reviews-container .tc {
	text-align: center;
}

.reviews-container .reviews-fix{
	text-align: left;
	padding-top: 20px;
	padding-bottom: 20px;
	height: 200px;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.reviews-container .reviews{
	position: relative;
 	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

/*----------------------------------------------------------------------
STORE CONTAINER
----------------------------------------------------------------------*/
.store-container {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}

.store-container h1{
	font-size: 48px;
	line-height: 48px;
	color: #D32F2F;
}

.store-container  img{
	margin-right: 20px;
	margin-left: 20px;
}

.quartet {
	float: left;
	width: 25%;
	text-align: center;
}

/*----------------------------------------------------------------------
FOOTER
----------------------------------------------------------------------*/
.footer-container {
	text-align: center;
	padding-top: 20px;
}

.social {
	font-size: 64px;
	font-family: 'Mono Social Icons Font';
    -webkit-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    -ms-text-rendering: optimizeLegibility;
    -o-text-rendering: optimizeLegibility;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

.triple {
  	float: left;
  	width: 33%;
  	text-align: center;
}

.triple img {
	vertical-align: top;
	margin: 0 auto;
}

.copywrite {
	text-align: center;
	font-size: small;
	color: #ffffff;
	margin-top: 20px;
}



/*----------------------------------------------------------------------
LAYOUT
----------------------------------------------------------------------*/
.main-left {
	float: left;
	max-width: 63%;
}

.main-right {
	float: right;
	width: auto;
}

/*----------------------------------------------------------------------
FLEXISLIDER
----------------------------------------------------------------------*/
.slider{
	width: auto;
	display: inline-block; 
}

.slider .flexslider{
	width: 320px;
}

.slider .flexslider .slides li { 
	text-align: center; 
}

.slider .flexslider .slides img { 
	
}

/* ==========================================================================
   11. Media Queries 1140px
   ========================================================================== */
@media only screen and (max-width: 1140px) {
	.wrapper { width: 768px; /* 1140px - 10% for margins */ margin: 0 auto;  }

	.main-left, .main-right {
		float: none;
		margin: 0 auto; 
	}

	.main-left {
		max-width: 80%;
	}

	.nav-menu-items > a {
		padding: 2px 15px 0px 15px;
		font-size: 20px;
	}

	nav > .nav-contact {
		margin-top: 8px;
		margin-left: 2px;

		font-size: 32px;
	}
	
	.nav-contact > .nav-icon {
		margin: 0px 1px;
	}

	.social {
		font-size: 48px;
	}
}



/* ==========================================================================
   12. Media Queries 768
   ========================================================================== */
   
@media only screen and (max-width: 768px) { 
	.wrapper{
		width: 480px;
		margin: 0 auto; 
	}

	.header-container .wrapper{
		padding-top: 15px;
	}

	.main-container article{
		padding-top: 1.3em;
		padding-bottom: 1.3em;
		margin: 0;
		border-bottom: 1px solid #ebebeb;
	}

	.triple {
	  float: none;
	  width: auto;
	  padding-bottom: 2em;
	  border-bottom: 1px solid #ebebeb;
	}

	.double {
		float: none;
		width: auto;
		padding-bottom: 2em;
		border-bottom: 1px solid #ebebeb;
	}

	.quartet {
		float: none;
		width: auto;
		padding-bottom: 2em;
		border-bottom: 1px solid #ebebeb;
	}

	.last {
	  border-bottom: none;
	}

	.strap-container {
		font-size: 48px;
		line-height: 54px;
	}

	nav {
		top: 0px; left: 0px;
		width: 100%;
		background-color: #111016;
		text-align: center;
		position: fixed;
		z-index: 9999;
	}

	nav > .nav-menu {
		display: inline-block;
		vertical-align: top;	/* remove weird space under inline-block */
	}

	/* Hide ddmenu input and labels */
	.nav-menu > input { display: none; }
	.nav-menu > .ddmenu-button { display: none; }
				
	.nav-menu-items > a {
		color: #6d6c75;
		text-decoration: none;
		line-height: 100%;
	}
	
	.nav-menu-items > a:hover {
		color: #dedee0;
	}

	/* Social icons */
	
	nav > .nav-contact {
		display: inline-block;
		vertical-align: top;	/* remove weird space under inline-block */
	}
	
	.nav-contact > .nav-icon {
		color: #6d6c75;
	}

	.nav-icon:hover {
		color: #dedee0;
	}

	nav {
		height: 32px;
	}

	nav > .nav-menu {
		margin-top: 8px;
	}

	.nav-menu-items > a {
		height: 16px;
		padding: 0px 5px 0px 5px;
		font-size: 16px;
	}

	nav > .nav-contact {
		margin-top: 4px;
		margin-left: 1px;

		font-size: 18px;
	}
	
	.nav-contact > .nav-icon {
		margin: 0px 1px;
	}

	#masthead{
		margin-top: 32px;
	}

	.reviews-container .reviews-fix{
		height: 250px;
	}

	.double_features {
		float: none;
		width: auto;
		text-align: left;
		font-weight: lighter;
	}

	.double_features_right {
		float: none;
		width: auto;
		text-align: left;
		font-weight: lighter;
	}
}



/* ==========================================================================
   13. Media Queries 480
   ========================================================================== */

@media only screen and (max-width: 480px) {
	.wrapper{
		max-width: 320px;
		width: 100%;
		margin: 0 auto; 
	} 

	.main-container article{
		padding-top: 1.3em;
		padding-bottom: 1.3em;
		margin: 0;
		border-bottom: 1px solid #ebebeb;
	}

	.header-container h3{
		font-size: 1.2em;
	}


	.slider{
		background-size: 300px 597px;
		height: 597px;
		width: 300px;
	}
	@media (min--moz-device-pixel-ratio: 1.5),
		(-o-min-device-pixel-ratio: 3/2),
		(-webkit-min-device-pixel-ratio: 1.5),
		(min-device-pixel-ratio: 1.5),
		(min-resolution: 1.5dppx) {
	.fader{
		background-size: 300px 597px;
	}
	}
	.slider .flexslider1{
		width: 240px;
		height: 428px;
		position: relative;
		top: 86px;
		margin-bottom: 0;
		margin-right: auto;
		margin-left: auto;
		padding-bottom: 50px;
		left: 1px;
	}

	nav > .nav-menu {
		position: absolute;
		top: 0px; right: 0px;
		width: 50px; height: 100%;
		-webkit-backface-visibility: hidden;
	}

	.nav-menu > .ddmenu-button {
		display: none;
		width: 100%; height: 100%;
		background-size: 20px 20px;
		background-repeat: no-repeat;
		background-position: 10px 0px;
		cursor: pointer;
	}

	.nav-menu > #ddmenu-button-1 { background-image: url(../images/nav-hamburger-icon.png); }
	.nav-menu > #ddmenu-button-2 { background-image: url(../images/nav-close-icon.png); }

	/* Show hamburger or close button */
	.nav-menu > #nav-ddmenu-control-1:checked ~ #ddmenu-button-2 { display: block; }
	.nav-menu > #nav-ddmenu-control-2:checked ~ #ddmenu-button-1 { display: block; }

	/* Show dropdown menu */
	.nav-menu > #nav-ddmenu-control-1:checked ~ .nav-menu-items { display: block; }

	.nav-menu > .nav-menu-items {
		display: none;
		position: absolute;
		top: 50px; right: 0px;
		background-color: rgba(0,0,0,0.87);
		z-index: 999;
		padding: 10px 0px 14px 0px;
	}
				
	.nav-menu-items > a {
		display: block;
		width: 230px;
		font-size: 28px;
		padding: 22px 0px 22px 0px;
	}
	
	.nav-menu-items > hr {
		border: none;
		display: block;
		color: #403f45;
		background-color: #403f45;
		width: 44px;
		margin: 0 auto;
		height: 1px;
	}

	/* Social icons */

	nav > .nav-contact {
		margin-top: 2px;
		margin-left: 1px;

		font-size: 32px;
	}
	
	.nav-contact > .nav-icon {
		margin: 0px 10px;
	}

	#masthead{
		height: 180px;
	}

	.strap-container {
		font-size: 40px;
		line-height: 46px;
	}

	.reviews-container .reviews-fix{
		height: 320px;
	}
	
	.main-container h1, h2 {
		font-size: 28px;
		text-align: center;
	}

	.store-container h1{
		font-size: 32px;
	}
}


/*----------------------------------------------------------------------
CLEARFIX
----------------------------------------------------------------------*/
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.last{ border: none!important; margin-right: 0!important; }

/*----------------------------------------------------------------------
FONTS
----------------------------------------------------------------------*/


@font-face {
    font-family: 'Mono Social Icons Font';
    src: url('../font/MonoSocialIconsFont-1.10.eot');
    src: url('../font/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
         url('../font/MonoSocialIconsFont-1.10.woff') format('woff'),
         url('../font/MonoSocialIconsFont-1.10.ttf') format('truetype'),
         url('../font/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
    src: url('../font/MonoSocialIconsFont-1.10.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Regular */
@font-face {
    font-family: 'League Gothic';
    src: url('../font/leaguegothic-italic-webfont.eot');
    src: url('../font/leaguegothic-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/leaguegothic-italic-webfont.woff') format('woff'),
         url('../font/leaguegothic-italic-webfont.ttf') format('truetype'),
         url('../font/leaguegothic-italic-webfont.svg#league_gothic_italicregular') format('svg');
    font-weight: normal;
    font-style: italic;

}

/* Italic */
@font-face {
    font-family: 'League Gothic';
    src: url('../font/leaguegothic-regular-webfont.eot');
    src: url('../font/leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/leaguegothic-regular-webfont.woff') format('woff'),
         url('../font/leaguegothic-regular-webfont.ttf') format('truetype'),
         url('../font/leaguegothic-regular-webfont.svg#league_gothicregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Condensed */
@font-face {
    font-family: 'League Gothic Condensed';
    src: url('../font/leaguegothic-condensed-regular-webfont.eot');
    src: url('../font/leaguegothic-condensed-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/leaguegothic-condensed-regular-webfont.woff') format('woff'),
         url('../font/leaguegothic-condensed-regular-webfont.ttf') format('truetype'),
         url('../font/leaguegothic-condensed-regular-webfont.svg#league_gothic_condensed-Rg') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Condensed Italic */
@font-face {
    font-family: 'League Gothic Condensed';
    src: url('../font/leaguegothic-condensed-italic-webfont.eot');
    src: url('../font/leaguegothic-condensed-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/leaguegothic-condensed-italic-webfont.woff') format('woff'),
         url('../font/leaguegothic-condensed-italic-webfont.ttf') format('truetype'),
         url('../font/leaguegothic-condensed-italic-webfont.svg#league_gothic_condensed_itaRg') format('svg');
    font-weight: normal;
    font-style: italic;
}