@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Atma:700');

#mc_embed_signup form {text-align:center; padding:10px 0 10px 0;}
.mc-field-group { display: inline-block; } /* positions input field horizontally */
#mc_embed_signup input.email {font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif; font-size: 15px; border: 1px solid #ABB0B2;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #343434; background-color: #fff; box-sizing:border-box; height:32px; padding: 0px 0.4em; display: inline-block; margin: 0; width:350px; vertical-align:top;}
#mc_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}
#mc_embed_signup .clear {display: inline-block;} /* positions button horizontally in line with input */
#mc_embed_signup .button {font-size: 13px; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; letter-spacing: .03em; color: #fff; background-color: #aaa; box-sizing:border-box; height:32px; line-height:32px; padding:0 18px; display: inline-block; margin: 0; transition: all 0.23s ease-in-out 0s;}
#mc_embed_signup .button:hover {background-color:#777; cursor:pointer;}
#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
@media (max-width: 450px) {
    #mc_embed_signup input.email {width:100%; margin-bottom:5px;}
    #mc_embed_signup .clear {display: block; width: 100% }
    #mc_embed_signup .button {width: 100%; margin:0; }
}

body {
	background: #2b2b2b url('../img/bg.png') repeat-x center center fixed;
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	}

	header {
		width: 960px;
		height: 160px;
		margin: 0 auto;
		}

		h1 {
			width: 250px;
			height: 90px;
			background: url('../img/siop-logo.png') no-repeat center center;
			background-size: contain;
			overflow: hidden;
			margin: 0 30px;
			padding: 34px;
			}

			h1 a {
				display: block;
				height: 100%;
				width: 100%;
				}

			h1 a span {
				font-size: 0px;
				}

	nav {
		width: 960px;
		height: 40px;
		margin: 0 auto;
		background: rgba(0,0,0,0.3);
		}

		nav ul {
			margin: 0 0 0 15px;
			padding: 0;
			list-style-type: none;
			font-family: 'Roboto', sans-serif;
			font-weight: bold;
			text-transform: uppercase;
			color: #333;
			font-size: 20px;
			}

			nav ul li {
				display: inline-block;
				}

				nav ul li a {
					display: block;
					color: #c4c600;
					text-decoration: none;
					padding: 8px 16px;
					}

					nav ul li a:hover {
						color: #000;
						background: #c4c600;
						}

					nav ul li a:active {
						color: #fff;
						}

	article {
		width: 960px;
		margin: 0 auto;
		background: #dedebe url('../img/article-bg.png');
		font-family: 'Roboto', sans-serif;

		}

		div#article-padding {
			padding: 15px;
			overflow: hidden;
			}

			article h2 {
				margin: 15px 0 15px 15px;
				font-size: 46px;
				font-weight: regular;
				color: #333;
				font-family: Baskerville, 'Libre Baskerville', serif;
				}

				h2 a {
					color: #000 !important;
					text-decoration: none;
					}

					h2 a:hover {
						color: #399300 !important;
						text-decoration: none !important;
						}

			article h3 {
				clear: both;
				margin: 15px 0 15px 15px;
				padding-top: 0;
				font-size: 36px;
				font-weight: regular;
				color: #333;
				font-family: Baskerville, 'Libre Baskerville', serif;
				}

			article h4 {
				clear: both;
				padding-top: 1em;
				margin: 0;
				font-size: 20px;
				}

			article a {
				color: #399300;
				text-decoration: none;
				}

				article a:hover {
					color: #000;
					text-decoration: underline;
					}

			article p {
				margin: 0 15px 15px;
				line-height: 1.5em;
				}

				 p.desc {
					margin: 15px 0;
					}

			article li {
				line-height: 1.5em;
				margin-bottom: 15px;
				}

		div.catalog-item {
			display: block;
			width: 435px;
			height: 295px;
			margin: 15px;
			float: left;
			position: relative;
			}


             div.catalog-item a {
				text-decoration: none;
				color: #000;
				}

				div.catalog-item a:hover {
                    text-decoration: underline;
					color: #399300;
					}

			img.catalog-cover {
				width: 195px;
				height: 295px;
				box-shadow: 0 5px 10px 0 rgba(0,0,0,0.3);
				}

        div.catalog-item-square {
    			display: block;
    			width: 435px;
    			height: 195px;
    			margin: 15px;
    			float: left;
    			position: relative;
    			}

            div.catalog-item-square a {
				text-decoration: none;
				color: #000;
				}

				div.catalog-item-square a:hover {
                    text-decoration: underline;
					color: #399300;
					}


        img.catalog-cover-square {
  				width: 195px;
  				height: 195px;
  				box-shadow: 0 5px 10px 0 rgba(0,0,0,0.3);
  				}

			span.catalog-badge {
				display: block;
				background: rgba(0,0,0,0.7);
				color: #fff;
				width: 195px;
				position: absolute;
				bottom: 100px;
				text-transform: uppercase;
				font-size: 14px;
				text-align: center;
				padding: 5px 0;
				font-weight: bold;
				}

			div.catalog-item ul, div.catalog-item-square ul {
				width: 200px;
				list-style-type: none;
				float: right;
				margin: 15px 5px 0 0;
				padding: 0;
				font-size: 16px;
				}

				div.catalog-item ul li, div.catalog-item-square ul li {
					margin-bottom: 10px;
					}

					li.catalog-title {
						font-size: 20px;
						font-weight: 700;
						}

					div.catalog-item ul li form,
					form.cart-button,
					.float-right {
						float: right;
						clear: both;
						}

					span.catalog-price {
						font-size: 20px;
						font-weight: 700;
                    /*    padding: 4px 8px;
                        margin: 10px 0 0 0;
                        border: 2px solid #000;
                        border-radius: 20px; */
						}

                    /*    span.catalog-price:hover {
                            border-color: #399300;
                        }

                        span.catalog-price a:hover {
                            text-decoration: none;
                        } */

				a.support-btn,
				a.support-btn:hover {
					display: inline-block;
					font-weight: bold;
					font-size: 16px;
					color: #000;
					text-decoration: none;
					background: #6db658;
					padding: 3px 14px;
					border-radius: 14px;
					border-top: 2px solid #acd5a0;
					border-bottom: 2px solid #599649;
					}

			p#bulk-order {
				width: 900px;
				clear: both;
				padding: 10px 15px 0 15px;
				font-size: 14px;
				margin: 0;
				}

				p#bulk-order a {
					color: gray;
					text-decoration: none;
					}

					p#bulk-order a:hover {
						color: black;
						text-decoration: underline;
						}

				img#methods {
					width: 180px;
					position: relative;
					top: -7px;
					}

		img#publication-cover {
			width: 300px;
			margin: 15px;
			float: left;
			box-shadow: 0 5px 10px 0 rgba(0,0,0,0.3);
			}

		h3#publication-title {
			float: left;
			clear: none;
			padding: 0;
			margin-top: 30px;
			}

		ul#publication-info {
			width: 570px;
			float: right;
			padding: 0;
			margin: 0 15px;
			list-style-type: none;
			}

			ul#publication-info li {
				margin-bottom: 10px;
				}

				li#publication-title {
					font-size: 20px;
					font-weight: 700;
					}

		span#publication-price {
			float: left;
			font-size: 20px;
			font-weight: 700;
			margin-right: 10px;
			}

		form#publication-addbtn {
			float: left;
			}

		img.img-left {
			float: right;
			height: 300px;
			margin: 0 0 15px 30px;
			box-shadow: 0 5px 10px 0 rgba(0,0,0,0.3);
			}

		h2.atma {
			font-family: Atma !important;
			letter-spacing: -2px;
			}

			p#badges {
				text-align: center;
				margin-top: 15px;
				}

				p#badges img {
					width: 270px;
					margin: 10px;
					float: none;
					border: 1px solid silver;
					}

		form#contactform {
			width: 430px;
			margin: 15px;
			float: left;
			}

			input.text {
				width: 300px;
				font-size: 16px;
				padding: 5px;
				}

			form#contactform textarea {
				width: 300px;
				height: 100px;
				font-size: 16px;
				padding: 5px;
				}

            #g-recaptcha-response {
                display: block !important;
                position: absolute;
                margin: -50px 0 0 0 !important;
                z-index: -999999;
                opacity: 0;
                }

			input#submitbtn {
				font-family: inherit;
				font-size: 15px;
				border: none;
				border-radius: 3px;
				color: #fff;
				background-color: #aaa;
				box-sizing:border-box;
				height:36px;
				line-height:32px;
				padding:0 18px;
				display: inline-block;
				margin: 0;
				transition: all 0.23s ease-in-out 0s;
				}

				input#submitbtn:hover {
					background-color:#777;
					cursor:pointer;
					}

		div#othercontacts {
			float: right;
			width: 430px;
			margin: 15px;
			}

		div#slider-container {
			width: 960px;
			margin: 0 auto;
			overflow: hidden;
			padding: 0;
			}

			div#slider-container img {
				width: 100%;
				margin: 0;
				padding: 0;
				display: block;
				}

		hr {
			height: 1px;
			border: 0;
			background: #666;
			clear: both;
			margin: 30px 0;
			}

		hr.clear {
			height: 1px;
			border: 0;
			background: transparent;
			clear: both;
			margin: 30px 0 15px 0;
			}

table#multiVersion, table#multiVersion tbody {
    width: 100%;
    overflow: visible;
}

    table#multiVersion td {
        padding: 0 0 15px 0;
        margin: 0;
        border-bottom: 1px solid #666;
    }

		div#signup-container {
			float: left;
			width: 490px;
			margin: 10px 0 30px 0;
			padding: 0;
			opacity: 0.6;
			transition: opacity 0.5s;
			}

			div#signup-container:hover {
				opacity: 1;
				transition: opacity 0.5s;
				}

			#mc_embed_signup {
				clear: left;
				width: 100%;
				}

	footer {
		width: 960px;
		margin: 0 auto 30px;
		}

			p#copyright {
				float: right;
				text-align: center;
				color: #777;
				font-size: 14px;
				margin: 30px 15px 0 0;
				}

@media (max-width: 450px) {

	header {
		width: 100%;
		}

		h1 {
			width: 50%;
			margin: 0 auto;
			}

	nav {
		width: 100%;
		height: 100%;
		}

		nav ul {
			margin: 0;
			}

			nav ul li {
				display: list-item;
				margin: 0;
				border-top: 1px solid #333;
				}

	article {
		width: 100%;
		}

			article h2 {
				margin: 15px 0;
				font-size: 38px;
				text-align: center;
				clear: both;
				}

			article h3 {
				margin: 15px 0;
				padding-top: 20px;
				font-size: 30px;
				text-align: center;
				}

		div.catalog-item {
			width: 100%;
			height: 200px;
			margin: 15px 0;
			clear: all;
			}

			img.catalog-cover {
				width: 120px;
				height: auto;
				}

			span.catalog-badge {
				width: 120px;
				bottom: 75px;
				}

			div.catalog-item ul {
				margin: 0 5px 0 0;
				padding: 0;
				width: 190px;
				font-size: 14px;
				}

				div.catalog-item ul li {
					}

					li.catalog-title {
						font-size: 18px;
						}

						li.catalog-title a {
							}

							li.catalog-title a:hover {
								}

					span.catalog-price {
						font-size: 18px;
						position: relative;
						top: 2px;
						}

		p#bulk-order {
			width: 320px;
			margin: 0 auto;
			text-align: center;
			}

			p#bulk-order a {
				display: block;
				clear: all;
				margin-bottom: 15px;
				}

				img#methods {
					clear: all;
					float: none;
					margin: 0 auto;
					}

		img#publication-cover {
			display: block;
			width: 250px;
			margin: 30px auto 15px;
			float: none;
			}

		h3#publication-title {
			float: none;
			clear: none;
			padding: 0;
			margin-top: 15px;
			text-align: center;
			}

		ul#publication-info {
			width: 335px;
			margin: 0 auto;
			float: none;
			padding: 0;
			}

		img.img-left {
			float: none;
			height: auto;
			width: 100%;
			margin: 0 auto 15px;
			}

		form#contactform {
			width: 350px;
			margin: 0 auto;
			float: none;
			overflow: hidden;
			}

			div#article-padding table {
				width: 300px !important;
				}

			input.text {
				width: 220px;
				}

			form#contactform textarea {
				width: 220px;
				}

			input#submitbtn {
				width: 100%;
				}

			p#badges img {
				float: none;
				clear: all;
				}

		div#othercontacts {
			float: none;
			width: 300px;
			margin: 15px 0;
			}

		div#slider-container {
			width: 100%;
			}

		div#signup-container {
			width: 280px;
			margin: 15px auto 0;
			float: none;
			opacity: 1;
			}

			#mc_embed_signup {
				clear:left;
				width:100%;
				}

	footer {
		width: 100%;
		margin: 15px auto;
		}

			p#copyright {
				width: 100%;
				font-size: 12px !important;
				text-align: center;
				clear: both;
				float: none;
				}

    .mobileHide {
        display: none!important;
    }

}