/*-----------------------------------------------------------------------------------*/
/*  Style used if responsive option is on
/*-----------------------------------------------------------------------------------*/

.wrapper, .row {width:100%; max-width:960px;}
#responsive-menu-container {height:auto; width:100%; line-height:15px; font-size:16px; }
#responsive-menu-container ul li { width:100%; text-align:center; font-weight:bold; }
#responsive-menu-dropdown { padding:9px 0 5px; cursor:pointer; background:url(img/dropdown-arrow.gif) no-repeat center right}
#responsive-menu-container ul {margin:0;}
#responsive-menu-container ul li a {display:inline-block; width:100%; line-height:30px; padding:7px 0 3px; font-size:14px; border-top:1px solid #ccc}
#responsive-menu-container #responsive-menu li:last-child{padding-bottom:7px}
#responsive-menu-container #responsive-menu, #responsive-menu-container .default-menu {display:none; margin-top:0}

.dark #responsive-menu-dropdown { background:url(img/dropdown-arrow-dark.gif) no-repeat center right}
.dark #responsive-menu-container ul li a {border-top:1px solid #333}
.dark #responsive-menu-container ul li a{color:#cccccc}


/*-----------------------------------------------------------------------------------*/
/*	Media Queries
/*-----------------------------------------------------------------------------------*/

/*iPad Landscape Breakpoint*/

@media screen and (max-width:1024px) {
	html {-webkit-text-size-adjust: none;}
	.mobile-hide {display:block}
	html { overflow-x: hidden; }
	.wrapper, .row {width:100%; max-width: 860px;}
	.bigtweet span.tweet_text a {white-space: pre;
		  white-space: pre-wrap;
		  white-space: pre-line;
		  white-space: -pre-wrap;
		  white-space: -o-pre-wrap;
		  white-space: -moz-pre-wrap;
		  white-space: -hp-pre-wrap;
		  word-wrap: break-word;}
	body {margin-top:0; font-size:85%}
	header#header-banner {height:auto}
	.social-buttons, .social-icons a{opacity:1!important}
	.content {margin-right: 1%; width: 71.9%;}
	aside {width: 27.1%;}
	.comment  {width:100%; max-width:100%;}
	#main-nav, #top-menu-bar, #module-footer,  a#top-arrow,
	.bd-fb-fanbox, .related-container, #bottom-menu-container {display:none!important}
	#copyright {text-align:center; float:none}
	.social-counter .social-cell {box-shadow:none!important; font-size:80%}
	.content img, #banner-container img, #logo-container img {max-width:100%; height:auto}
	.content .preview img {max-width:99%; width:auto!important}
	.content img.frame {max-width:99%; width:auto!important}
	.social-buttons img, #comments img {width:auto!important}
	.video-thumbnail-link {float:none}
	.post-types-widget .video-thumbnail {margin-bottom:13px}
	textarea {width:95%!important}
	
	.input,  .clearfix label {width:98%!important;  text-align:left!important; }
	.input input,  .input textarea {width:100%!important; margin:0}
	.input input,  .input textarea {padding:0 3px}

	#comments input[type=text], #comments input[type=email], #comments input[type=password] {width:95%; float:none; margin:0}
	#comments label {margin:0}
	#comments span.required {margin-top:0}

	.wrapper.avatar {width:65px!important; height:65px!important}
	.children .comment {margin-left:0; }
	.comment-content{width:100%}

	.pagination span, .pagination a {width:30px; height:30px;line-height:30px; font-size:16px}

	.isotope-item{
	  width: 270px;
	  height:310px;
	  margin-right:25px;
	}

	.isotope-item img{
	   width:270px;
	   height:200px
	}

	footer .grid_4 {width:100%; float:none;}

}

/*iPad Portrait Breakpoint*/

@media screen and (max-width: 800px) {
	body {font-size:90%}
	.wrapper, .row {width:100%; max-width: 645px;}
	aside {margin-top:-25px}
	.content, aside {width:100%; float:none}
	.content img {max-width:100%; height:auto}
	.content .preview img, .content img.frame {width:99%}
	.social-buttons img, .author-info img {width:auto}
	#logo-container, #banner-container {text-align:center; float:none; width:100%}
	#banner-container {margin:10px auto}
	.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11 {float: none; width:100%}
	.left , .right {float:none}
	.post-nav .left, #comments-container .left {float:left}
	.post-nav .right , #comments-container .right {float:right}
	.solo-player .jp-progress-container { width: 70%; } 
	.pagination span, .pagination a {width:35px; height:35px;line-height:35px; font-size:20px}
	.movie-reviews .preview img, .music-reviews .preview img, .book-reviews .preview img, .game-reviews .preview img {width:180px!important; height:auto}
	.stars-container {margin-left:200px}
	#portfolio-item-container{width:800px!important;}
	.isotope-item{
	  width: 300px;
	  height:340px;
	  margin-right:45px;
	  margin-bottom:20px;
	}

	.isotope-item img{
	   width:300px;
	   height:225px
	}
}

/*iPhone Landscape Breakpoint*/

@media screen and (max-width: 500px) {
	.timer > div{
		font-size:18px;}
	.timer{
		width:100%;
		margin:0 auto;}
	.wrapper {width:92%;}
	span.blog-link {border:none; font-size:95%}
	.solo-player .jp-progress-container { width: 60%;}
	.movie-reviews .preview, .music-reviews .preview, .game-reviews .preview, .book-reviews .preview {float:none!important}
	.stars-container {margin-left:0}

	#portfolio-item-container{width:100%!important;}
	.isotope-item{
	  width: 100%;
	  height:auto
	}

	.isotope-item img{
	   width:100%;
	   height:auto
	}
}

/*iPhone Portrait Breakpoint*/

@media screen and (max-width: 400px) {
	.wrapper, .row {width:100%; max-width: 323px;}
	span.blog-link {border:none}
	.linkedin-button, .pinit-button {display:none}
	.solo-player .jp-progress-container { width: 47%;}
}