/* Media Queries resize the browser font view when size is changed
------------------------------------------*/
@media screen and (max-width: 1600px) {body{font-size: 1.375em;}#wrapper{width:960px}}
@media screen and (max-width: 960px) {body{font-size: 1.125em;}#wrapper{width:960px}}
@media screen and (max-width: 768px) {body {font-size: 1em;}#wrapper{width:768px}}
@media screen and (max-width: 550px) {body{font-size: .875em;}#wrapper{width:550px}}
@media screen and (max-width: 320px) {body{font-size: .75em;}#wrapper{width:320px}}

@media screen and (max-width: 1600px){#menu{ max-width:100%;} }
@media screen and (max-width: 960px){#menu{ max-width:75%;} }
@media screen and (max-width: 550px){#menu{ max-width:50%;} }
@media screen and (max-width: 320px){#menu{ max-width:25%;} }

 
/* RB added this
--------------------------
img{max-width:100%} ----------------*/ 

/*@media screen and (max-width: 320px) {header img{width: 50%;}header img{height:50%}}*/
header img{
	max-width:100%;

}

/*-- R
wrapper img{
  max-width:60%;
  }
/*-- RB this is what is making it not responsive - but of removed it breaks slideshow  --*/

  
#menu{
  max-width:100%;
}


/* Fonts --*/
/* --- RB commented out body----------------------------------*/

body {
  font-family: Papyrus, fantasy;
  font-weight: bold;
  margin: 0;
  text-align: center;  

}
h1 {
	font-family: Papyrus, fantasy;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	text-align: center;
	color: #6699ff;
	
}
h3 {
	font-family: Papyrus, fantasy;
	font-style: normal;
	font-variant: normal;
	font-weight: 500;
	text-align: center;
}
p {
	font-family: Papyrus, fantasy;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	text-align: center;
}

.class { 
	font-family: Papyrus,fantasy; 
}

a {
  color: crimson;
  text-decoration: none;
}

a:hover {
  color: red;
}


/* Layout
------------------------------------------*/

.sticky {
  margin: 0 auto;
  width: 100%;
  position: fixed;
  top: 0;
  background: #cce6ff;
}

header{
	padding:6em;
	padding-bottom: 0;
	margin: 0 auto;
	text-align: center;
	width:30%; /* Perfectly aligns logo to how I wanted-----------------*/
	height:10%;
}

.container,
footer {
  margin: 0 auto;
  width: 100%;
  height:100%;
  /* --- max-width: 1080px -- */;
}

.wrapper {
  padding: 1em 1em;
  background: #ffffff;
}

#menu {
  max-width:100%;
  
  /*--RB remove this max-height:700px; */
}

.mapdiv{
  padding-left:28%;
  max-width: 100%;

  overflow:hidden;
  max-height:440px;
  height: 27.5em;
  max-width:700px;
  width: 43.75em;
}


nav ul{
	list-style:none; /*Removes bullet points from the list*/
    padding:1em; /*keeps nav centered*/
	margin:0;

}
nav ul li{
	display:inline;/*-This keeps them inline rather than underneath each other-*/
}
nav ul li a{
	display:inline-block; /*-Creates a space between the header and naviation-*/
    background:#CCFFFF; 
    padding: .5em .5em;
    text-decoration: none;
    border-radius:5px 5px; /*-Makes nav buttons curved-*/

}
nav ul li a:hover{ 
    background:#ff7733;
    transform:scale(1.2);
    transition: all .5s ease-in-out;
    opacity:.8;
}


/*! Flickity v1.2.1
http://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled { /* Aligns the position of the slideshow------*/
  position: relative;
  
}

.flickity-enabled:focus {
  outline: none;
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider { /* Aligns the position of the slideshow buttons as well as changing the size------*/
  position: absolute;
  width: 100%;
  height: 100%;
}


/* draggable */

.flickity-enabled.is-draggable { 
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}


/* ---- previous/next buttons ---- */

.flickity-prev-next-button { /* Button postion, size, colour-----*/
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: white;
  background: hsla(0, 0%, 100%, 0.75);
  cursor: pointer;
  /* vertically center */
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.flickity-prev-next-button:hover {
  background: white;
}

.flickity-prev-next-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #09F;
}

.flickity-prev-next-button:active {
  opacity: 0.6;
}

.flickity-prev-next-button.previous {
  left: 10px;
}

.flickity-prev-next-button.next {
  right: 10px;
}


/* right to left */

.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}

.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button:disabled {
  opacity: 0.3;
  cursor: auto;
}

.flickity-prev-next-button svg {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

.flickity-prev-next-button .arrow {
  fill: #333;
}


/* ---- page dots ---- */

.flickity-page-dots { /* Sizing page dots-----*/
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots {
  direction: rtl;
}

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}

/* nav media quries, changes the size of nav makes sure it is responsive------*/

@media screen and (max-width: 1600px) { nav ul li a {font-size:.8em;}} 
@media screen and (max-width: 960px) {{ nav ul li a {font-size:.6em;}}
@media screen and (max-width: 550px) {{ nav ul li a {font-size:.4em;}}
@media screen and (max-width: 320px) {{ nav ul li a {font-size:.3em;}}