/*
Theme Name: Hypocritic Reviews
Theme URI: http://www.ionicdevelopment.com/hypocritic
Description: The Hypocritic, Extra Hypocritical Edition
Version:  1.0.0 (rel:09-26-2014)
Author: Justin Goreschak
Author URI: http://www.goreschak.com/
*/
/*--Reset--*/
html,body,div,section,article,nav,header,p,ul,ol,li,a,img,h1,h2,h3,h4{margin:0;padding:0;border:none;}
img{max-width:100%;}
a{color:white}
a:hover{text-decoration:none;}
button{outline:0;border:0;padding:0;margin:0;background:none;color:white;font-size:1em;}

/*--Main Styles--*/
body{
	width:100%;
	text-align:center;
	font-family: 'Montserrat', sans-serif;
	color:#444;
	background-color:white;
	-webkit-transition:background-color .4s;
	transition:background-color .4s;
}
body > *{
	width:100%;
}
header{
	background-color:white;
	overflow:visible;
	box-shadow:0 0 5px black;
	position:absolute;
	top:0;
	left:0;
	-webkit-transform: translateZ(0);
}
header a{
	color:#444;
	text-decoration:none;
}
header .left a{
}
header .contain{
	text-align:center;
	display:flex;
}
header .contain > *{
	font-size:1.5em;
	display:inline-block;
	width:30%;
	text-align:center;
	flex:1;
	padding:.5em 0;
}
header .middle{
	color:white;
	display:none;
}
header .left{
	text-align:left;
}
header .right{
	text-align:center;
}
.mod-flexbox header .right{
	flex-grow:0;
	flex-basis:auto;
	width:auto;
	padding-left:.75em;
}
header .skew{
	-ms-transform: skewX(-30deg); /* IE 9 */
    -webkit-transform: skewX(-30deg); /* Chrome, Safari, Opera */
    transform: skewX(-30deg);
}
header .unskew{
	-ms-transform: skewX(30deg); /* IE 9 */
    -webkit-transform: skewX(30deg); /* Chrome, Safari, Opera */
    transform: skewX(30deg);
}
header nav #menubutton{
	cursor:pointer;
	transition:color .4s;
}
header nav.open #menubutton{
	color:blue;
}
header nav ul{
	list-style:none;
	position:absolute;
	left:0;
	top:100%;
	width:100%;
	background:white;
	display:none;
}
header nav.open ul{
	display:block;
	overflow:auto;
	box-shadow:0 5px 5px -5px black;
}
header nav li{
	font-size:.75em;
	display:block;
	vertical-align:middle;
	border-top:1px solid #EFEFEF;
}
header nav li:last-child{
	padding:.5em 0;
}
header nav li > a{
	display:block;
	padding:.5em 0;
}
header #search .searchsubmit{
	color: #444;
	cursor:pointer;
}
header #search .searchbox{
	width:75%;
	transition:width .4s;
	font-size: 1em;
	text-align: left;
	position: relative;
	top: 2px;
}
#intro{
	background-size:cover;
	background-position:center center;
	height:20em;
	position:relative;
}
#intro .introtext{
	font-size:2em;
	padding-top:1.25em;
	color:white;
	text-shadow:1px 1px 2px black;
}
#cats{
	width:100%;
	/*padding-top:5em;*/
}
#cats nav.contain{
	padding:0;
}
#cats nav > a{
	display:block;
	flex:1;
	height:3em;
	cursor:pointer;
	-webkit-transition:text-shadow .2s, background .3s;
	transition:background .3s, color .3s;
	color:#444;
	text-decoration:none;
}
.mod-no-touch nav > a:hover{
	background-color:#DFDFDF;
}
#cats nav > a.selected{
	background-color:#444;
	color:white;
}
#content{
	text-align:left;
}
#content .contain{
	padding:2em 1em;
}
#content .searchform{
	text-align:center;
	margin:0 auto;
	width:100%;
	padding-left:.1875em;
	margin-bottom:.75em;
	font-size:1.5em;
}

#content .searchform .icon-search{
	vertical-align:text-bottom;
}
.module {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	min-height: 200px;
	background: white;
	margin-bottom:4%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.module .author a{
	color:#444;
	text-decoration:none;
}
.module .bg{
	position:relative;
	background-size:cover;
	background-position:center center;
	height:250px;
	cursor:pointer;
}
.module .bgtext{
	color:white;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	content:" ";
	/*background: rgba(0, 0, 0, .6);
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
	background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
	background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .7)));
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
	background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
	background: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(0, 0, 0, 0)', endColorstr='rgba(0, 0, 0, .7)', GradientType=1);*/
}
.module .bgtext > div{
	width:100%;
	box-sizing:border-box;
	position:absolute;
	bottom:0;
	padding:.5em;
	text-align:left;
	background: rgba(0, 0, 0, .6);
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .9));
	background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .9));
	background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .9)));
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .9));
	background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .9));
	background: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .9));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(0, 0, 0, 0)', endColorstr='rgba(0, 0, 0, .9)', GradientType=1);
}
.module .bg{
	text-align:right;
}
.module .score{
	color:white;
	position:relative;
	box-sizing:border-box;
	background-color:rgba(0, 105, 140, .7);
	border-radius:10em;
	display:inline-block;
	border:3px solid rgba(0, 163, 217,.7);
	margin:.3em;
	height:2.5em;
	width:2.5em;
	font-weight:bold;
	text-align:center;
	font-size:2em;
	text-shadow:2px 2px black;
}
.module .score .scorestars{
	font-size: .5em;
	position: relative;
	bottom: .25em;
}
.module p.title{
	font-size:2em;
	text-shadow:2px 2px black;
}
.mod-no-touch .module .bg:hover p{
	text-decoration:underline;
}
.module p.subtitle{
	font-size:1.2em;
	text-shadow:2px 2px black;
}
.module .details{
	font-size:1em;
	text-align:right;
}
.module .details > *{
	display:inline-block;
	box-sizing:border-box;
	vertical-align:middle;
}
.module .publish{
	width:100%;
	padding:.5em;
	text-align:center;
}
.module .publish > *{
	box-sizing:border-box;
	display:inline-block;
	vertical-align:middle;
	
}
.module .publish .pic{
	background-position:center center;
	background-size:cover;
	height:50px;
	width:50px;
	border-radius:50px;
	margin-right:.25em;
}
.module .byline{
	text-align:left;
}
.module .byline span{
	line-height:150%;
}
.module .share{
	display:none;
}
.module .share a{
	text-decoration:none;
}
#loadmore, #noloadmore{
	font-size:1.2em;
	text-align:center;
	padding:.5em 0;
}
#loadmore a, #noloadmore a{
	color:#444;
	text-decoration:none;
}
#content article.contain{
	background-color:white;
	padding:1em;
}
article h1{
	font-size:2.5em;
	word-wrap: break-word;
	overflow-wrap:break-word;
}
article h3{
	color:white;
	font-size:1.3em;
	padding:.5em .5em;
	margin:1em 0;
	background-color:#4A8ED1;
	text-transform:uppercase;
}
article ul, article ol{
	margin:1.2em 0;
	padding:0 .65em;
}
article ul li, article ol li{
	margin-left:1.2em;
	line-height:150%;
}
article p,#disqus_thread{
	margin:1.2em 0;
	padding:0 .65em;
	line-height:150%;
}
article a{
	color:#444;
}
article .wp-caption{
	color:white;
	background-color:#4A8ED1;
	padding:.5em;
	margin:.5em 1em;
	text-align:center !important;
}
article .wp-caption img{
	margin:5px 0;
}
article .wp-caption p{
	margin:0;
	padding:0 5px;
	line-height:150%;
}
article .alignright,article .alignleft{
	margin:0 auto;
	max-width:95%;
}
article .aligncenter{
	background-color:initial;
	padding:.5em 0;
	width:100% !important;
}
article #description{
	text-align:center;
}
article #description>*{
	text-align:left;
}
.mod-csscalc article .aligncenter{
	margin:.5em -1em;
	width: calc(100% + 2em) !important;
}
.mod-csscalc article p .aligncenter{
	margin:.5em -1.65em;
	width: calc(100% + 3.32em) !important;
}
article .aligncenter img,article img.aligncenter{
	width:100%;
	height:auto;
	max-width:initial;
}
article iframe{
	width:100%;
	max-width:100%;
}
.mod-js #showComments{
	cursor:pointer;
}
.mod-js #disqus_thread{
	display:none;
}
#showComments .arrow{
	display:inline-block;
	transition:transform .4s;
}
#showComments .arrow.rotate{
	transform:rotate(180deg);
}
#widgets-below_content{
	width:100%;
	margin: 1em 0;
}
footer{
	color:white;
	padding:1.5em 0;
}
#overlay{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	display:none;
	background-color:rgba(0,0,0,.6);
}
#overlay > div{
	position:fixed;
	margin: 0;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width:300px;
	height:300px;
	background-color:white;
}

.contain{
	width:100%;
	max-width:69em;
	padding:0 1em;
	margin:0 auto;
	box-sizing:border-box;
}
.white{
	background-color:white;
}
.italic{
	font-style:italic;
}
.padtop{
	padding-top:5em;
}
.desktoponly{
	display:none;
}
.poscenter{
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}
.cf:after { 
   content:" ";
   display:block; 
   height:0; 
   clear:both;
}
.vc:before {
	content:' ';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	width:0;
}

.line{
	height: 1px;
	border:none;
	margin:.3em 0;
	background: #cccccc;
	width:100%;
	background:-webkit-gradient(linear, 0 0, 100% 0, from(rgba(50,50,50,0.01)), to(rgba(80,80,80,0.01)), color-stop(.5,#aaaaaa));
	background:-moz-linear-gradient(left, rgba(0,0,0,0.001) 0%, rgba(201,201,201,1) 50%, rgba(0,0,0,0.001) 100%);
	background:-ms-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
	background:-o-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
	background:linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
}

@media all and (min-width:19em){

	header{
		position:fixed;
	}
}
@media all and (min-width:25em){
	.module .publish{
		width:70%;
		text-align:left;
	}
	.module .share{
		display:inline-block;
		width:30%;
		background-color:rgb(0,105,140);
		vertical-align:middle;
		text-align:center;
		padding:1.5em 0;
		color:white;
		-webkit-transition:box-shadow .3s;
		transition:box-shadow .3s;
		/*cursor:pointer;*/
	}
	.mod-no-touch .module .share:hover{
		box-shadow: inset 0 0 8px black;
	}
}
@media all and (min-width:43em){
	#intro .introtext{
		font-size:2.5em;
		padding-top:1em;
	}
	#content .searchform{
		width:80%;
	}
	article .wp-caption{
		color:white;
		background-color:#4A8ED1;
		padding:.5em;
		margin:.5em 1em;
	}
	article .wp-caption img{
		//margin:5px 0;
	}
	article .wp-caption p{
		margin:0;
		padding:0 5px;
		line-height:150%;
	}
	article .alignright{
		float:right;
		margin-right:.65em;
	}
	article .alignleft{
		float:left;
		margin-left:.65em;
	}
	article .aligncenter{
		background-color:initial;
		margin:.5em 0;
		padding:.5em 0;
		width:100% !important;
	}
}
@media all and (min-width:50em){
	header{
	 top:20px;
	}
	header .contain .middle{
		display:inline-block;
	}
	header .contain .right{
		flex:1;
		text-align:right;
	}
	header nav ul{
		display:block;
		position:relative;
		top:auto;
		background:none;
		height:auto;
	}
	header nav.open ul{
		box-shadow:none;
		overflow:visible;
	}
	header nav li{
		font-size:.6em;
		display:inline;
		opacity:1;
		transition:opacity .4s;
		border-top:none;
		border-right: 1px solid #DDD;
		padding-right: .5em;
	}
	header nav li:last-child{
		border-right:none;
		padding-right:0;
	}
	header nav li.fade{
		opacity:0;
	}
	header nav li > a{
		display:inline;
		padding:0;
	}
	header #search .searchbox{
		font-size:.9em;
		max-width:300px;
		width:75%;
		width:-webkit-calc(100% - 2em);
		width:calc(100% - 4em);
		position: absolute;
		top: 0;
		right: 1.5em;
		height: 2em;
	}
	header #search .searchbox.closed{
		display:none;
		width:0;
	}
	header nav form{
		display:inline;
	}
	#cats nav{
		display:flex;
	}
	#cats nav > a{
		display:inline-block;
	}
	.mod-no-flexbox #cats nav > a{
	
	}
	
	#content .contain{
		padding:2em 1em 2em 1.25em;
	}
	/*slidein css*/

	.module {
		width: 48%;
		position: relative;
		margin-right: 4%;
		margin-left:-.25em;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		display:inline-block;
	}
	.module:nth-child(even) {
		margin-right: 0;
	}
	.mod-js .module{
		-webkit-transform: translateY(150px);
		transform: translateY(150px);
	}
	.mod-js .module.already-visible{
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	.mod-js .module:nth-child(odd) {
		-webkit-transition: transform 0.7s ease;
		transition: transform 0.7s ease, opacity .4s;
	}
	.mod-js .module:nth-child(even){
		-webkit-transition: transform 0.6s ease;
		transition: transform 0.6s ease, opacity .4s;
	}
	.mod-js .module.come-in {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	
	.mobile{
		display:none;
	}
	.desktoponly{
		display:inline-block;
	}
}

@media all and (min-width:70em){
	header .contain{
		padding:0;
	}
	#content .contain{
		padding:2em 0 2em .25em;
	}
	#content .searchform{
		width:50%;
	}
	#content article.contain{
		position:relative;
		top:-5em;
		box-shadow:0 0 5px black;
	}
	#intro{
		height:38em;
	}
}

/* Don't show shadows when selecting text */
::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
::selection { background: #5af; color: #fff; text-shadow: none; }
::-webkit-input-placeholder { padding-top: 3px; }
:-moz-placeholder { /* Firefox 18- */ padding-top: 3px; }
::-moz-placeholder {  /* Firefox 19+ */ padding-top: 3px; }
:-ms-input-placeholder { padding-top: 3px; }

input:not([type=submit]):not([type=file]), textarea {
font-family: 'Montserrat', sans-serif;
color:#444;
border: none;
border-bottom: 1px solid #dedede;
font-size: 0.8em;
text-align: center;
outline: none;
line-height:100%;
width:80%;
vertical-align:bottom;
}
button{
border:none;background:none;
}
input[type="submit"]:active{
	top:auto;
}
/*---MENU TOGGLE----*/
.menu_toggle_container{
	position:relative;
}
.menu_toggle_container.loading .menu_toggle {
  -moz-animation: loading 1s ease-out infinite 0.75s;
  -webkit-animation: loading 1s ease-out infinite 0.75s;
  animation: loading 1s ease-out infinite 0.75s;
}
.menu_toggle_container.loading .menu_toggle:after {
  -moz-animation: loading 1s infinite ease-out 0.35s;
  -webkit-animation: loading 1s infinite ease-out 0.35s;
  animation: loading 1s infinite ease-out 0.35s;
}
.menu_toggle_container.loading .menu_toggle:before {
  -moz-animation: loading 1s infinite ease-out;
  -webkit-animation: loading 1s infinite ease-out;
  animation: loading 1s infinite ease-out;
}

.menu_toggle, .menu_toggle:before, .menu_toggle:after {
  width: 35px;
  background: #444;
  height: 5px;
  display: inline-block;
  border-radius: 3px;
}

.menu_toggle {
  position: relative;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.menu_toggle:before, .menu_toggle:after {
  content: "";
  position: absolute;
  left: 0;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.menu_toggle:before {
  top: 20px;
}
.menu_toggle:after {
  top: 10px;
}
.menu_open .menu_toggle_container .menu_toggle {
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 10px;
}
.menu_open .menu_toggle_container .menu_toggle:after {
  opacity: 0;
}
.menu_open .menu_toggle_container .menu_toggle:before {
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;
}

#ionic_broadcast_widget{
	position:fixed;
	transform: translateZ(0);
	bottom:0;
	left:0;
	right:0;
}
#ionic_broadcast_widget .ibw_title{
	font-size:1.3em;
}
#ionic_broadcast_widget .ibw_inner{
	box-sizing:border-box;
	width:100%;
	max-width:28em;
	background-color:white;
	box-shadow:0 0 5px black;
	margin:0 auto;
	padding:.5em;
}
#ionic_broadcast_widget .ibw_string a{
	color:#444;
}
.ionic_hosts_widget{
	height:10em;
	width:12em;
	max-width:100%;
	background-position:center center;
	background-size:cover;
	position:relative;
	display:inline-block;
	text-align:left;
	margin:0 .5em;
}
.ionic_hosts_widget .iphw_overlay{
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.7))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,.7) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,.7) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,.7) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	width:100%;
	height:100%;
}
.ionic_hosts_widget .iphw_text{
	position:absolute;
	bottom:0; left:0; right:0;
	margin-bottom:.5em;
	font-size:1.2em;
	color:white;
}
.ionic_hosts_widget a{
	color:white;
	text-decoration:none;
}