/* CSS Document */

* {
  box-sizing: border-box;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
  float: left;
  padding: 5px;
  border: 0px solid red;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

h1,h2,h3,h4,h5,p,ul,select,input,textarea,submit,fieldset,th,td,ol,li, td {
	font-family: 'Merriweather', serif;
}

p,ul,select {
	font-size: 20px;
}

input,textarea,submit {
	font-size: 22px;
}

fieldset {
	font-size: 22px;
	margin-bottom: 30px;
	background-color: white;
	color: teal;
	border: solid teal 2px;
}

legend {
	background-color: teal;
	color: white;
	padding: 8px;
}

body {
	background-color: teal;
	margin: 0px;
}

#mainpic {
	max-width: 80%; 
	margin: 10px 0px 0px 0px; 
	border-radius: 20px;
}

#mainpictext {
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%); 
	font-size: 24px; 
	color: wheat; 
	background: rgba(0,0,0,0.8); 
	padding: 10px; 
	border-radius: 30px;
	font-family: 'Merriweather', serif;
	width: 60%;
}

.locationmap {
	width: 100%; 
	height: 600px;
	margin-bottom: 10px;
	border: solid white 8px;
	border-radius: 10px;
}

.bottom-pic {
	float: left; 
	width: 25%;
}

li {
	line-height: 30px;
}

.glow {
  font-size: 25px;
  color: teal;
  text-align: center;
  -webkit-animation: glow .5s ease-in-out infinite alternate;
  -moz-animation: glow .5s ease-in-out infinite alternate;
  animation: glow .5s ease-in-out infinite alternate;
}

#emaildiv {
	width: 80%; 
	border: solid white 10px; 
	background-color: teal; 
	border-radius: 20px; 
	padding: 5px; 
	margin-left: auto; 
	margin-right: auto;
}

#read-blog {
	column-count: 3; 
	column-rule: 1px solid black;
	padding: 6px;
}

#fs1 {
     margin-right: 10px; 
     border: solid black thin;
}

#fs2 {
     margin-left: 10px; 
     border: solid black thin;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0px;
}

.flex-container > div {
    width: 30%;
    margin: 20px auto 20px;
    text-align: center;
     padding: 0px;
     background-color: burlywood;
      color: black;
     border: solid 5px rgba(71,71,71,1.00);
}

.flex-container > div:hover {
     box-shadow: 0px 0px 26px black;
     /*cursor: pointer;*/
}   

.flex-container-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0px;
}

.flex-container-2 > div {
    width: 45%;
    margin: 20px auto 20px;
    text-align: center;
     padding: 0px;
     background-color: burlywood;
      color: black;
     border: solid 5px rgba(71,71,71,1.00);
}

.flex-container-2 > div:hover {
     box-shadow: 0px 0px 26px black;
     /*cursor: pointer;*/
}
@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 35px indianred, 0 0 50px red, 0 0 65px red, 0 0 80px red, 0 0 105px red;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px fff, 0 0 40px fff, 0 0 50px fff, 0 0 60px fff, 0 0 70px v, 0 0 80px fff;
  }
}

#updatethermometer {
	width: 100%;
	background-color: teal; 
	color: white; 
	border: solid white 8px; 
	border-radius: 15px; 
	margin-left: auto; 
	margin-right: auto; 
	padding: 15px; 
	margin-bottom: 50px;
}

#event-input {
	width: 100%;
	background-color: teal; 
	color: white; 
	border: solid white 5px; 
	border-radius: 8px; 
	margin-left: auto; 
	margin-right: auto; 
	padding: 15px; 
	margin-bottom: 50px;
}

#video {
	width: 790px; 
	margin-left: auto; 
	margin-right: auto;
}

#words {
	font-size: 28px; 
	color: wheat; 
	text-decoration: none;
}

.lunch-con {
   width: 50%;
}

@media only screen and (max-width: 1366px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }

	h1 {
		font-size: 24px;
	}
	
	p,ul {
	font-size: 16px;
}

	#mainpic {
		max-width: 100%; 
	}
	
	#mainpictext {
		font-size: 20px; 
	}
	
	.locationmap {
		border:0; 
		width: 100%; 
		height: 300px;
	}
	
	.bottom-pic {
		float: none; 
		width: 95%;
	}
	
	#updatethermometer {
		width: 100%;
		padding: 0px 2px 10px 2px;
	}
	#video {
		width: 100%; 
		margin-left: auto; 
		margin-right: auto;
	}
	#emaildiv {
		width: 98%; 
		border: solid white 2px; 
	}
	#read-blog {
		column-count: 1; 
	}
	#words {
		font-size: 18px; 
		color: wheat; 
		text-decoration: none;
	}
     #fs1 {
          margin-right: 0px; 
     }

     #fs2 {
          margin-left: 0px; 
     }
   
   .flex-container > div {
       width: 100%;
   }

   .flex-container-2 > div {   
      width: 100%;
   }
   
   .lunch-con {
      width: 100%;
   }

}