@charset "UTF-8";
/* CSS Document 
colors:
#304818 green
#3D3324  umber
#907830  earthy yellow
#F7BB52 mustard yellow
#603000 burnt sienna
*/

* {box-sizing: border-box;}
header, topnav, main, footer, figure, figcaption { display: block; }

body, html {
    height:  100%;margin:  0px auto;padding: 0px auto;
	}

#wrapper {
    height: auto; max-width: 1200px;min-height: 100%; margin: auto; padding:20px;
 }
#topHead {clear: both;margin: 0px;}

.absolute_left {
  position: absolute; top: 0px; left: 30px;width: 200px;height: 50px;
}
.absolute_right {position: absolute;top: 20px; right:50px; height: 50px;}


.hide {  display: none;} 
.myDIV:hover + .hide {display: block;  color: yellow;font-family: 'Montserrat', sans-serif; font-size: .7em;
}

header {color: black; padding-bottom: 165px;	margin-bottom: 0px;
   	background-image: url("images/rose_heropic.png");
	background-size: cover;
	min-height: 100px;max-width: 1600px;
	background-repeat: no-repeat;}

main { background-color:white ;color: #000000;width: 100%;margin: 0;} 

a { text-decoration: none; color: white;}
a:link { color: darkgreen;text-decoration: none;}
a:visited { color: #292727; }
a:hover {  color: #907830; text-decoration: underline; }


footer { font-size:100%; text-align: center;
clear: right;position: static;left:0;bottom: 0;width: 100%;padding: 2px;
color:white;background-image: linear-gradient(to bottom,#603000,#304818);
}

footer a {color: #ffffff;text-decoration: none; }
footer a:link { color: #ffffff; }
footer a:visited { color: #eaeaea; }
footer a:hover {  color: #907830;}
footer h3{color: rgba(246,220,11,1.00)}

/* Create 2 equal columns that float next to each other */
.column {float: left;width: 50%;padding-left: 30px;padding-right: 30px}

/* Clear floats after the columns */
.row:after {content: "";display: table;clear: both;
}


/* Create 2 equal columns with less paddingr */
.column_b {float: left;width: 50%;padding: 10px;}
/* Clear floats after the columns */
.row_b:after {content: "";display: table;clear: both;}

.transparent{
	background-color: rgba(144,120,48,.40);
	padding: 5px;border-radius: 15px; 
	border: 1px solid #502626;text-align: center;}

.transparent2 {width: 200px}

/* Create grid */

.item1 { grid-area: bottomnav; }
.item2 {grid-area: copy;}
.item3 { grid-area: hours;}
.item4 { grid-area: contact;}
.item5 { grid-area: connect;}
.item6 { grid-area: news; }

.grid-container {
  display: grid;
  grid-template-areas:
    'bottomnav bottomnav copy copy'
    'hours contact connect news';
grid-gap: 10px;  padding: 10px;font-family: 'Montserrat', sans-serif;}

.grid-container > div {
  text-align: center;  padding: 2px 0;font-size: .8em;}


/* images */
img {padding: 5px;margin: 1em;}

.img1 {border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: 5px 5px 5px #777;
display: block;	margin-left: auto;  margin-right: auto; }

/* text */

h1 {text-align: left;
	font-size: 160%;
	color: rgba(4,58,13,1.00);
	padding-top:5px;padding-left: 5px;}

.tag {font-size: .9em;
		font-family: 'Montserrat', sans-serif;
	    text-align: right;
		color: rgba(34,65,1,1.00);}	

h2 { color: rgba(34,65,1,1.00); 
	font-family: 'Montserrat', sans-serif;
     font-size: 120%;}
h3 { color: #0F7B06; 
     font-family: arial, sans-serif;
	 font-size: 120%;}

hr.new1 {border-top: 3px solid green;}
hr.new2 {border-top: 3px solid green;width: 25%;float: left;}

#p2{font-size: 0.7em;}

/*Top responsive Navigation */

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 10px 15px;
  text-decoration: none;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif; 
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #304818;
  color: white;
}

.topnav .icon {
  display: none;
}

/* Horizontal bottom Navigation */

.nav2 ul {list-style: none;
  margin: 0;  padding: 0;text-align: left; }

.nav2 li {padding: 3px;display: inline-flex;font-family: 'Montserrat', sans-serif; font-size: .9em;}


/* Slideshow container */ 
.slideshow-container {max-width: 1000px;position: relative;margin: auto;}

/* Caption text */
.text {  color: black;  font-size: 15px;
  padding: 8px 12px; position: relative;
  right: 0px;  width: 100%;  text-align: center;
}

/* Number text (1/4 etc) 
.numbertext {
  color: #f2f2f2;  font-size: 6px;
  padding: 8px 12px;  position: absolute;
  top: 0;
}*/

/* The dots/bullets/indicators */
.dot {
  height: 15px;  width: 15px;  margin: 0 2px;
  background-color: #bbb;  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;}

.active {
  background-color: #717171;}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


/* makes images responsive to screen size */
img{width: auto;height: auto;}


/* makes web page into 2 coumns for tablet size */
@media only screen and (max-width:1024px) {
	main{margin-left: 0;}
		nav{float: none;width: auto;}
	/* fine tunes the look of the single col */

	.column {width: 50%;}
	body{margin: 0;}
	
	header { 
	background-size: 100%;
	min-height: 100px;padding-bottom: 125px;	}
	
	h2 {font-size: 130%;}
	h3 {font-size: 120%;}
	#tag{font-size: .7em;}
	p{font-size: 110%;}
 	
.grid-container {
  display: grid;
  grid-template-areas:
	 'bottomnav'
    'hours' 
	  'contact'
	  'connect'
	  'news'	
	  'copy' ;
	  padding: 5px;} 
	
	.transparent2 {width: 150px; margin: auto;}
	.nav2 ul {text-align: center;}

	/* makes web page into a single col for cell phone size */
	
	
@media screen and (max-width: 780px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }}

@media screen and (max-width: 780px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;  }
	
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;  }
}
	
	
	
@media only screen and (max-width:780px) {
	main{margin: 0;}
	
	#wrapper{width: 100%; margin: 0px;}
	body 
	{background-image: linear-gradient(to bottom,white,white);
	}
	
	main { margin-left: 0px;
	background-color: white;}
	
	header {background-size: 100%;background-image: url("images/rose_hero_short.png");
		min-height: 90px;margin-bottom: 5px;} 
	
	#topHead {clear: both;margin-top: 10px;}
	 .column {width: 100%;}
	
	h1 {text-align: left;
	color: rgba(4,58,13,1.00);
	padding-top:5px;padding-left: 5px;}
	
	h2 {font-size: 120%;}
	h3 {font-size: 110%;}
	
	.transparent2 {width: 50%; margin: auto;}
	
	.tag {font-size: .8em;
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
		text-align: right;}
			
	.tag2 {font-size: .9em;
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	    text-align: left;
		color: black;}	
	
	.nav2 ul {text-align: center;}
	}

}

@media only screen and (max-width:450px) {
	
	
	header { 
	background-size: 100%;background-image: url("images/rose_hero_sq.png");
		min-height: 100px;margin-bottom: 5px;}}