*{
    margin: 0;
    padding: 0;
    font-family: Didot;
}
body  {
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #050f36;
    position: relative;
    height: 100%;
    overflow: hidden;
}
.main {
    height: 100%;
    margin-left: 160px; 
    font-size: 28px;
    padding: 0px 10px;
}
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.backgroundvid {
  position: absolute;
  left: 1%;
  top: 5%;
  z-index: -1;
}
.tagvid {
  position: absolute;
  left: 1%;
  top: 5%;
  z-index: -2;
}
.strawvid {
  position: absolute;
  left: 1%;
  top: 5%;
  z-index: -3;
}
.leavesvid {
  position: absolute;
  left: 1%;
  top: 5%;
  z-index: -4;
}
.flowervid {
  position: absolute;
  left: 1%;
  top: 5%;
  z-index: -5;
}
.vinevid {
  position: absolute;
  left: 1%;
  top: 5%;
  z-index: -6;
}
.bluevid {
  position: absolute;
  left: 1%;
  top: 5%;
  z-index: -7;
}
.orangevid {
  position: absolute;
  left: 1%;
  top: 5%;
  z-index: -8;
}
.quotevid {
  position: absolute;
  left: 1%;
  top: 5%;
  z-index: -9;
}
.image {
  left: 1%;
  top: 5%;
  position: absolute;
  z-index: -1;
}
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #050f36;
    color: #e4d1c9;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: fixed;
    z-index: 1;
    font-family: Didot;
  }
  .popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  .popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
  }
  @-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
  }
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }
  .button {
  background-color:#d3983f;
	border-radius:4px;
	border:1px solid #d3983f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family: Didot;
	font-size:17px;
  padding:5px 10px;
	text-decoration:none;
}
.button:hover {
  background-color: #b66d35;
}
.button1 {
    background-color:#031456;
    border-radius:4px;
    border:1px solid #031456;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family: Didot;
    font-size:17px;
    padding:5px 10px;
    text-decoration:none;
}
.button1:hover {
  background-color: #3f5a84;
}
.button2 {
    background-color:#47552e;
    border-radius:4px;
    border:1px solid #47552e;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Didot;
    font-size:17px;
    padding:5px 10px;
    text-decoration:none;
}
.button2:hover {
  background-color: #928b5c;
}
.button3 {
  background-color:#5d6c37;
	border-radius:4px;
	border:1px solid #5d6c37;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Didot;
	font-size:17px;
	padding:5px 10px;
	text-decoration:none;
}
.button3:hover {
  background-color: #928b5c;
}
.button4 {
  background-color:#b66d35;
	border-radius:4px;
	border:1px solid #b66d35;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Didot;
	font-size:17px;
	padding:5px 10px;
	text-decoration:none;
}
.button4:hover {
  background-color: #dfa96a;
}
.button5 {
  background-color:#90a2c1;
	border-radius:4px;
	border:1px solid #90a2c1;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Didot;
	font-size:17px;
	padding:5px 10px;
	text-decoration:none;
}
.button5:hover {
  background-color: #597398;
}
.button6 {
  background-color:#9b4637;
	border-radius:4px;
	border:1px solid #9b4637;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Didot;
	font-size:17px;
	padding:5px 10px;
	text-decoration:none;
}
.button6:hover {
  background-color: #ad6560;
}
.button7 {
  background-color:#e4d1ca;
	border-radius:4px;
	border:1px solid #e4d1ca;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Didot;
	font-size:17px;
	padding:5px 10px;
	text-decoration:none;
}
.button7:hover {
  background-color: #d8b6ae;
}
.button8 {
  background-color:#c38281;
	border-radius:4px;
	border:1px solid #c38281;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Didot;
	font-size:17px;
	padding:5px 10px;
  text-decoration:none;
}
.button8:hover {
  background-color: #ad6560;
}
.button9 {
  background-color:#dfa76b;
	border-radius:4px;
	border:1px solid #dfa76b;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Didot;
	font-size:15px;
	padding:5px 10px;
  text-decoration:none;
  visibility: hidden;
  margin-left: 180;
  margin-top: 5;
}
.button9:hover {
  background-color: #d1965c;
}
#overlay {
  background: #050f36;
  opacity: 75%;
  height: 795px;
  width: 1250px;
  color: #fff;
  padding: 250px 0;
  z-index: 1;
  text-align: center;
}
.text{
  position: absolute;
  top: 50%;
  left: 0%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  z-index: 3;
}
.button {
  z-index: 10;
  left: 50%;
  top: 50%;
}
.button .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
.buttons {
  margin-left: 200;
}
.close {
  background-color:#e4d1ca;
	border-radius:13px;
	border:1px solid #e4d1ca;
	display:inline-block;
	cursor:pointer;
	color: black;
	font-family: Didot;
	font-size:15px;
	padding:5px 10px;
  text-decoration:none;
}