/*
Theme Name: BlairWillems.com
Theme URI: http://blairwillems.com	
Description: Blair Willems
Author: Blair Willems
Author URI: gooo!
Version: 1.0
Tags: responsive, white, bootstrap

License: Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0)
License URI: http://creativecommons.org/licenses/by-sa/3.0/

//MPG lightGrey 8996be
//MPG Grey #2d2d2d
//MPG Pink #eb5d18;   255,0,57
eb5d18
//MPG blue #22A7F0

//Organe DARK #cc4117
// LIGHT 	#eb5d18
*/




@import url('bootstrap/css/bootstrap.css');
@import url('http://fonts.googleapis.com/css?family=Roboto:400,100,300,700');

.news-row{
	min-height: 200px;
}

.device{
	background: url("images/device.png") no-repeat right bottom	;
	min-height:390px;
	min-width: 100%;
	margin-top: -390px;
}

.btn-default{
	border-radius: 0px;
	border: 0px;
	padding: 10px 15px;

}


.title-container{
	position: relative;
	height: 100%;
}

.release-info{
	position: absolute;
	right: 15px;
	bottom: 20px;
}

.icon-image{
	position: absolute;
	top:10px;
	right:10px;
	width:64px;
	height:64px;
}

a{
	color: #eb5d18;
}

a:hover{
	color: #eb5d18;
	text-decoration: none;
}

footer ul,
.blue ul{
    list-style:none;
    padding-left:0;
}​

/*
Misc overrides
--------------------------------------
*/

::selection {
  background: #eb5d18; /* WebKit/Blink Browsers */
  color: #fff;
}
::-moz-selection {
  background: #eb5d18; /* Gecko Browsers */
  color: #fff;
}

/*
Bootstrap overrides
--------------------------------------
*/

.navbar-nav{
	//border-top: solid 10px #cc4117;;
	margin-top: 40px;
}

.navbar-header{
	height: 110px;
}

.navbar-default {
    border: none;
    border-radius: 0;
    background-color: #2d2d2d;
}

.navbar-brand img{
	max-height:96px; 
	max-width:250px; 
	margin-top: -3px;
	//border-radius: 7px;
	//border: 2px solid #fff;
}

.navbar{
	box-shadow: 2px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

.nav > li:last-child > a {
	//margin-right: 20px;
	//padding-right: 20px;
}

.navbar li a{
	line-height:40px;
}

.navbar li a:hover{
	line-height:40px;
}

.navbar-default .navbar-nav li a{
	color : #ffffff;
}

.navbar-default .navbar-nav li{
	transition : all 0.2s linear;
}

.navbar-default .navbar-nav > li:hover{
	margin-top: -3px;
	padding-bottom: 3px;
	box-shadow: inset 0px -5px 0 0 #fff;
}

.navbar-default .navbar-nav .active > a:focus{
	color : #eb5d18;
}

.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus {
	color : #fff;
	-moz-animation: down .2s;
}

.navbar-default .navbar-nav a :active{
	color : #eb5d18;
}

.navbar-default .navbar-nav > .active > a{
	background-color: #ffffff;
}

.navbar-default .navbar-brand{
	color : #ffffff;
}

.tab-pane{
	padding-top: 20px;
}

.video
{
	position: absolute;
	top: 100px;
	left: 20px;
	z-index: 100;
}

input, .contact-form textarea
{
	background-color: #2d2d2d;
	color: #fff;
	border: none;
	padding: 4px 8px;
}

.thin{
	font-weight: 100;
	
}

.boxed{
	border: 1px solid #fff;
	padding: 5px 10px;
	margin-bottom: -5px;
}

.smaller{
	font-size: .6em;
}
.label 
{
	padding: 5px 10px;
	border-radius: 0 0;

}

.blue{
padding: 10px 20px;
background-color: #22A7F0;
height:100%;
width:100%;	
}

h2 a{
	color: #eb5d18;
	transition: all .3s;
}

h2 a:hover{
	color: #eb5d18;
	text-decoration: none;
}

footer p{
	color: #fff;
}

footer h2{
	color:white;
}

.blue a, .white-link, footer li a{
	color: #ffffff !important;
	transition: all .3s;
	transition: box-shadow .1s, padding: .5s ease-in;
}

.blue a:hover, .white-link:hover, footer li a:hover{
	color: #ffffff;
	padding: 0px 10px;
	text-decoration: none;
	box-shadow: inset 4px 0 0 0 #fff;
}

#page-content .row
{
	//display: flex;
}

#page-content .container
{
	padding: 0px 0px 80px 0px;
}



.blue-section
{
	background-color: #cc4117;
	margin: 80px 0;
	padding: 40px 0;
}

.navbar-default .navbar-toggle .icon-bar 
{
	background-color: #ffffff;	
}

#services
{
	padding-top: 70px;
	padding-bottom: 20px;
}

.mpg-grey
{
	//background-color: #2d2d2d;
}

body 
{  
	padding-top: 106px; 
    font-family: "Roboto",Helvetica,Arial,sans-serif;
    font-size: 16px;
    line-height: 1.42857;
    color: #FFF;
    background-color: #222;
}

body
{
	color: #555;
	background-color: #fff;
}

.helper
{
	height: 100%;
}

#banner 
{
	position: relative;
	max-height: 600px;
	//height: 600px;
	overflow:hidden;
	vertical-align: middle;
}

#banner img
{
	//position: fixed;
	//top: 94px;
	//left: 0px;
	z-index: -100;
}

h1
{
	margin-bottom: 30px;
}


/*
TITLES
----------------------------------
*/
#title
{
	//position: fixed;
	//top: 90px;
	left: 0;
	width: 100%;
	background-color: #cc4117;
	color: #ffffff;
	//height: 150px;
	z-index = 100;	
	box-shadow: 2px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

/*
SCREENSHOTS
----------------------------------
*/

#screenshots
{
	background-color: #eb5d18;
	color: #ffffff;
	padding-top: 40px;
	padding-bottom: 30px;

}

#screenshots img, .screenshot-box
{
	margin-bottom: 10px;
	
}

.hover-box
{
	transition: all 0.2s ease-out;
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.3);
}

.hover-box:hover
{
	transform: translate3d(-3px, -3px, 0); 
	box-shadow: 10px 10px 5px 2px rgba(0,0,0,0.3);
}

#screenshots img:hover
{
	
}


#screenshots h2
{
	display: inline-block;
    vertical-align: middle;
    float: none;
}

.screenshot-box
{
	display: block;
	border: 8px solid #fff;
	width: 250px;
	height: 250px;
}

/*
SERVICES FRONT PAGE
----------------------------------
*/

#services
{
	background-color: #cc4117;
}

#services .media
{
	padding-bottom: 40px;
}

#services .media p{
	color: #fff;
}

/*
PROJECTS FRONT PAGE
----------------------------------
*/

#projects
{
	padding-top: 40px;
	padding-bottom: 80px;
	overflow: hidden;
}	

#projects h2
{
	color: #eb5d18;
	font-size: 30px;
	text-align: center;	
}

.media-overbox
{
	color: rgba(255, 255, 255, 0);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: all .2s;
}

.media-overbox:hover
{		
	z-index: 100;
	//background-color: rgba(0,0,0,.4);
	color: rgba(255, 255, 255, 1);
}

#projects .media
{
	max-height: 200px;
	overflow:hidden;
	position: relative;
	margin-bottom: 20px;
}

#projects .media:hover
{

}

#projects .media h2
{
	z-index: 110;
	padding: 2px 10px;
	position: absolute;
	top: 10px;
	left: 10px;
	color: #fff;
	background-color: #eb5d18;
	//border: 1px solid #eb5d18;
}	

#projects .media .platforms
{
	z-index: 110;
	color: #efefef;
	background-color: #2d2d2d;
	padding: 1px 2px;
	position: absolute;
	font-size: 12px;
	top: 84px;
	left: 10px;
}


/*
ABOUT FRONT PAGE
----------------------------------
*/

#made-in-wellington{
	padding-top: 40px;
	padding-bottom: 60px;	
	background-color:#eb5d18;
	height: 400px;
	overflow: hidden;
	//stop the arrow causing the page to be wider on mobile
	
}
#made-in-wellington h2
{
	color: #fff;
	font-size: 30px;
	text-align: center;	
}
#made-in-wellington p
{
	float: right;
	max-width: 200px;
	text-align: right;
	color:#fff;
}

#map-wrapper{
	position: relative;
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 auto;
}

#map{
	position: absolute;
	top: 0px;
	right: 20px;
	-moz-animation: pulse 2s infinite;
	-webkit-animation: pulse 2s infinite;
}

.side-bounce{
	position: absolute;
	top: 24px;
	left: -120px;
	-moz-animation: bounceArrow 2s infinite;
	-webkit-animation: bounceArrow 2s infinite;
}

h4.media-heading {
	color: #fff;
	font-size: 22px;
	padding-bottom: 10px;
}






.btn-primary{
	transition: color 0.15s linear;
	transition: background-color 0.15s linear;
    color: #239C5A;
    background-color: #ffffff;
    border-color: #239C5A;
    border-radius: 0px;
    font-size: 1.5em;
}

.btn-primary:hover{
    color: #ffffff;
    background-color: #239C5A;
    border-color: #239C5A;	
}

.btn-primary:focus{
    color: #ffffff;
    background-color: #239C5A;
    border-color: #239C5A;    
}


.pushbutton-wide{
 	background-color: #eb5d18;
 	color: #ffffff;
    font-size: 1.5em;
 	border: none;
 	padding: 6px 10px 2px 10px;
}

.box{
	overflow: hidden;
}

.box p{
	color : #ffffff;
}

.box h2{
	//padding-top: 12px;
}



h3{
    //background-color: #eb5d18;
    text-align:left;
    color: #ffffff;
    //padding:2px 5px;
}

.jumbotron{
	color:#ffffff;
	background-color: #239C5A;
}

.container .jumbotron{
	border-radius:0;
	border-bottom: 2px dotted #ffffff;
}

#g197-name, #g197-email, #contact-form-comment-g197-message, #comment{
	border: none;
	background-color: #efefef;
	padding: 2px;
}

.grunion-field-label span{
	visibility: hidden;
}

.white-header{
	color:#ffffff;
}

.bs-docs-header{
position: relative;
padding: 30px 15px;
color: #ffffff;
text-align: left;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
//background-color: #265C23;
//	background-image:url('untitled.png');	
background-repeat: repeat-x;	
}

.align-left{
	float:left;
	margin-left: -5px;
}

@media(max-width: 768px) {
  h2 {
    //font-size: 16pt;
  }
}



.post-box{
	overflow: hidden;
	border-bottom:
}



.post-box p{
	color: #777777;
	font-size: 12px;
}

.uppercase{
	text-transform:uppercase;
}

.muted{
	color: #777777;
}

.portfolio-divider{
	margin: 50px 0px;
}

.comment-box{
	border: 1px solid #eb5d18;
//	background-color: #eb5d18;
	color: #777;
	padding: 10px;
}

.comment-box a{
	color: #000000;
}

.align-right{
	float:right;
}

.comment-bar{
	background-color: #eb5d18;
	padding: 1px 4px;
	margin-bottom:20px;
}

.comment-bar a{
	color: #fff;
}

.comment-bar{
	color: #ffffff;
}

.menu-link{

}

.menu-link a{
	background-color: #239C5A;
	color: #ffffff;
	padding: 2px 4px;
}

footer .col-lg-4,
footer .col-md-4
{
	padding: 0px 40px;
}
footer{
	background: #2d2d2d;
	min-height: 200px;
	padding: 50px 0;
}


footer ul{
	list-style: none;
}

footer li a{
	color: #8996be;
}

footer li a:hover{
	color: #eb5d18;
	text-decoration: none;
}

.small{
	font-size: .7em;
}

.img-upscale{
	width: 100%;
}

#page-content{
	padding: 40px 0 0 0;
	//background: #fff;
}

/*
@-moz-keyframes hoverPop
{
	0%
	{
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	100%
	{
		opacity: 1;
		transform: translate3d(20px, 20px, 0);    
	}
}

@keyframes bounceArrow
 {

  0%, 100%{
    opacity: 0;
	transform: translate3d(200px, 0, 0);
	transition-timing-function: cubic-bezier(1, 0.050, 0.855, 0.060);
  }

  40% {
  	opacity: 1;
    transform: translate3d(0, 0, 0);    
    transition-timing-function: cubic-bezier(0, 0.610, 0.355, 1.000);    
  }
}

@-webkit-keyframes bounceArrow
 {

  0%, 100%{
    opacity: 0;
	-webkit-transform: translate3d(200px, 0, 0);
	-webkit-transition-timing-function: cubic-bezier(1, 0.050, 0.855, 0.060);
  }

  40% {
  	opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);    
    -webkit-transition-timing-function: cubic-bezier(0, 0.610, 0.355, 1.000);
  }
}

@-moz-keyframes down {
    0%   {transform: translate3d(0,0,0);}
    100% {transform: translate3d(0,1000,1000);}
}
*/