/* site.css */

header{
  font-family: : Optima, sans-serif;
  font-style: italic;
  font-size: 20px;
  text-align: center;
  padding: 20px;
}


body {
  padding: 10px;
  font-family: Avenir
  font-size: 17px;
  background-color: rgb(252, 250, 232);
}

footer {
  font-family: : Optima, sans-serif;
  font-style: italic;
  font-size: 15px;
  text-align: center;
  padding: 20px;

}

a {
  color: rgb(22, 82, 15);
  align-items: center;
}

html, body {
  padding: 10;
  margin: 10;

}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
  padding: 10px;
}

h1,h3, h4 {
  color: #12440A
}

p {
  font-size: 17px;
  border:1px  #12440A;
  font-family: Avenir; sans-serif; 
  font-color:  #12440A;
  border-radius: 20px;
  padding: 10px 20px 10px;
}
table {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  padding: 8px;
  align-items: center;
  width: 80%;
  border color: : #12440A;
  border-width: 10px
  font color: #12440A;
  font-family: Avenir; sans-serif; 
  text-align: center;



}

box-sizing: border-box;


.seat {
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  align-items: center;

}

.banner {
  display: block;
  margin-left: auto;
  margin-right: auto;

}

.banner:hover {
  opacity: 0.7;
}

/*Menu and navigation*/

.topnav {
  background-color: #12440A;
  overflow: hidden;
  text-align: center;
}

.topnav a:hover {
  opacity: 0.7;
}

.topnav a {
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
}

/* Social media buttons*/
.fa {
  padding: 20px;
  font-size: 15px;
  width: 25px;
  text-align: center;
  text-decoration: none;
}

.fa:hover {
  opacity: 0.7;

}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

}

/* Checkout form*/

input[type=text] {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

label {
  margin-bottom: 5px;
  display: block;
}


.row {
  display: -ms-flexbox; 
  display: flex;
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap;
  margin: 5 -16px;
}

.odersummary {
  -ms-flex: 25%; 
  flex: 25%;
  float: right;
  position: absolute;
  padding:  10px;
  margin-top: 15px;
  margin-right: 15px;
  margin-left: 15px;
}

.col-25 {
  -ms-flex: 25%; 
  flex: 25%;
}

.col-50 {
  -ms-flex: 50%; 
  flex: 50%;
}

.col-75 {
  -ms-flex: 75%; 
  flex: 75%;
}

.col-25,
.col-50,
.col-75 {
  padding: 3 16px;
}

.container {
  background-color: #DFE5DD;
  padding: 5px 20px 15px 20px;
  margin-top: 20px;
  margin-right: 20px;
  margin-left: 20px;
  border: 1px solid #12440A;
  border-radius: 3px;
  
}

.icon-container {
  margin-bottom: 20px;
  padding: 7px 0;
  font-size: 24px;
}


.btn {
  background-color: #12440A;
  color: white;
  padding: 12px;
  margin: 10px 0;
  border: none;
  width: 100%;
  border-radius: 3px;
  cursor: pointer;
  font-size: 17px;
}

.btn:hover {
  opacity: 0.7;
}

span.price {
  float: right;
  color: #12440A;


}

@media (max-width: 800px) {
  .row {
    flex-direction: column-reverse;
  }
  .col-25 {
    margin-bottom: 20px;
  }
}