/*
Simple Responsive Template v 1.2


primary styles 
   Author: www.prowebdesign.ro
   Add your own styles to customize the project.



BASE (MOBILE) SIZE
	These are the mobile styles. It's what people see on their phones.
	Remember, keep it light: Speed is Important.
*/
/* logo green #6AC704 */
/* darker green #23582A (banner h1) */
/* typography */
body{
	color:#333;
	font-family:'Droid Serif', Georgia, serif; 
	font-size:1em;
	line-height:1.4em; 
	font-weight:normal;
}
h1, h2, h3, h4, h5, h6{
	font-weight:normal;
	font-family:'Droid Serif', Arial, Helvetica, sans-serif; 
	line-height:1.5em;
	margin:.45em 0;
	padding:0;
} 

h1 {
	font-size: 1.5em;
	font-weight: bold;
}


/* Box sizing. Awesome thing. Read about it here: https://www.w3schools.com/cssref/css3_pr_box-sizing.asp */
*{	box-sizing:border-box;
	-moz-box-sizing:border-box;}

  
/* structure */   
.wrapper{
	max-width: 1200px;
}
#banner{ 
width: 100%;
text-align: right;
padding-bottom: -10px;
margin-bottom: -10px;
}
#banner h1, #banner h2, #banner h3 {
	color: #642832;
}
#banner h1 {
	font-size: 2.2em;
	font-weight: bold;
	padding: 0;
	 color:#23582A;
}
#banner h2 {
	font-size: 1.0em;
	font-weight: bold;
	margin: 0;
	padding: 0;
	margin-top: 0;
	margin-right: 5%;
	padding-bottom: 2%;
	color:#666;
}
#banner a {
	color: #23582A;
}
#bodystuff {
    color: #35171C;
    font-family: 'Alegreya Sans';
    margin-left:auto; margin-right: auto;
}
#logo {
	float: left;
	}
	#logo img {
		width: 100%;
	min-height: 180px;
	min-width: 121px;
	max-height: 220px;
	max-width: 121px;
	}
#addropen {
	float:left;
	text-align: left;
	margin-top: 0.5em;
	font-size:100%;
}
#maincontent {
    padding: 1em;
    margin: 0;
    text-align: left;
    font-size: 1.2em;
    margin-left:auto; margin-right: auto;
    background-color: #eee;
}
#maincontent a {
      color: #23582A;
}
#maincontent a:hover {
      color: #367182;
}
#maincontent h1 {
      padding-top: 0.5em;
}
#footercredits {
	color: Maroon;
	font-size: 0.8em;
	clear: both;
	float: left;
}
#footercredits a{
	color: Maroon;
	text-decoration:none;
}
#footercredits a:hover{
	color: Navy;
	text-decoration:underline;
}
#loggedin {
	clear: both;
	float: left;
	
}

div.productarea {
	border-bottom: 3px solid #23582A;
	margin-bottom: 0.25em;
	padding-bottom: 0.25em;
}
div.productarea img {
	width: 30%;
	float: left;
	border: 1px solid silver;
	margin-right: 10px;
}
div.productarea h3 {
	font-weight: bold;
	clear: right;
	color: #23582A;
	font-size: 1.5em;
}
div.productarea p {
	clear: right;
}


/*MAIN MENU*/
.menu-toggle{
	display: block;
}

.srt-menu li a {
color:#000;
	padding: 0px 1em;
}
#menu-main-navigation .srt-menu li.current {
		padding: 0px 1em;

}

/*FOOTER*/
footer{  
	clear:both;
	font-size:80%;
	padding:20px 0;
	text-align: center;

}

#colophonx {
	margin: auto;
	background-color: #6AC704;
}
#colophonx img {
	margin: 0px 20px;
}/*colors and backgrounds*/

/*
LARGER MOBILE DEVICES
This is for mobile devices with a bit larger screens.
*/
@media only screen and (min-width: 481px) {

#banner h1 {
	font-size: 3em;
}
#banner h2 {
	font-size: 1.5em;
	margin-right: 2%;
}
#logo {
	display: block;
}

} 


/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
But I think that some more breathing space is good:)
*/
@media only screen and (min-width: 768px) {
#banner h1 {
	font-size: 2.5em;
}
#banner h2 {
	font-size: 1.1em;
	padding-top: 0em;
}
#addropen {
	float:right;
	text-align: right;
	margin-top: 1.5em;
	font-size:100%;
}
#maincontent {
    text-align: left;
    font-size: 1.2em;
}
h1 {
	font-size: 2.5em;
	font-weight: normal;
}

#logo img {
		width: 100%;
	min-height: 250px;
	min-width: 169px;
	max-height: 250px;
	max-width: 169px;
	}
.menu-toggle{display:none;}
#menu-main-navigation{display:inline;}
.menu-toggle.toggled-on{
	background:none;
}
#menu-main-navigation ul li {
	display: inline;
	background:none;
	padding: 0px;
}
.srt-meuu ul {
	display: inline;
	width: 100%;
}
#menu-main-navigation {
	border-top: 1px solid silver;
	border-bottom: 1px solid silver;
	padding: 0.5em;
	font-size: 1.0em;
	background-color: #6AC704;
	width: 96%;
	margin-left: 2%;
	margin-top: 0px;

}
#menu-main-navigation .srt-menu li.current {
	color: #444;
	font-size: 0.9em;
	padding: 0px 1em;
	font-weight: bold;
}
#menu-main-navigation .srt-menu li, #menu-main-navigation .srt-menu li a {
	
	display: inline;
	list-style-type: none;
	font-size: 0.9em;
	color: #000;
}
#maincontent {
    text-align: left;
    font-size: 1.2em;
}
.menu-toggle{display:none;}
#menu-main-navigation{display:block;}
.menu-toggle.toggled-on{
	background:none;
}
.srt-menu li {
	background:none;
	padding: 0px;
}

.srt-menu {
	padding-bottom: 0px;padding-top: 0.0em;
	font-size: 1.05em;
}
#menu-main-navigation .srt-menu li.current {
	color: #444;
	font-size: 1.2em;
	font-weight: bold;
	padding: 0px 1em;
}
#menu-main-navigation .srt-menu li, #menu-main-navigation .srt-menu li a {
	display: inline;
	list-style-type: none;
	font-size: 1.2em;
	padding: 0px 0em;
}
} 

/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 920px) {
	#maincontent {
		text-align: left;
		font-size: 1.2em;
	}
	.menu-toggle{
		display:none;
	}
	#menu-main-navigation{
		display:block;
	}
	.menu-toggle.toggled-on{
		background:none;
	}
	.srt-menu li {
		background:none;
		padding: 0px;
	}

	.srt-menu {
		padding-bottom: 0px;padding-top: 0.0em;
		font-size: 1.05em;
	}
	#menu-main-navigation .srt-menu li.current {
		color: #444;
		font-size: 1.2em;
		font-weight: bold;
		padding: 0px 1em;
	}
	#menu-main-navigation .srt-menu li, #menu-main-navigation .srt-menu li a {
		display: inline;
		list-style-type: none;
		font-size: 1.2em;
		padding: 0px 0em;
	}
}