/*
Theme Name:         The Random Vee
Theme URI:          http://pointandstare.com
Description:        A bespoke WordPress theme crafted to show off the awesome #AskGaryVee Show.
Version:            1.0
Author:             Lee Rickler
Author URI:         http://rickler.com
*/

/* -- RESET -- */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

article, aside, figure, footer, header, hgroup, nav, section { display: block }
img, object, embed { max-width: 100% }
html { overflow-y: scroll }
ul { list-style: none }
blockquote, q { quotes: none }

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none
}

a {
    background: transparent;
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline
}

hr {
    border: 0;
    border-top: 1px solid #ccc;
    display: block;
    height: 1px;
    margin: 0;
    padding: 0
}

input, select { vertical-align: middle }

/* -- FIXISH -- */
@-ms-viewport { width: device-width }
@viewport { width: device-width }

.row { *zoom: 1 }

.row:before, .row:after {
  content: "";
  display: table
}

.row:after { clear: both }

.clearfix:before, .clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden
}

.clearfix:after { clear: both }
.clearfix { zoom: 1 }

/* GLOBAL */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  margin: 0;
}

*,
*:after,
*::before { box-sizing: border-box }

h1 {
	font-size:160%;
	font-weight:normal;
}

.left, .alignleft { float: left }
.right, .alignright { float: right }

/* GENERAL */
html, body { background: #000 }

body {
	color: #fff;
	font: 16px "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	line-height: 1.3em
}


div.container {
	display: block;
	margin: 0 auto;
	width: 100%
}

p {
	letter-spacing: 0.03em;
	line-height: 1.3em;
	margin-bottom: 10px;
}

a, a:hover {
	color: #fff;
	text-decoration: underline
}

.column,
.columns {
	float: left;
	margin-left: 0;
	min-height: 1px;
	position: relative
}

.column:first-child,
.columns:first-child { margin-left: 0 }
[class*="column"] + [class*="column"]:last-child { float: right; }
[class*="column"] + [class*="column"].end { float: left; }

.aligncenter {
	display: block;
	margin: 0 auto
}

/* -- VIDEO -- */
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
/*	overflow: hidden; */
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

header {
	-webkit-box-shadow: 0 6px 12px 0 #000;
	background: #ff3e2c;
	box-shadow: 0 6px 12px 0 #000;
	color: #fff;
	display: block;
	font-size: 86%;
	margin-bottom: 6px;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999
}

header h1 {
	display: inline-block;
	font-size: 120%;
	font-weight: bold;
	letter-spacing: 0.21em;
	padding: 6px;
	text-transform: uppercase
}

header h1 a { text-decoration: none }

span.rantage {
	display: block;
	font-size: 146%;
	font-style: italic;
	font-weight: bold;
	padding: 10px 0;
	text-align: center;
	text-transform: uppercase;
	width: 100%
}

div.container { margin-top: 100px }

span.tweet {
	display: inline-block;
	padding: 6px 6px 3px 6px;
	text-align: center
}

h2.hp-title {
	display: block;
	font-size: 196%;
	font-weight: bold;
	line-height: 1.26em;
	margin-bottom: 16px;
	text-align: center;
	text-transform: uppercase
}

a.more {
	display: block;
	font-size: 86%;
	font-style: italic;
	margin: 16px;
	text-align: right
}

div.internal-title h1 {
	color: #fff;
	display: block;
	font-size: 160%;
	font-weight: bold;
	padding: 16px
}

.twelve.columns.post {
	color: #fff;
	display: block;
	margin: 0 20px
}

/* -- RANDOMS -- */
.more-randoms {
	display: block;
	margin: 30px auto;
	width: 100%
}

.more-randoms h2 {
	display: block;
	font-size: 200%;
	letter-spacing: 0.21em;
	margin: 40px auto;
	text-align: center;
	text-transform: uppercase;
	width: 100%
}

.more-randoms img { width: 100% }

/* FOOTER */
span.authorship {
	display: block;
	font-size: 76%;
	padding-right: 20px;
	text-align: right;
	width: 100%
}

footer {
	color: #fff;
	display: block;
	font-size: 80%;
	margin: 20px auto;
	padding: 6px;
	text-align: center
}

#smoothup {
	-moz-transition-duration: 0.4s; transition-duration: 0.4s;
	-webkit-transition-duration: 0.4s;
	background: url("images/arrow-up.png") no-repeat;
	bottom: 40px;
	display: none;
	height: 40px;
	opacity: 0.3;
	position: fixed;
	right: 40px;
	text-indent: -9999px;
	width: 40px
}

#smoothup:hover {
	-webkit-transform: rotate(360deg) }
	background: url('') no-repeat;
}

#smoothup img {
	height: 40px;
	width: 40px;
}

/* -- SEARCH -- */
div#search input {
	-webkit-border-radius: 3px;
	border: solid 1px white;
	border-radius: 3px;
	color: #ccc;
	display: inline-block;
	font-family: inherit;
	font-style: italic;
	margin-bottom: 16px;
	margin-right: 6px;
	padding-left: 6px;
	text-transform: uppercase;
	width: 200px;
}

div.search-title h1 {
	display: block;
	font-size: 200%;
	line-height: 1.6em;
	margin: 20px;
	text-align: center;
	text-transform: uppercase;
}

div.search-title h1 span {
	font-style: italic;
	font-weight: bold
}

.fb_iframe_widget { top: -5px!important }

div.twelve.columns.internal.fouroh {
	display: block;
	width: 100%
}

div.twelve.columns.internal.fouroh ul {
	display: block;
	list-style: none;
	margin: 20px auto;
	width: 980px
}

div.twelve.columns.internal.fouroh li{
	line-height: 2.36em
}

/* PRINT */
@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

/* -- DEVICES -- */

@media only screen and (min-width : 375px) and (max-width : 667px) {

	header h1, .more-randoms h2 { line-height: 0.1em }

	header h1 {
		display: block;
		font-size: 180%;
		text-align: center
	}

	header {
		font-size: 76%;
		padding: 0 6px 6px 6px
	}
	
	div.container { margin-top: 100px }

	span.tweet.right {
		display: block;
		float: none;
		text-align: center
	}

	div#search input {
	display: block;
	margin: 6px;
	width: 350px
}

}

@media only screen and (min-width : 320px) and (max-width : 568px) {

	header h1, .more-randoms h2 { line-height: 0.8em }
	div.internal-title h1 { line-height: 1.26em }

	div.container { margin-top: 100px }

}


@media only screen and (max-width : 731px) {

	header h1, .more-randoms h2 { line-height: 0.8em }
	div.internal-title h1 { line-height: 1.26em }

	div.container { margin-top: 60px }

}

@media only screen and (max-width : 500px) {
	div.container { margin-top: 190px!important }
}

@media only screen and (max-width : 667px) {
	div.container { margin-top: 90px }
}

@media only screen and (max-width : 375px) {
	div.container { margin-top: 180px!important }
}

@media only screen and (max-width : 768px) {
	div.container { margin-top: 60px }
}

@media only screen and (max-width : 1024px) {
	div.container { margin-top: 140px }
}