@import url("https://fonts.googleapis.com/css?family=Ranchers|Montserrat");


body {background-image:url('images/gallybg.png')}
#container {display: block; width:97%; min-height:150px; margin:auto; background: black url("images/grass-large.png") repeat-x top}

#medcontainer {display: none;width:97%; min-height:100px; margin:auto; background: black url("images/grass.png") repeat-x top}

#smallcontainer {display: none; width:97%; min-height:100px; margin:auto;  background: black url("images/grass.png") repeat-x top}
#black {background: black;  padding-bottom:10px ;padding-top:10px; margin-top: -10px}
#bigtextbox {display: block; width:93%; min-height:150px; margin:auto; background: #ffca6d; padding:15px}
#bigcenter {display: block; width:93%; min-height:150px; margin:auto; background: #ffca6d; padding:15px;	 text-align: center}
#smalltextbox {display: none; width:90%; min-height:150px; margin:auto; background: #ffca6d; padding:15px}
#smallcenter {display: none; width:90%; min-height:150px; margin:auto; background: #ffca6d; padding:15px;  text-align: center}

#map {  height: 400px; width: 97%;  margin:auto; }
.text { font-family: cursive; color: #202020}
.redtext { font-family: Montserrat, Arial, Helvetica, sans-serif; color: #e13023; font-size: 20px}
.titletext  {font-family: Ranchers, Arial, Helvetica, sans-serif;  text-align: center;	font-size: 50px;	color:gray;line-height:170% }
.medtext {font-family: Ranchers, Arial, Helvetica, sans-serif;  text-align: center;	font-size: 28px;	color:gray;	line-height:150% ;}
.smalltext {font-family: Ranchers, Arial, Helvetica, sans-serif;	font-size: 18px;	 text-align: center; color:gray;	line-height:150% ;  #ababab;}
.smallshadow { text-shadow: 2px 2px 2px 2px #ababab;}
.white a {font-family: Times New Roman, Times, serif;; color: white; font-size: 15px}
.white a:hover {font-family: Times New Roman, Times, serif;; color: #ababab; font-size: 15px}

.results{float:left; margin-left: 10%;}

/*NAVIGATION STUFF*/


.navbar {width:97%; margin: auto; color:white; font-family: Montserrat, Arial, Helvetica, sans-serif}
.navbar a {width:97%; margin: auto; color:white; font-family:  Montserrat, Arial, Helvetica, sans-serif }
.navbar table {  border-collapse: collapse;  border: 5px solid black; }
.navbar td { background: black; text-align:center; padding:10px; border:}
 .navbar td a { background: black; text-align:center; color:white; text-decoration:none; padding:10px;}
.navbar td a:hover {background:#553709; text-align:center; color:#ffca6d; text-decoration:none; padding:10px; }
.smallnavbar {display:none; width:97%; margin: auto; color:white; font-family: Arial, Helvetica, sans-serif;  font-size: 14px;line-height: 150%;}
.smallnavbar table {  border-collapse: collapse;  border: 5px solid black; }
.smallnavbar td { background: black; text-align:center; padding: 5px; border:}
.smallnavbar td a { background: black; text-align:center; color:white; text-decoration:none; padding:5px;}
.smallnavbar td a:hover {background:#553709; text-align:center; color:#ffca6d; text-decoration:none; padding: 5px; }

/*END OF NAVIGATION STUFF*/

/*IMAGE STUFF*/
#pictures {width:90%; min-height:150px; margin:auto; background: #ffca6d; padding:15px
 
}
.flexbox_container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
  align-content: stretch;
}
.flexbox_item {
  flex-basis: 28%;
  object-fit: fill;
padding:5px
}

.flexbox_item img {
  vertical-align: middle;
  width: 100%;
  height: 100%;
border: 1px solid #b9aa9f 

}
#black {display:none }
/*END OF IMAGE STUFF */

@media only screen and ( max-width: 1200px ) {
  .navbar{display: none;}
  .smallnavbar{display: block;}

  #container{display: none;}
#medcontainer{display: block;}
.titletext  {font-size: 20px;	 }
}
@media only screen and ( max-width: 800px ) {

.navbar{display: none;}
.smallnavbar{display: block;}
#container{display: none;}
#medcontainer{display: none;}
#smallcontainer{display: block;}
.titletext  {font-size: 20px;	}

}