﻿/*
@media only screen and (min-width:650px) and (max-width:730px) {
}
*/
@media only screen and (max-width:980px) {
	header, footer, .home-bottom, #content, .journal-top {
		width: 96%;
		padding: 0 2%;
	}
	.home-top {
		width: 100%;
	}
	header, #header-wrapper {
		height: 130px;
	}
	.journal-top-wrapper, .home-top-wrapper {
		background-repeat: repeat;
	}
	#user-actions {
		top: 59px;
		position: absolute;
		float: none;
		margin: 0;
		right: 2%;
		width: 27%;
	}
	#primary-nav {
		margin-right: 0;
		width: 100%;
	}
	#primary-nav ul {
		margin: -38px 0 0 0;
	}
	#psup-line {
		right: 2%;
	}
	.box .mailinglist input[name='email'] {
		width: 135px;
	}
	#primary-nav .sub-nav {
		width: 100%;
	}
	#primary-nav .sub-nav h4 {
		font-size: 15px;
	}
}
@media only screen and (max-width:768px) {
	#flexslider-1 {
		height: auto;
	}
	#primary-nav{
		margin: 0;
		font-size: .9em;
		width: 100%;
	}
	#user-actions {
    	float: right;
    	width: 38%;
    	text-align: right;
    	margin: -5px 10px 0px 0px;
    	clear: right;
	}
	#psup-line {
    	float: right;
    	margin: 20px 15px 0 0px;
	}
	#logo{
		float: left;
		margin: 25px 0 0 10px;
	}
	.box .mailinglist input[name='email'] {
    	font-size: 18px;
    	font-family: 'Lato';
    	font-weight: 300;
    	padding: 5px 7px;
    	width: 65%;
    	line-height: 23px;
    	display: inline-block;
	}
	.home-bottom-wrapper {
		padding: 0;
	}
	#footer {
		padding: 10px 0;
	}
	#psup_line_footer {
		float: left;
		margin: 60px 0 0 -150px;
	}
	.social {
		float: right;
		margin: 10px 0 0 15px;
	}
	#PSU_logo img {
		width: 150px;
	}
	.catalog-tile {
		width: 23%;
	}
}
@media only screen and (max-width:520px) {
	#psup-line img {
		height: 13px;
	}
	#user-actions {
		width: 50%;
	}
	#primary-nav a {
		padding: 7px 8px;
	}
	.col.col-6, .col.col-8, .col.col-4 {
		float: none;
		margin: 0;
		width: 100%;
	}
	.footer .contact {
		float: none;
		margin: 0 0 15px;
	}
	#PSU_logo img {
		float: none;
		width: 200px;
	}
	#psup_line_footer {
		display: block;
		float: none;
		margin: 0 0 15px;
	}
	.social {
		float: none;
		clear: both;
		margin: 0 0 15px;
	}
	footer address {
		float: none;
		clear: both;
		margin: 0 0 15px;
		text-align: left;
	}
	.catalog-tile {
		width: 31%;
	}
	.blocker {
		z-index: 200;
	}
	#purchaseoptions.modal {
		width: 72% !important;
		left: 4%;
		top: 10%;
		position: absolute;
	}
}
@media only screen and (max-width:414px) {
	#header, #header-wrapper {
		height: 120px;
	}
	.fa-bars, .fa-search, .fa-shopping-cart, .fa-times, .search-form-module .fa-times, .search-form-module .clicktoggle {
		display: block;
		color: #8c9095;
	}
	.mobile .fa-shopping-cart, .mobile .fa-search {
		font-size: 38px;
	}
	.carttext, .searchsubmit {
		display: none;
	}
	.search-form-module {
		z-index: 110;
	}
	.search-form-module .fa-times {
		position: absolute;
		top: 30px;
		right: 10px;
		display: none;
		left: auto;
		width: 45px;
	}
	.search-form-module input[type="text"] {
		height: 60px;
		padding: 0;
		width: 0;
	}
	#logo {
		margin-top: 55px;
	}
	#logo img {
		width: 50px;
	}
	#psup-line2 {
		display: block;
	    padding: 0;
	    width: 80%;
	    position: absolute;
	    top: 15px;
	    left: 5px;
	}
	#psup-line2 img {
		width: 100%;
	}
	#psup-line {
		display: none;
	}
	#primary-nav {
		width: 100%;
		top: -20px;
		left: 0;
		right: auto;
		bottom: auto;
		z-index: 100;
		height: 0;
		position: absolute;
		margin: 0;
	}
	#primary-nav ul {
		background: #333;
		width: 60%;
		margin: 0 0 0 -60%;
		padding-top: 20px;
		float: none;
	}
	#primary-nav li {
		display: block;
		text-align: left;
		margin: 0;
	}
	#primary-nav a {
		color: #999;
		padding: 15px;
		border-bottom: 1px solid #555;
		font-size:14px;
	}
	#primary-nav a:hover {
		color: #fff;
	}
	#primary-nav a:hover, #primary-nav a.active, #primary-nav li:hover > a {
		color: #FFF;
		background:#444;
	}
	#primary-nav .sub-nav {
		position: relative;
		margin: 0;
		width: auto;
		padding: 0;
		top: auto;
		left: auto;
	}
	#primary-nav .sub-nav ul {
		position: relative;
		top: auto;
		left: auto;
	}
	#primary-nav .sub-nav li a {
		background: #111;
		font-size: 1em;
		padding: 10px 15px 10px 25px;
		border-bottom: 1px solid #333;
	}
	#primary-nav li.parent a:after {
		content: "\25BA";
		float: right;
	}
	#primary-nav li.parent a.open:after {
		content: "\25BC";
	}
	#primary-nav li.parent .sub-nav a:after {
		content: "";
	}
	#primary-nav .sub-nav-wrapper {
		height: auto;
		width: 100%;
		position: relative;
		top: auto;
		left: auto;
	}
	#primary-nav .sub-nav-list {
		float: none;
		margin: 0;
		width: 90%;
	}
	#primary-nav .sub-nav h4 {
		font-size: 15px;
		line-height: 20px;
	}
	#primary-nav .sub-nav ul {
		padding: 0;
		width: 100%;
	}
	.fa-bars, .fa-times {
		right: 15px;
		top: 36px;
		position: absolute;
	}
	#user-actions {
		width: 96%;
		z-index: 105;
		margin: 0;
		height: 60px;
	}
	#user-actions a {
		text-decoration: none !important;
	}
	.search-form-module .clicktoggle {
		position: absolute;
		top: 29px;
		right: 10px;
	}
	#user-actions .cart {
		display: block;
		position: absolute;
		right: 60px;
		top: 28px;
		z-index: -1;
	}
	#flexslider-1 .learn-more-button img {
		position: absolute;
		height: 40px;
		width: auto;
		top: 45%;
		right: 5%;
	}
	.col.col-2 {
		width: 31%;
	}
	.col-sep-6, .col-sep-8 {
		background-image: none;
	}
	.home-maillist h3 {
		padding-top: 20px;
	}
	.home-featured-partner h3 {
		margin-top: -20px;
	}
	footer .contact {
		float: none;
	}
	footer address {
		float: none;
		text-align: left;
		font-size: .85em;
	}
	img.journal-image {
		width: 40%;
		margin: 0 3% 0 0;
		float: left;
		height: auto;
	}
	.ui-tabs a {
		text-transform: none;
		font-size: .8em;
		line-height: 1.7em;
	}
	.journal .ui-tabs a {
		height: 60px;
	}
	.col-4 .btn {
		display: inline-block;
	}
	/* header changes */
    #header-wrapper {
        background-color:#222222;
    }
    #logo-m img {
        width: 55%;
        margin: 5px 0 0 0;
    }

    .mobile .fa-shopping-cart, .mobile .fa-search, .fa-bars, .fa-times { 
        font-size:24px;
    }

    .box .catalog img {
    	height: auto;
    	width: 80%;
    }
    /* book and journal page changes */

    h1 { 
        font-size: 1.2em;
    }
    .sub-title, .edited-by { 
        clear:none !important;
    }
    h3.author { 
        font-size:0.9em;
    }
    .journal-content p { 
        clear:both;
        font-size:0.8em;
        padding-top:5px;
        line-height:1.4em;
    }
    .button-row { 
        font-size:0.6em;
    }
    .button-row strong { 
        font-size:1.6em;
    }
    .button-row .btn { 
        min-width:108px;
        text-align:center;
        font-size:1.05em;
    }
    .addthis_sharing_toolbox { 
        text-align:center;
    }
    .books .list-item .item {
    	width: 50%;
    }
    .journals .list-item .item {
    	width: 50%;
    }
    .banner-background img {
    	height: 190px;
    	width: auto;
    	margin: 0 0 0 -85px;
    }
    .banner-cover img {
    	margin-left: 65%;
    	margin-top: -175px;
    }
    .banner-text {
    	margin-top: -42%;
    	margin-left: 7%;
    }
    .journal-mailinglist h3 {
    	padding-top: 10px;
    }
    .book.mobile .col-8 h1, .book.mobile .col-8 .sub-title, .book.mobile .col-8 .author {
	    display: none;
    }
    .addthis_sharing_toolbox {
	    text-align: left;
    }
    .mobileinfo {
	    display: block;
    }
    .book.mobile .mobileinfo h2 {
	    font-size: 1.05em;
	    font-weight: bold;
    }
	.catalog-tile {
		width: 48%;
	}
	.mobile .meta {
		clear: both;
		padding: 10px 0;
	}
}
@media only screen and (max-width:375px) {
	#logo-m {
		padding: 15px 0 0 0;
		margin-left: 40px;
	}
	#logo-m img {
        width: 55%;
        margin-left:10px;
        margin-top: 5px;
	}
}
@media only screen and (max-width:320px) {
	#logo-m {
		padding: 15px 0 0 0;
		margin-left: 38px;
	}
	#logo-m img {
		width: 55%;
		margin: 5px 0 0 0;
	}
	.ui-tabs a {
		font-size: .75em;
	}
}