/*
|-----------------------------------------------------------------------------------------------------------------
| IMPORTS
|-----------------------------------------------------------------------------------------------------------------
*/
@import'grid.css';
@import'component.css';
@import'../fonts/stylesheet.css';

/*
|-----------------------------------------------------------------------------------------------------------------
| MIXINS
|-----------------------------------------------------------------------------------------------------------------
*/


/*
|-----------------------------------------------------------------------------------------------------------------
| STRUCTURE
|-----------------------------------------------------------------------------------------------------------------
*/
body {
	position: relative;
	font-size: 14px;
	font-family: 'interstatelight';
	color: #FFFFFF;
	background: #000;	
}
.row.no-gutters {
	margin-right: 0;
	margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
	padding-right: 0;
	padding-left: 0;
}

/*
|-----------------------------------------------------------------------------------------------------------------
| TYPOGRAPHY
|-----------------------------------------------------------------------------------------------------------------
*/
h1.text-giant {
	font-family: 'interstateblack';
	font-size: 40px;
	line-height: 1;
	color: #FFFFFF;
	text-transform: uppercase;
}
h2 {
	font-size: 20px;
	color: #ffffff;
	opacity: .85;
	
}
.opacity-80 {
	color: rgba(255,255,255, 0.75);
}
.opacity-60 {
	color: rgba(255,255,255, 0.5);
}

/*
|-----------------------------------------------------------------------------------------------------------------
| LISTS
|-----------------------------------------------------------------------------------------------------------------
*/
.persuade ul {
	list-style: none;
	list-style-image: url('../img/circle-orange.png');
}

/*
|-----------------------------------------------------------------------------------------------------------------
| LINKS
|-----------------------------------------------------------------------------------------------------------------
*/
a {
	color: #E44D26;
}
a:hover{
	color: #FFFFFF;
}
a:active,
a:focus {
	outline: none;
}

/*
|-----------------------------------------------------------------------------------------------------------------
| FORMS
|-----------------------------------------------------------------------------------------------------------------
*/
input.form-control,
input.form-control:focus,
textarea.form-control,
textarea.form-control:focus {
    border:none;
    border-radius: 0;
    box-shadow: none;
   -webkit-box-shadow: none;
   -moz-box-shadow: none;
   -moz-transition: none;
   -webkit-transition: none;
}

/*
|-----------------------------------------------------------------------------------------------------------------
| BULLET FRAME
|-----------------------------------------------------------------------------------------------------------------
*/

.bullet_frame {
	background-color: black;
	border-radius: 1em;
	padding-left: 1em;
	padding-top: 1em;
	border-color: #101010;
	border-size: 3px;

}


/*
|-----------------------------------------------------------------------------------------------------------------
| IMAGES
|-----------------------------------------------------------------------------------------------------------------
*/

/*
|-----------------------------------------------------------------------------------------------------------------
| VIDEO
|-----------------------------------------------------------------------------------------------------------------
*/
.video {
	margin-bottom: 10px;
}

.videoWrapper {
	position:relative;
	padding-bottom:56.25%;
	padding-top:25px;
	height:0;
}
.videoWrapper iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/*
|-----------------------------------------------------------------------------------------------------------------
| BUTTONS
|-----------------------------------------------------------------------------------------------------------------
*/
.btn-grey {
	color: #FFFFFF;
	background: #E44D26;
	border: none;
	border-radius: 0;
	-webkit-transition: all 0.4s linear;
	transition: all 0.4s linear;
	-webkit-transform: translateZ(0);
}
/*
|-----------------------------------------------------------------------------------------------------------------
| COLOURS
|-----------------------------------------------------------------------------------------------------------------
*/
.orange {
	background: #E44D26;
}
.text-orange {
	color: #E44D26;

}

/*
|-----------------------------------------------------------------------------------------------------------------
| MISC
|-----------------------------------------------------------------------------------------------------------------
*/
.social-media {
	position: absolute;
	top: -200px;
	right: 0;
	background: #FFFFFF;
	display: inline-block;
	z-index: 1000;
/*	-webkit-transition: all 0.4s linear;
	transition: all 0.4s linear;
	-webkit-transform: translateZ(0);*/

	^ sets container to follow scroll ^
}
.social-media-small {
	width: 15px;
	height: 15px;
	margin-bottom:20px;
}
li.social-media-menu a {
	display: inline;
	text-align: right;
	float: right;
}
.social-media img {
	width: 45px;
	height: 45px;
	padding: 10px;
	
}
/*
|-----------------------------------------------------------------------------------------------------------------
| PORTFOLIO
|-----------------------------------------------------------------------------------------------------------------
*/
.headinghoverbox {
    font-family: 'interstateregular';
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 100;
    text-align: left;
    color: #FFF;
    line-height: 100%;
    margin: 10px;
    width: 90%;
}

/*
|-----------------------------------------------------------------------------------------------------------------
| HOME CSS
|-----------------------------------------------------------------------------------------------------------------
*/
.home {
	position: relative;
}
.home-banner {
	background-image:url('../img/iron.jpg');
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	padding: 100px 0 150px 0;
}
.home-text-position {
	position: absolute;
	top: 260px;
}

/*
|-----------------------------------------------------------------------------------------------------------------
| BADGER CSS
|-----------------------------------------------------------------------------------------------------------------
*/
.badger {
	position: relative;
}
.badger-banner {
	background: none;
	padding: 80px 0 150px 0;
}

/*
|-----------------------------------------------------------------------------------------------------------------
| INSIST CSS
|-----------------------------------------------------------------------------------------------------------------
*/
.insist {
	position: relative;
}
.insist-banner {
	padding: 80px 0 150px 0;
}


/*
|-----------------------------------------------------------------------------------------------------------------
| INSIST CSS
|-----------------------------------------------------------------------------------------------------------------
*/
.work {
	position: relative;
}
.work-banner {
	padding: 80px 0 150px 0;
}

/*
|-----------------------------------------------------------------------------------------------------------------
| PERSUADE CSS
|-----------------------------------------------------------------------------------------------------------------
*/
.persuade {
	position: relative;
}
.persuade-banner {
	padding: 80px 0 150px 0;
}

/*
|-----------------------------------------------------------------------------------------------------------------
| BELEAGUER CSS
|-----------------------------------------------------------------------------------------------------------------
*/
.beleaguer {
	position: relative;
}

.beleaguer-banner {
	background-image:url('../img/madbadgers.jpg');
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center top;
	padding: 80px 0 200px 0;
	max-width:;
}

.staff-name {
	font-size: 18px;
	margin-top: 0;
}
/*
|-----------------------------------------------------------------------------------------------------------------
| COAX CSS
|-----------------------------------------------------------------------------------------------------------------
*/
.coax {
	position: relative;
}
.coax-banner {
	margin-top: 0px;
	padding: 80px 0 150px 0;
	background: url('../img/mainb.jpg') no-repeat center center;
}


/*
|-----------------------------------------------------------------------------------------------------------------
| IMAGE CSS
|-----------------------------------------------------------------------------------------------------------------
*/
.image {
	position: relative;
}
.image-banner {
	background-image:url('../img/den.jpg');
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	padding: 250px 0 250px 0;
}
.image-text-position {
	position: absolute;
	top: 260px;
}




.wrap-player{
    height:auto;
    width:100%;
    overflow:hidden;
}


/*|-----------------------------------------------------------------------------------------------------------------
| BOOTSTRAP OVER-RIDES
|-----------------------------------------------------------------------------------------------------------------
*/
.navbar-fixed-top .navbar-collapse, 
.navbar-fixed-bottom .navbar-collapse {
    max-height: 390px;
}
.navbar > .container .navbar-brand, 
.navbar > .container-fluid .navbar-brand {
    margin-top: -15px;
    margin-left: -15px;
}
.navbar-inverse {
    background-color: rgba(0,0,0,0.85);
    border-color: #000;
}

.navbar-nav > li {
    text-transform: uppercase;
}

.navbar-nav > li > a {
	font-size: 16px;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: right;
}
.navbar-nav > li > a img {
    text-align: right;
}
.navbar-nav > li > a:hover {
	color: #E44D26 !important;
	-webkit-transition: all 0.4s linear;
	transition: all 0.4s linear;
	-webkit-transform: translateZ(0);
}


/* Extra small devices (phones, less than 768px) 
/* No media query since this is the default in Bootstrap */

/* ALL EXCEPT MOBILE - adjusts black top and bottom of sections*/ 
@media (min-width: 768px) {

	.home-banner,
	.badger-banner,
	.insist-banner,
	.work-banner,
	.persuade-banner,
	.beleaguer-inner,
	.coax-banner {
		padding: 160px 0 160px 0;
	}

	.staff-name {
		margin-top: 260px;
	}

}

/* Small devices (tablets, 768px and up) */
/*@media (min-width: 768px) {*/
@media (min-width: 768px) and (max-width: 978px) {	

	body {
		font-size: 14px;
	}

	.col-sm-15 {
		width: 20%;
		float: left;
	}

	h1.text-giant {
		font-size: 80px;
	}

	h2 {
		font-size: 30px;
		text-shadow: 1px 1px 6px 0.5% #000000;
	}

	.staff-name {
		margin-top: 260px;
	}
	
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 979px) {

	body {
		font-size: 14px;
	}

	h1.text-giant {
		font-size: 80px;
	}

	h2 {
		font-size: 30px;
		text-shadow: 1px 1px 6px 0.5% #000000;
	}

	.navbar {
	    min-height: 100px;
	}
	.navbar-nav > li > a {
		font-size: 20px;
	    padding-top: 40px;
	    padding-bottom: 15px;
	}
	.navbar-nav {
	    float: right;
	}

	.col-md-15 {
		width: 20%;
		float: left;
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

	body {
		font-size: 16px;
	}

	h1.text-giant {
		font-size: 80px;
	}

	h2 {
		font-size: 30px;
		text-shadow: 1px 1px 6px 0.5% #000000;
	}

	.col-lg-15 {
		width: 20%;
		float: left;
	}

	.staff-name {
		margin-top: 400px;
	}
	.staff-name:last-child {
		margin-bottom: 160px;
	}
}

/* Large devices (large desktops, 1400px and up) */
@media (min-width: 1400px) {

	h2 {
		text-shadow: 1px 1px 6px 0.5% #000000;
	}

	.staff-name {
		margin-top: 550px;

	}
	.staff-name:last-child {
		margin-bottom: 160px;
	}
}


/* Large devices (large desktops, 1850px and up) */
@media (min-width: 1850px) {

	h1.text-giant {
		font-size: 80px;
	}

		h2 {
		text-shadow: 1px 1px 6px 0.5% #000000;
	}

	.staff-name {
		margin-top: 650px;
	}
	.staff-name:last-child {
		margin-bottom: 160px;
	}
}

/* Large devices (large desktops, 1950px and up) */
@media (min-width: 1950px) {

		h2 {
		text-shadow: 1px 1px 6px 0.5% #000000;
	}

	.beleaguer-banner{
		margin-top:-50px;
		padding-top:10px;
		max-width: 90%;

	}
	.staff-name {
		margin-top: 800px;
	}
	.staff-name:last-child {
		margin-bottom: 160px;
	}
}