/**
 *
 * banner.css
 * Description: CSS Oogo banner design styles
 * Version: 1.1
 * Author: Ugo Guidolin (aka Oogo)
 * Author URI: http://www.oogo.io
 *
 */


 /* USAGE:

 A kind of little BS :) block is row and col is col-*-*

<div class="bar">
	<div class="col first" style="background-color:#aaa;">
		<h2>Column 1</h2>
		<p>Some text..</p>
	</div>
	<div class="col second" style="background-color:#bbb;">
		<h2>Column 2</h2>
		<p>Some text..</p>
	</div>
</div>

*/

#banner {
	max-width: 750px;
}

.bar a {
	color: rgba(255, 255, 255, 0.8)!important;
}
.bar a:hover {
	color: rgba(255, 255, 255, 1)!important;
}

.headline {
	font-family: Oswald;
	font-weight:800;
	text-transform:uppercase;
	position:relative;
	font-size:40px;
	line-height:1.1em;
	margin-bottom:10px;
	letter-spacing: -0.01em;
}
.claim{
	font-family:Roboto Condensed;
	font-size:20px;
	position:relative;
	margin-bottom:10px;
	line-height:1em;
}
.cta {
	position:relative;
	font-size:16px;
	background-color:#BA3531!important;
	color:#fff;
	font-family:Raleway;
	font-weight:800;
	text-transform:uppercase;
	padding:10px 15px;
	text-decoration:none;
	display:inline-block;
	margin-top:10px;
}
.recall {
	background-color:rgba(0, 0, 0, 0.4);
	padding:10px;
	font-family:Roboto Condensed;
	font-size:18px;
}

.bar {
	display: block;
	clear:both;
}

.padding {
	padding: 20px;
}

/* Clear floats after the columns */
.bar:after {
  content: "";
  display: table;
  clear: both;
}

.bar .col {
  float: left;
}

.bar .col.first {
  width: 30%;
}

#banner .col.first img {
	/*width:100%;*/
	max-width: 200px;
	max-height: 200px;
}

.bar .col.second {
  width: 70%;
}

.bar .col.full {
  width: 100%;
  clear:both;
  display: block;
}

.bar .brickred-bg {
	background-color: #BA3531!important;
}
.bar .bt.brickred-bg:hover {
	background-color: #DB5147!important;
	color:#fff;
}

/********************** MEDIA **********************/

/* Breakpoint Tablet */

@media (max-width: 800px) {
	
}

/* Breakpoint Smartphone */

@media (max-width: 600px) {
	.bar .col.first, #banner .col.second {
  		width: 100%;
	}
	.bar .col.first {
		margin-bottom:20px;
	}
}