* {
  margin: 0;
  box-sizing: border-box;
}

body {
	font-family: Tahoma, Verdana, sans-serif;
	height: 100%;
}

.container {
  display: grid;
  grid-template-columns: 320px 1fr auto;
  grid-template-rows: 200px 100vh auto;
  gap: 4px 4px;
  justify-items: stretch;
  align-items: stretch;
  justify-content: start;
  align-content: start;
  grid-auto-columns: auto;
  grid-auto-rows: auto;
  grid-auto-flow: row;
}

.item1 {
  grid-area: logo;
  background-image: url("images/trawa1920_200.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: countain;
  position: fixed;
  height: 200px;
  width: 100%;
  text-align: center;
}

.item2 {
  grid-area: info;
  border: 2px solid #00CC77;
  border-radius: 5px;
  justify-items: center;
  align-items: top;
  text-align: center;
  }
  
.item3 {
  grid-area: main;
  border: 2px solid #00CC77;
  border-radius: 5px;
  justify-items: center;
  align-items: top;
  text-align: center;
}

.item4 {
  grid-area: note;
  border: 2px solid #00CC77;
  border-radius: 5px;
  justify-items: center;
  align-items: top;
  text-align: center;
}

.item5 {
  grid-area: footer;
  background-color: #77FF77;
  justify-items: center;
  align-items: middle;
  text-align: center;
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
}

@media only screen and (max-width: 600px) {
  .item1 {grid-area: 1 / span 3;}
  .item3 {grid-area: 2 / span 3;}
  .item2 {grid-area: 3 / span 3; height: 50vh;}
  .item4 {grid-area: 4 / span 3;}
  .item5 {grid-area: 5 / span 3;}
}

@media only screen and (min-width: 600px) {
  .item1 {grid-area: 1 / span 3;}
  .item3 {grid-area: 2 / span 3;}
  .item2 {grid-area: 3 / span 3; height: 50vh;}
  .item4 {grid-area: 4 / span 3;}
  .item5 {grid-area: 5 / span 3;}
}

@media only screen and (min-width: 1024px) {
  .item1 {grid-area: 1 / span 3;}
  .item2 {grid-area: 2 / span 1; height: auto;}
  .item3 {grid-area: 2 / span 1;}
  .item4 {grid-area: 2 / span 1;}
  .item5 {grid-area: 3 / span 3;}
}

.grid-calendar {
  display: grid;
  grid-template-columns: 14% 14% 14% 14% 14% 14% 14%;
  gap: 3px;
  justify-content: center;
  background-color: white;
  padding: 1px;
}

.grid-calendar > div {
  background-color: white;
  border: 2px solid #CCCCCC;
  border-radius: 8px;
  padding: 10px;
}

.monthyear {
  grid-column-start: 1;
  grid-column-end: 3;
  font-size: 24px;
  border-color: #F1F1F1;
}

.dayname {
  font-size: 10pt;
  color: #993300;
}

.itemname {
  grid-column-start: 3;
  grid-column-end: 7;
  font-size: 8pt;
}

.sunset {
  grid-column-start: 7;
  grid-column-end: 8;
  background-image: url("images/miniatures/sun.png");
  background-position: 2px center;
  background-repeat: no-repeat;
  text-align: right;
}

.grid-news {
  display: grid;
  grid: auto;
  grid-gap: 5px;
  background-color: #FFFFFF;
  padding: 5px;
}

.grid-news > div {
  border: 2px solid #993300;
  border-radius: 5px;
  text-align: center;
  padding: 5px;
}

.grid-notice {
  display: grid;
  grid: auto;
  grid-gap: 5px;
  background-color: #FFFFFF;
  padding: 5px;
}

.grid-notice > div {
  border: 2px solid #993300;
  border-radius: 5px;
  padding: 5px 5px;
}

.grid-gallery {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 5px;
  border-radius: 5px;
  padding: 0px;
}

.grid-gallery > div {
  border: 2px solid #993300;
  border-radius: 5px;
  text-align: center;
  padding: 5px 5px;
}

.grid-manage {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 3px;
  background-color: white;
  padding: 0px;
}

.grid-manage > div {
  //background-color: white;
  //border: 2px solid #993300;
  //border-radius: 8px;
  text-align: center;
  padding: 10px;
}

.grid-login {
  display: grid;
  grid: auto;
  grid-gap: 5px;
  background-color: #FFFFFF;
  padding: 5px;
}

.grid-login > div {
  border: 2px solid #993300;
  border-radius: 5px;
  box-shadow: 5px 5px #AAAAAA;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  width: 280px;
}

ul {
  list-style: square inside url("images/point1.png");
  padding: 1em;
}

.li	{
	font-family: Arial;
	font-weight: normal;
	font-style: normal;
	font-size: 12pt;
	text-decoration: none;
	margin-top: 12pt;
	margin-bottom: 12pt;
	}

.point_1
	{
	list-style-image: url("images/point1.png");
	}
	
.point_2
	{
	list-style-image: url("images/point2.png");
	}

.point-pdf
	{
	list-style-image: url("images/pdf.jpg");
	}
	
.point-doc
	{
	list-style-image: url("images/word.png");
	}

.point-cal
	{
	list-style-image: url("images/calendar.png");
	}

.brown {
	color: #604000;
	}

.lightbrown {
	color: #993300;
	}

.green {
	color: #008000;
	}

.yellow {
	color: #EEEE00;
	}

.red {
	color: #FF0000;
	}

.gray {
	color: #777777;
	}

.pink {
	color: #FBADAB;
}

.darkgreen {
	background-color: #BBFFBB;
	}

.lightgreen {
	background-color: #DDFFDD;
	}

.white {
	background-color: #FFFFFF;
	}
	
.capitalic {
	text-transform: capitalize;
	}
	
.title
	{
	color: #00AA00;
	font-family: Arial;
	font-weight: bold;
	font-style: normal;
	font-variant-caps: small-caps;
	text-decoration: none;
	text-align: left;
//	margin-top: 6pt;
//	margin-bottom: 6pt;
	}
	
.award
	{
	color: #008000;
	font-family: Arial;
	font-weight: bold;
	font-style: normal;
	font-size: 12pt;
	font-variant-caps: small-caps;
	text-decoration: none;
	text-align: left;
	margin-top: 3pt;
	margin-bottom: 3pt;
	}

.managerod {
	color: #00A000;
	font-family: Arial;
	font-weight: bold;
	font-style: normal;
	font-size: 8pt;
	text-decoration: none;
	margin-top: 0pt;
	margin-bottom: 0pt;
	text-align: right;
}

.calday {
	color: #993300;
	font-family: Arial;
	font-weight: bold;
	font-style: normal;
	font-size: 10pt;
	text-decoration: none;
	margin-top: 0pt;
	margin-bottom: 0pt;
	text-align: center;
	vertical-align: center;
}

.calhead {
	color: #993300;
	font-family: Arial;
	font-weight: bold;
	font-style: normal;
	font-size: 12pt;
	text-decoration: none;
	margin-top: 0pt;
	margin-bottom: 0pt;
	text-align: right;
	vertical-align: center;
	background-repeat: no-repeat;
	background-position-x: left;
	background-position-y: center;
 }
	
.calnorm {
	color: #993300;
	font-family: Arial;
	font-weight: bold;
	font-style: normal;
	font-size: 14pt;
	text-decoration: none;
	margin-top: 0pt;
	margin-bottom: 0pt;
	text-align: right;
	vertical-align: top;
	background-position-x: left;
	background-position-y: top;
	background-repeat: no-repeat;
 }
	
.calnow {
	font-weight: bold;
	font-style: normal;
	font-size: 16pt;
	box-shadow: 5px 2px 0px 0px #FFAA00;
}

.calsat {
	color: #33AA33;
	font-family: Arial;
	font-weight: bold;
	font-style: normal;
	font-size: 14pt;
	text-decoration: none;
	margin-top: 0pt;
	margin-bottom: 0pt;
	text-align: right;
	vertical-align: top;
	background-repeat: no-repeat;
	background-position-x: left;
	background-position-y: top;
}
	
.calsun {
	color: #FF3300;
	font-family: Arial;
	font-weight: bold;
	font-style: normal;
	font-size: 14pt;
	text-decoration: none;
	margin-top: 0pt;
	margin-bottom: 0pt;
	text-align: right;
	horizontal-align: left;
	vertical-align: top;
	background-repeat: no-repeat;
  background-position-x: left;
  background-position-y: top;
}
	
.caldark {
	color: #CCCCCC;
	font-family: Arial;
	font-weight: bold;
	font-style: normal;
	font-size: 14pt;
	text-decoration: none;
	margin-top: 0pt;
	margin-bottom: 0pt;
	text-align: right;
	vertical-align: top;
	background-repeat: no-repeat;
  background-position-x: left;
  background-position-y: top;
}

.calholiday {
	font-family: Arial;
	font-weight: normal;
	font-style: normal;
	font-size: 8pt;
	text-decoration: none;
	margin-top: 8pt;
	margin-bottom: 0pt;
	text-align: center;
	vertical-align: bottom;
	}
	
table	{
	border-color: #AAAAAA;
	table-border-color-light: #FFFFFF;
	table-border-color-dark: #808080;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	font-family: Arial;
	font-weight: normal;
	font-style: normal;
	font-size: 10pt;
	text-decoration: none;
	}

th	{
	color: #33AA00;
	background-color: #DDFFDD;
	font-family: Arial;
	font-weight: bold;
	font-style: normal;
	font-size: 10pt;
	text-decoration: none;
	margin-top: 0pt;
	margin-bottom: 0pt;
	}
	
td	{
	color: #000000;
	font-family: Arial;
	font-weight: normal;
	font-style: normal;
	font-size: 10pt;
	text-decoration: none;
	margin-top: 0pt;
	margin-bottom: 0pt;
	margin-left: 0pt;
	margin-right: 0pt;
	}

caption	{
	color: #008000;
	font-family: Arial;
	font-weight: bold;
	font-style: normal;
	font-size: 12pt;
	text-decoration: none;
	margin-top: 6pt;
	margin-bottom: 6pt;
	}

h1	{
	font-family: Arial;
	font-weight: bold;
	font-style: normal;
	font-size: 20pt;
	text-decoration: none;
	margin-top: 0pt;
	margin-bottom: 16pt;
	}

h2	{
	font-family: Arial;
	font-weight: bold;
	font-style: normal;
	font-size: 16pt;
	text-decoration: none;
	margin-top: 0pt;
	margin-bottom: 12pt;
	}

h3	{
	font-family: Arial;
	font-weight: bold;
	font-style: normal;
	font-size: 14pt;
	text-decoration: none;
	margin-top: 0pt;
	margin-bottom: 8pt;
	}

h4	{
	font-family: Arial;
	font-weight: normal;
	font-style: normal;
	font-size: 12pt;
	text-decoration: none;
	margin-top: 0pt;
	margin-bottom: 8pt;
	}

h5	{
	font-family: Arial;
	font-weight: normal;
	font-style: normal;
	font-size: 10pt;
	text-decoration: none;
	margin-top: 0pt;
	margin-bottom: 4pt;
}

h6 {
	font-family: Arial;
	font-weight: normal;
	font-style: normal;
	font-size: 8pt;
	text-decoration: none;
	margin-top: 0pt;
	margin-bottom: 2pt;
}

a:link, a:visited, a:active {
	color: #993300;
	font-family: Arial;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	margin-top: 0pt;
	margin-bottom: 0pt;
}

a:hover
	{
	color: #993300;
	font-family: Arial;
	font-weight: normal;
	font-style: normal;
	box-shadow: 2px 2px 2px 2px #AAAAAA;
	text-decoration: none;
	margin-top: 0pt;
	margin-bottom: 0pt;
}

.alignleft {
	text-align: left;
}

.aligncenter {
	text-align: center;
}

.alignright {
	text-align: right;
}

.alignjustify {
	text-align: justify;
}

.hide {
 	visibility: hidden;
 }

.formField {
	font: inherit;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin: 3px 0 10px 0;
	padding: 3px 0;
}

textarea.formField {
	width: 300px;
	height: 70px;
}

#sendBtn {
	cursor:pointer;background: #ccc;
	background: linear-gradient(#ddd 0, #eee 100%);
	border: 1px solid #ccc;
	line-height: 20px;
	font-size: 12px;
	padding: 0 15px;
	border-radius: 3px;
}

#clearBtn {
	cursor:pointer;
	background: #ccc;
	background: linear-gradient(#ddd 0, #eee 100%);
	border: 1px solid #ccc;
	line-height: 20px;
	font-size: 12px;
	padding: 0 15px;
	border-radius: 3px;
}

#send_form_status {
	border: 1px dashed #ccc;
	display: none;
	padding: 0 10px;
	margin: 10px 0;
}

.status_ok {
	color: #060;
}

.status_err {
	color: #F00;
}
	
/* Scrolling Text */
.scroll-left {
 height: 24px;	
 overflow: hidden;
 position: relative;
 background: none;
 color: green;
 border: 0px solid green;
}

.scroll-left p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 24px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 10s linear infinite;
 -webkit-animation: scroll-left 10s linear infinite;
 animation: scroll-left 10s linear infinite;
}

/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}

@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}

@keyframes scroll-left {
 0% { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}

/* Menu */
.dropbtn {
  position: fixed;
  top: 170px;
  left: 2px;
  writing-mode: vertical-lr;
  background-color: #97012D;
  color: #FAFA00;
  padding: 8px;
  font-family: Arial;
  font-size: 14px;
  border: 2px solid #FAFA00;
  border-radius: 8px;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: fixed;
  top: 200px;
  left: 2px;
  background-color: #97012D;
  border: 2px solid #97012D;//#FAFA00;
  border-radius: 8px;
  min-width: 180px;
  //width: 230px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: #97012D;
  background-color: #FAFA00;
  font-size: 16px;
  padding: 6px 16px;
  text-align: center;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  font-weight: bold;
  box-shadow: 0px 0px 0px 0px #AAAAAA;
}

.dropdown:hover .dropdown-content
{
  display: block;
}

.dropdown:hover .dropbtn
{
  background-color: #97012D;
}

//Login Window
//.button {
//  font-size: 1em;
//  padding: 10px;
//  color: #fff;
//  border: 2px solid #06D85F;
//  border-radius: 20px/50px;
//  text-decoration: none;
//  cursor: pointer;
//  transition: all 0.3s ease-out;
//}

//.button:hover {
//  background: #06D85F;
//}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 5px;
  background: #fff;
  border-radius: 5px;
  width: 240px;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup .close {
  position: absolute;
  top: 5px;
  right: 5px;
  transition: all 200ms;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}

.popup .close:hover {
  //color: #06D85F;
  color: #FF0000;
  box-shadow: 0px 0px 0px 0px #AAAAAA;
}

.popup .content {
  max-height: 30%;
  overflow: auto;
  text-align: left;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}