/* https://www.google.com/fonts#UsePlace:use/Collection:Roboto:300,400,500,700,900|Roboto+Condensed:400,300,700 */
/* 'Roboto:300,400,500,700,900:latin', 'Roboto+Condensed:400,300,700:latin' */

/* hides the spin-button for firefox & chrome */
input[type=number].no-spinner { -moz-appearance: textfield; }
input[type=number].no-spinner::-webkit-inner-spin-button,
input[type=number].no-spinner::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/*
==============================================
foundation over-rides
==============================================
*/
button.hide,
.button.hide {
	display: none;
}
  
input.nomargin,
.button.nomargin {
	margin-bottom:0 !important;
}
button,
.button {
	background-image:url(../img/noise-light.png);
	font-family: "Roboto", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}
table button,
table .button {
	background-image:none;
}
small.error {
	background-color:#f04124 !important;
}
button.button.primary,
a.button.primary {
	text-shadow:1px 1px 0 #a87903;
}

button.button.wire,
a.button.wire {
	background:rgba(34,34,34, 0.5);
	background-image:url(../img/noise-light.png);
	border:1px solid #ffc21f;
	color:#ffc21f;
}
button.button.wire i,
a.button.wire i {
	opacity:0.5;
	padding-left:0.5em;
}
button.button.wire:hover i,
a.button.wire:hover i {
	opacity:1;
}

/*
==============================================
helper classes
==============================================
*/
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

/*
==============================================
website
==============================================
*/
html {
	overflow-y: scroll;
}
body {
	background-color:#222;
	color:#fff;
	font-family: "Roboto", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
}
p {
	font-weight:300;
}
hr {
	height:1px;
	background-color:#aaa;
}
h1, h2, h3, h4, h5, h6 {
	color:#ffc21f;
	font-family: "Roboto Condensed", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-weight:400;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
h4 { font-size: 1rem; }
h5 { font-size: .83rem; }
h6 { font-size: .75rem; }

h1.big {
	color:#ffc21f;
	font-size:3.5rem;
	font-weight:300;
	line-height: 1;
	margin-bottom:1rem;
	/* margin-left:-4rem; */
	margin-left:0;
	margin-top:-1rem;
}
	
small.medium {
	font-size:75%;
	line-height:1.2;
}

div.alert-box.success h1,
div.alert-box.success h2,
div.alert-box.success h3,
div.alert-box.success h4,
div.alert-box.success h5,
div.alert-box.success h6 {
	color:#fff;
}

button.cta,
input.button.cta,
a.button.cta {
	font-size:1.25em;
	width:100%;
}

label {
	color:#fff;
}
label.radio.button {
	margin-top:0.125rem;
}
label.radio.button input {
	margin:0;
}

a.help {
    color: #4d4d4d;
    display: inline-block;
}
a.help:hover, a.help:focus {
    color: #2ba6cb;
}
a.help i.has-tip {
    border-bottom: 0 none;
}
span.tooltip {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div.wrapper {
	margin:1em auto;
}

/*
==============================================
headers
==============================================
*/
header.header-primary {
	background-image:url(../img/noise-light.png);
}
header.header-primary a.logo img {
	margin-top:1em;
	max-height:40px;
	max-width:320px;
}
header.header-primary a.cart {
	margin-bottom:0;
	margin-top:1.5em;
}
#header-nav-trigger {
	display:inline-block;
	font-size:2rem;
	margin-top:0.5rem;
}

/*
==============================================
nav primary
==============================================
*/
nav.nav-primary {
	background:#13171a;
	background-image:url(../img/noise-light.png);
	margin:0.5em 0 0 0;
	position:relative;
	text-align:center;
	z-index:2;
}
nav.nav-primary a {
	border-bottom:2px solid #13171a;
	color:#fff;
	display:inline-block;
	font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight:300;
	margin:0 0.5em;
	padding:0.25em 0.75em;
}
nav.nav-primary a:hover {
	border-color:#ffc21f;
	color:#ffc21f;
}

/* active links */
body.page-products a.nav-products, /* custom single page */
body.page-about a.nav-about,
body.page-contact a.nav-contact,
body.page-gallery a.nav-gallery,
body.page-current-projects a.nav-current-projects,
body.page-news a.nav-news,
body.page-case-studies a.nav-case-studies,
body.page-downloads a.nav-downloads,
body.page-colours a.nav-colours {
	border-color:#ffc21f;
	color:#ffc21f;	
}

/* small menu */
nav.nav-primary.small-active {
	background:#222;
	background-image:url(../img/noise-light.png);
	display:block !important;
	margin-top:-0.5rem;
}
nav.nav-primary.small-active a {
	border-top:1px solid #2f2f2f;
	border-bottom:2px solid #13171a !important;
	display:block;
	padding:0.5em 0;
	position:relative;
	text-align:left;
	text-transform:capitalize;
}
nav.nav-primary.small-active a:before {
	color:#ffc21f;
	content: "\f0da";
	display: block;
	font-family: 'FontAwesome';
	font-size:inherit;
	font-style:normal;
	font-weight:300;
	opacity:0.6;
	position: absolute;
	right:0;
	top:0.25rem;
}

/*
==============================================
content-main
==============================================
*/
div.content-main {
	background-image:url(../img/bg.png);
	background-position:top left;
	background-repeat:no-repeat;
	box-shadow: inset 0px 10px 16px 0px rgba(0,0,0,0.75);
	font-family: "Roboto", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-weight:300;
	padding-bottom:2rem;
	padding-top: 2rem;
}

/*
==============================================
footer
==============================================
*/
footer.footer-primary {
	background-image:url(../img/noise-light.png);
	font-weight:300;
}
footer.footer-primary p {
	font-size:0.75em;
	opacity:0.75;
	margin:0.85em 0 0.85em 0;
}
footer.footer-primary span {
	color:#ffc21f;
}


/*
==============================================
modals
==============================================
*/
#modal-user-management {
    max-width: 20em;
}

/*
==============================================
article lists
==============================================
*/
div.article-list {
	margin-bottom:1em;
	margin-top:1.5em;
}
div.article-list h3 {
	color:#fff;
	font-size:1.5em;
}	
div.article-list article {
	border-bottom:1px solid #444;
	margin-bottom:1.25rem;
}
div.article-list article:last-child {
	border-bottom:none;
}
div.article-list article h2 {
}
div.article-list article img {
	display:block;
	margin-bottom:1rem;
	margin-top:0.5rem;
}
/* div.article-list article a.button {
	background:rgba(34,34,34, 0.5);
	border:1px solid #ffc21f;
	color:#ffc21f;
}
div.article-list article a.button i {
	opacity:0.5;
	padding-left:0.5em;
} */


/*
==============================================
media queries
==============================================
*/
@media only screen and (max-width:40em) { /* max-width 640px, mobile-only styles */
	h1.big {
		font-size:2.5rem;
		line-height: 1.1;
		margin-left:0;
		margin-top:-1.5rem;
		text-align:center;
	}
	header.header-primary a.cart {
		margin-bottom:1rem;
		margin-top:0.5em;
	}
}
@media only screen and (max-width: 64em) { /* max-width 1024px, <= medium screens */
}
@media only screen and (min-width: 40.063em) { /* min-width 641px */
}	
@media only screen and (min-width: 40.063em) and (max-width: 64em) { /* min-width 641px and max-width 1024px */
	h1.big {
		font-size:3.5rem;
		line-height: 1.1;
		margin-left:0;
		margin-top:-1.5rem;
	}
}
@media only screen and (width: 768px) { /* iPad portrait · width: 768px */
}	
@media only screen and (min-width: 40.063em) { /* min-width 641px, > mobile screens */
}
@media only screen and (max-width: 64em) { /* max-width 1024px, <= medium screens */
}		
@media only screen and (min-width: 64.063em) { /* min-width 1025px, >= large screens */
}

/*
==============================================
blockUI
==============================================
*/
div.blockMsg {
	border:0;
	color: #fff;
	cursor: wait;
	left: 30%;
	padding:0;
	text-align:center;
    top: 30%;
    width:40%;
}
div.blockOverlay {
	background:#000;
	opacity:0.7;
}
@media only screen and (max-width:40em) {
	div.blockMsg {
		left: 10%;
		top: 20%;
		width: 80%;	
	}
}



/*
==============================================
notice bar
==============================================
*/
div.notice-bar {
	box-shadow:0 0 9px #333;
	min-height:3.5em;
	padding:1em 2.5em;
	position:fixed;
	text-align:center;
	visibility:hidden;
	width:100%;
	z-index:9999;
}
div.notice-bar.alert {
	background:#f04124;
	color:#fff;
	text-shadow:0 1px 1px #681b0f;
}
div.notice-bar.success {
	background:#43ac6a;
	color:#fff;
	text-shadow:0 1px 1px #368a55;
}
div.notice-bar div.message {
}
div.notice-bar a.close {
	color:#fff;
	font-size:2em;
	font-weight:700;
	position:absolute;
	right:1rem;
	top:0.125em;
}

/*
==============================================
animations
==============================================
*/
.blink {
	-webkit-animation: blink steps(1) 1s infinite;
	animation: blink steps(1) 1s infinite;
}
@keyframes blink {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}
@-webkit-keyframes blink {  
	0% { opacity: 1.0; }
	50% { opacity: 0.0; }
	100% { opacity: 1.0; }
}

.slideDown{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;						
}
@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}
	50%{
		transform: translateY(8%);
	}
	65%{
		transform: translateY(-4%);
	}
	80%{
		transform: translateY(4%);
	}
	95%{
		transform: translateY(-2%);
	}			
	100% {
		transform: translateY(0%);
	}		
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
	}
	50%{
		-webkit-transform: translateY(8%);
	}
	65%{
		-webkit-transform: translateY(-4%);
	}
	80%{
		-webkit-transform: translateY(4%);
	}
	95%{
		-webkit-transform: translateY(-2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}

.slideOut {	
	animation-name: slideOut;
	-webkit-animation-name: slideOut;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: hidden !important;
	transition: visibility 1s ease;
}
@keyframes slideOut {
	0% {
		transform: translateY(0%);
	}
	100% {
		transform: translateY(-100%);
	}
}
@-webkit-keyframes slideOut {
	0% {
		transform: translateY(0%);
	}
	100% {
		transform: translateY(-100%);
	}
}