@charset "utf-8";

/* Global Styles */

.announcement{
	background-color: blue;
	border: solid black 1px;
	color:white;
	margin:auto;
	max-width: 70%;
    padding: 13px 10px 10px 15px;
}

a:hover {
	color: rgba(0, 0, 204);
	text-decoration: none;
	font-size: 1.2em;
}
/*header*/
header {
	font-family: 'Montserrat', sans-serif;
	color: rgba(146,146,146,1.00);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
}
/* div for Links in header */
#headerLinks {
	float: left;
	width: calc( 100% - 139px );
	text-align: right;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: rgba(255,255,255,1.00);
}
/* Links in header */
#headerLinks a {
	text-decoration: none;
	color: rgba(146,146,146,1.00);
	padding-left: 66px;
	font-size: 14px;
}
/* Offer text banner*/
#offer {
	font-family: 'Montserrat', sans-serif;
	clear: both;
	/*background-color: rgba(246,246,246,1.00);*/
	color: #000000;
	padding-left: 14%;
	padding-top: 57px;
	padding-bottom: 57px;
}
/*id to allow wider banner image to swap*/
#banner1 {
	display: block;
 	width:80%;
   height:auto;
}
#banner2 {
	display: none;
	width: 75%;
	height: auto;
}
img.percentage {
	width: 75%;
	height: auto;
}
img.flex {
	height: auto;
}
p.prints {
	font-variant: small-caps;
	font-weight: bold;
	font-size: larger;
	margin-top: -10px;
}
/* Main content of the site */
#content {
	clear: both;
	overflow: auto;
	padding-top: 29px;
}
/* Sidebar */
#content .sidebar {
	font-family: 'Montserrat', sans-serif;
	color: #000000;
	float: left;
	max-width: 13%;
	padding-left: 3%;
	padding-right: 1%;
	text-align: center;
	background-color: rgba(246,246,246,1.00);
	margin-top: 24px;
	max-height: 1200px;
	margin-right: 20px;
}
/* main content of the site */
#content .mainContent {
	/*float: left;*/
	width: 70%;
	padding-left: 17%;
	font-family: 'Montserrat', sans-serif;
	padding-top: 6px;
}
/*menubar's properties for menus in sidebar */
#content .sidebar #menubar {
	text-align: left;
	color: #000000;
	position: relative;
	left: 0%;
}
/* Whole page content */
#mainWrapper {
	width: 100%;
	padding-left: 5%;
}
/*menu elements */
.menu ul li {
	list-style-type: none;
	/*font-size: x-large;*/
	position: relative;
	left: -35px;
	padding-top: 12px;
}
/* Product rows for catalog */
#content .mainContent .productRow {
	overflow: auto;
	color: #000000;
}
/* Each product Information in the catalog */
.mainContent .productRow .productInfo {
	/*float: left;*/
	padding-left: 5%;
	padding-right: 5%;
	width: 22%;
}
/* Prices of a products in catalog */
.productRow .productInfo .price {
	font-family: 'Montserrat', sans-serif;
	color: #000000;
	font-size: .9em;
	position: relative;
	top: -20px;
	margin-bottom: 25px;
}
.price {
	font-family: 'Montserrat', sans-serif;
	font-size: .9em;
	background-color: rgb(224, 224, 235);
	padding: 7px;
	width: 250px;
	margin: auto;
}
.price-prints {
	width: 95%;
	font-size: 1.0em;
	background-color: rgb(224, 224, 235);
	padding: 7px;
	margin: 15px auto 25px auto;
}
/* Content holder for products in catalog*/
.productRow .productInfo .productContent {
	font-size: 1.2em;
	color: #000000;
	line-height: 1.5em;
}
.secondProductRow {
	margin-top: 25px;
	width: 100%;
padding-left:;
	position: relative;
	font-size: 1.2em;
	color: #000000;
	line-height: 1.5em;
	overflow: auto;
	color: #000000;
	max-width: 1100px;
}
.productTitle {
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
}
.productDescription2 {
	text-align: center;
	font-size: 1.0em;
	font-family: 'Montserrat', sans-serif;
}
.fontAdjust {
	font-size: .9em;
	line-height: 1.4em;
	font-family: 'Montserrat', sans-serif;
}
/* Buy button for products in catalog */
.productRow .productInfo .buyButton {
	position: relative;
	top: -48px;
	width: /*84%;*/33%;
	background-color: rgba(208,207,207,1.00);
	height: 35px;
	color: #000000;
	border-style: none;
	font-size: 14px;
	text-transform: uppercase;
	margin: 8px auto 50px 20%;
}
/*Sets the PayPal buy button to the side on single item pages*/
button-position {
	margin-top: -24px;
	margin-left: -98%;
	margin-bottom: 15px;
}
/* Product's images in catalog */
.productInfo div img {
	width: 100%;
	margin-top: 52px;
}
.productInfo2 img {
	width: 100%;
}
.buyButton2 {
	position: relative;
	top: -48px;
	width: 12%;
	background-color: rgba(208,207,207,1.00);
	height: 35px;
	color: #000000;
	border-style: none;
	font-size: 14px;
	text-transform: uppercase;
	margin: 81px auto auto 3%;
}
.price2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 1.0em;
	background-color: rgb(224, 224, 235);
	padding: 7px;
	width: 33%;
	margin: 25px auto auto 18%;
	float: left;
}
/*General Image settings*/
img {
	width: 100%;
	max-width: 1100px;
	height: auto;
}
/*Creates a class for the product images to enable media query sizing*/
img.items {
	width: 100%;
	height: auto;
}
/*Links in sidebar */
.sidebar #menubar .menu ul li a {
	color: #000000;
	text-decoration: none;
}
.sidebar #menubar .menu ul li a:hover {
	color: white;
	text-decoration: underline;
	background-color: rgba(107,97,97,1.00);
	padding: 3px;
}
/* Menu headings in sidebar */
#menubar .menu h2 {
	font-size: 1.4em;
	margin: 10px auto auto 7%;
}
h3 {
	font-size: 1.2em;
	margin: auto auto auto -21%;
}
/*Class to adjust nav menu sub-item*/
li.sub {
	margin-left: 9%;
	font-size: .9em;
}
/*Links under menus in sidebar */
#menubar .menu ul li a {
	font-size: 1.0em;
}
/* Menus in sidebar */
.sidebar #menubar .menu {
	margin-bottom: 29px;
}
/* Add a black background color to the top navigation */
.topnav {
	background-color: #333;
	overflow: hidden;
	visibility: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}
/* Add an active class to highlight the current page */
.active {
	background-color: #4CAF50;
	color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
	display: none;
	margin-right: 37px;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
	float: left;
	overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
	font-size: 17px;
	border: none;
	outline: none;
	color: white;
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
	float: none;
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
	background-color: #555;
	color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
	background-color: #ddd;
	color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
	display: block;
}
/*----------------Flexbox configurations---------------------*/
.flexContent {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flexProductInfo {
	width: 22%;
	float: left;
	padding-left: 5%;
	padding-right: 5%;
	margin-bottom: 63px;
}
.flexMainContent {
	width: 70%;
	float: left;
}
/*----------------styling for shipping table-------------*/

.setPosition{

  padding: 15px;
  text-align: right;
}

.addBorder{
	border: 1px solid black;
}

.addPad{
	padding: 15px;
}
/*------------------Media Queries----------------------*/
@media screen and (max-width: 1296px) {
#content .sidebar {
	max-width: 14%;
}
#menubar .menu h2 {
	margin: 10px auto auto 6%;
}
}

/*When it hits 1000 the banner image changes to smaller percentage*/
@media screen and (max-width: 1100px) {
.banner1 {
	width: 75%;
	height: auto;
}
.topnav a:not(:first-child), .dropdown .dropbtn {
	display: none;
}
.topnav, .topnav a {
	visibility: visible;
}
.topnav a.icon {
	float: right;
	display: block;
}
}
 @media screen and (max-width: 1100px) {
.topnav.responsive {
	position: relative;
}
.topnav.responsive a.icon {
	position: absolute;
	right: 0;
	top: 0;
}
.topnav.responsive a {
	float: none;
	display: block;
	text-align: left;
}
.topnav.responsive .dropdown {
	float: none;
}
.topnav.responsive .dropdown-content {
	position: relative;
}
.topnav.responsive .dropdown .dropbtn {
	display: block;
	width: 100%;
	text-align: left;
}
#offer {
	padding-left: 0%;
}
img {
	width: 75%;
	height: auto;
}
.sidebar {
	display: none;
}
#banner1 {
	width: 80%;
	height: auto;
}
.flexProductInfo {
	width: 33%;
}
}
/*When it hits 1000 the banner image changes to smaller percentage*/
@media screen and (max-width: 1100px) {
.banner1 {
	width: 75%;
	height: auto;
}
.flexContent {
	flex-direction: column;
}
}

/*To adjust placement of banner*/
@media screen and (max-width: 950px) {
#banner1 {
	margin-left: 11%;
}
}

/*When width hits 850 we swap banners*/
@media screen and (max-width: 850px) {
#banner1 {
	display: none;
}
#banner2 {
	width: 53%;
	margin-left: 29%;
	visibility: visible;
	display: block;
}
.productTitle {
	text-align: left;
	margin-left: 20%;
}
.productDescription2 {
	text-align: center;
	font-size: 1.0em;
	margin-left: -29%;
}
.flexProductInfo {
	width: 70% !important;
}
img.items {
	width: 70%;
	height: auto;
}
.price {
	margin: auto auto 3px 6%;
}
.productTitle {
	text-align: center;
	margin-left: -24%;
}
.price-prints {
	width: 68%;
	margin: 15px auto 25px 1%;
}
/*#button1 {
	margin: auto auto 3px 24%;
}*/
}
 @media screen and (max-width: 640px) {
.price {
	width: 100%;
}
.mainContent .productRow .productInfo {
	width: 100%;
}
.fontAdjust {
	padding-left: 0px;
}
.price {
	margin-left: -9%;
}
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
	display: none;
}
.topnav a.icon {
	float: right;
	display: block;
}
.topnav.responsive {
	position: relative;
}
.topnav.responsive a.icon {
	position: absolute;
	right: 0;
	top: 0;
}
.topnav.responsive a {
	float: none;
	display: block;
	text-align: left;
}
.flexProductInfo {
	padding-left: 17%;
}
img.items {
 width: 100%  height: auto;
}
}
 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) 
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}*/

@media screen and (max-width: 410px) {
.price {
	width: 100%;
}
.mainContent .productRow .productInfo {
	width: 100%;
	font-size: .9em;
	max-width: 200px;
}
#mainWrapper {
	width: 100%;
	padding-left: 0%;
}
.price {
	margin-left: -18%;
}
}
 The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) @media screen and (max-width: 600px) {
 .topnav.responsive {
position: relative;
}
 .topnav.responsive a.icon {
 position: absolute;
 right: 0;
 top: 0;
}
 .topnav.responsive a {
 float: none;
 display: block;
 text-align: left;
}
}

/*================= Classes for Popup Box===============*/
 /* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}