body{
	background-color:rgba(80,80,80,0.05);
	margin:0;
	font-family: 'Open Sans', sans-serif;
}
.header{
	border-bottom:1px solid lightgrey;
	height:auto;
	background:white;
}
.header_topline{
	text-align:right;
	padding:5px 30px 0 0;
	margin:0;
	border:0px solid black;
	background:rgb(41,53,61);
}
@media (min-width: 900px) {
.sosds_btn{
	border:1px solid lightgrey;
	width:49%;
	display:inline-block;
	height:150px;
	background:white;
}
.sosds_btn:hover{
  background:rgba(80,80,80,0.5);
}
.sosstav_btn{
	border:1px solid lightgrey;
	width:49%;
	display:inline-block;
	height:150px;
	background:white;
}
.sosstav_btn:hover{
  background:rgba(80,80,80,0.5);
}
.navigation{
	border:0px solid yellow;
	margin:0;
	padding:0 0 0 200px;
	background:white;
}
}
@media (max-width: 900px) {
.sosds_btn{
	border:1px solid lightgrey;
	width:49%;
	display:inline-block;
	height:auto;
	background:white;
}
.sosds_btn:hover{
  background:rgba(80,80,80,0.5);
}
.sosstav_btn{
	border:1px solid lightgrey;
	width:49%;
	display:inline-block;
	min-height:150px;
	background:white;
}
.sosstav_btn:hover{
  background:rgba(80,80,80,0.5);
}
.navigation{
	border:0px solid yellow;
	margin:0;
	padding:0;
	background:white;
}
}
.mybody{
	background-color:transparent;
	min-height:100vh;
}
.footer{
	position:relative;
	bottom:0;
	background-color:rgb(47,53,64);
	height:auto;
	font-size:13px;
}
.grid-container-mybody{
	display: grid;
	grid-template-areas:
    'top''middle''bottom';
	grid-gap: 15px;
	padding:40px 0 20px 0;
}
.grid-container-mybody > div{
	background-color: rgba(255, 255, 255,1);
	padding: 30px 30px;
	font-size: 30px;
}
.grid-container-footer{
	color:white;
	display: grid;
	grid-template-areas:
    'footer-top footer-top footer-top'
	'footer-left footer-middle footer-right';
	grid-gap: 15px;
	padding:20px 0 20px 0;
}
.grid-container-footer > div{
	background-color: rgba(255, 255, 255,0);
	padding: 10px 10px;
	font-size: 13px;
}
.footer-top{ 
	grid-area: footer-top;
	background:transparent;
	}
.footer-left{
	grid-area: footer-left;
	text-align:left;
}
.footer-middle{
	grid-area: footer-middle;
	text-align:center;
}
.footer-right{
	grid-area: footer-right;
	text-align:right;
}
.item1{
	grid-area: top;
	background-image: linear-gradient(to bottom right, rgba(31,131,122,0.3),white,white,white);
	border:1px solid rgba(80,80,80,0.2);
}
.item2{ 
	grid-area: middle;
	border:1px solid rgba(80,80,80,0.2);
}
.item3{ 
	grid-area: bottom;
	text-align: center;
	border:1px solid rgba(80,80,80,0.2);
}
@media (min-width: 900px) {
.param {
	font-size:13px;
	display:inline-block;
	text-align:center;
	margin:0 0 0 -5px;
	padding:17px 5px;
	width:160px;
	transform: skew(-20deg);
}
.param1 {
	border:2px solid rgb(29,63,56);
	color:black;
	transition: all 0.2s linear;
}
.param1:hover {
	background: rgb(29,63,56);
	color:white;
}
.param2 {
	border:2px solid rgb(37,99,88);
	color:black;
	transition: all 0.2s linear;
}
.param2:hover {
	background: rgb(37,99,88);
	color:white;
}
.param3 {
	border:2px solid rgb(31,131,122);
	color:black;
	transition: all 0.2s linear;
}
.param3:hover {
	background: rgb(31,131,122);
	color:white;
}
.param4 {
	border:2px solid rgb(42,176,143);
	color:black;
	transition: all 0.2s linear;
}
.param4:hover {
	background: rgb(42,176,143);
	color:white;
}
.param5 {
	border:2px solid rgb(6,204,148);
	color:black;
	transition: all 0.2s linear;
}
.param5:hover {
	background: rgb(6,204,148);
	color:white;
}
.param6 {
	border:2px solid rgb(59,210,158);
	width:auto;
	margin-left:-5px;
	padding-left:40px;
	padding-right:40px;
	color:black;
	transition: all 0.2s linear;
}
.param6:hover {
	background: rgb(59,210,158);
	color:white;
}
.param7 {
	border:2px solid rgb(64,220,167);
	color:black;
	transition: all 0.2s linear;
}
.param7:hover {
	background: rgb(64,220,167);
	color:white;
}
.dropdown7 {
  position: relative;
  display: inline-block;
}
.dropdown7-content {
	transform: scaleY(0); 
	transform-origin: top;
	transition: transform 0.3s ease-in-out;
  position: absolute;
  background-color:rgb(53,53,53);
  width: 170px;
  margin:0 0 0 -15px;
  z-index: 1;
  word-break: normal;
}
.dropdown7:hover .dropdown7-content {
	transform: scaleY(1);
}
.dropdown-div{
  border-bottom:1px solid rgb(81,81,81);
  padding:7px 10px 7px 10px;
  font-size:13px;
  width:150px;
}
.dropdown-div:hover{
  background-color:grey;
}
.menu-title{
	text-decoration:none;
}
.menu-title:link, .menu-title:visited, .menu-title:hover, .menu-title:active{
	text-decoration:none;
	color:white;
}
.menu-symbol{
	display:none;
}
.school-title{
	min-height:75px;
	margin:0;
	padding:0 0 0 160px;
	background:rgb(47,54,64);
	color:white;
	font-family:Arial;
	font-size:30px;
	justify-content: center;
	align-items: center;
	display:flex;
	flex-flow: wrap;
}
}
@media (max-width: 900px) {
.param {
	font-size:13px;
	text-align:center;
	margin:0;
	padding:17px 5px;
}
.param1 {
	border:2px solid rgb(29,63,56);
	color:black;
	transition: all 0.2s linear;
}
.param1:hover {
	background: rgb(29,63,56);
	color:white;
}
.param2 {
	border:2px solid rgb(37,99,88);
	color:black;
	transition: all 0.2s linear;
}
.param2:hover {
	background: rgb(37,99,88);
	color:white;
}
.param3 {
	border:2px solid rgb(31,131,122);
	color:black;
	transition: all 0.2s linear;
}
.param3:hover {
	background: rgb(31,131,122);
	color:white;
}
.param4 {
	border:2px solid rgb(42,176,143);
	color:black;
	transition: all 0.2s linear;
}
.param4:hover {
	background: rgb(42,176,143);
	color:white;
}
.param5 {
	border:2px solid rgb(6,204,148);
	color:black;
	transition: all 0.2s linear;
}
.param5:hover {
	background: rgb(6,204,148);
	color:white;
}
.param6 {
	border:2px solid rgb(59,210,158);
	color:black;
	transition: all 0.2s linear;
}
.param6:hover {
	background: rgb(59,210,158);
	color:white;
}
.param7 {
	border:2px solid rgb(64,220,167);
	color:black;
	transition: all 0.2s linear;
}
.param7:hover {
	background: rgb(64,220,167);
	color:white;
}
.dropdown2 {
  position: relative;
}
.dropdown2-content {
	transform: scaleY(0); 
	transform-origin: top;
	transition: transform 0.3s ease-in-out;
  position: absolute;
  background-color:rgb(53,53,53);
  width: 100%;
  margin:0;
  z-index: 1;
  word-break: normal;
}
.dropdown2:hover .dropdown2-content {
	transform: scaleY(1);
	position: relative;
	width: 100%;
}
.dropdown3 {
  position: relative;
}
.dropdown3-content {
	transform: scaleY(0); 
	transform-origin: top;
	transition: transform 0.3s ease-in-out;
  position: absolute;
  background-color:rgb(53,53,53);
  width: 100%;
  margin:0;
  z-index: 1;
  word-break: normal;
}
.dropdown3:hover .dropdown3-content {
	transform: scaleY(1);
	position: relative;
	width: 100%;
}
.dropdown4 {
  position: relative;
}
.dropdown4-content {
	transform: scaleY(0); 
	transform-origin: top;
	transition: transform 0.3s ease-in-out;
  position: absolute;
  background-color:rgb(53,53,53);
  width: 100%;
  margin:0;
  z-index: 1;
  word-break: normal;
}
.dropdown4:hover .dropdown4-content {
	transform: scaleY(1);
	position: relative;
	width: 100%;
}
.dropdown5 {
  position: relative;
}
.dropdown5-content {
	transform: scaleY(0); 
	transform-origin: top;
	transition: transform 0.3s ease-in-out;
  position: absolute;
  background-color:rgb(53,53,53);
  width: 100%;
  margin:0;
  z-index: 1;
  word-break: normal;
}
.dropdown5:hover .dropdown5-content {
	transform: scaleY(1);
	position: relative;
	width: 100%;
}
.dropdown6 {
  position: relative;
}
.dropdown6-content {
	transform: scaleY(0); 
	transform-origin: top;
	transition: transform 0.3s ease-in-out;
  position: absolute;
  background-color:rgb(53,53,53);
  width: 100%;
  margin:0;
  z-index: 1;
  word-break: normal;
}
.dropdown6:hover .dropdown6-content {
	transform: scaleY(1);
	position: relative;
	width: 100%;
}
.dropdown7 {
  position: relative;
}
.dropdown7-content {
	transform: scaleY(0); 
	transform-origin: top;
	transition: transform 0.3s ease-in-out;
  position: absolute;
  background-color:rgb(53,53,53);
  width: 100%;
  margin:0;
  z-index: 1;
  word-break: normal;
}
.dropdown7:hover .dropdown7-content {
	transform: scaleY(1);
	position: relative;
	width: 100%;
}
.dropdown-div{
  border-bottom:1px solid rgb(81,81,81);
  padding:7px 10px 7px 100px;
  font-size:13px;
}
.dropdown-div:hover{
	background-color:grey;
	word-break:normal;
}
.menu-title{
	text-decoration:none;
}
.menu-title:link, .menu-title:visited, .menu-title:hover, .menu-title:active{
	text-decoration:none;
	color:white;
}
.menu-symbol{
	display:inline-block;
	width:35px;
	height:35px;
	filter: invert(1.0);
}
.school-title{
	min-height:150px;
	margin:0;
	padding:0 0 0 160px;
	background:rgb(47,54,64);
	color:white;
	font-family:Arial;
	font-size:30px;
	justify-content: center;
	align-items: center;
	display:flex;
	flex-flow: wrap;
}
}
.modifydate{
	font-size:20px;
	margin:50px 0 0 0;
}
.createdby {
	margin:50px 0 0 0;
}
.flag{
	width:40px;
	height:20px;
}
.menu-title-page{
	text-decoration:none;
	color:black;
	font-size:15px;
}
.menu-title-page:hover{
	color:rgb(29,63,56);
	font-weight: bold;
	font-size:20px;
}
/*///////////////////////////////////////////////////

///////////////////////////////////////////////////
 start page PHP */
 
.grid-container-start{
	display: grid;
	grid-template-areas:
    'grid-container-start-left grid-container-start-right';
	grid-gap: 15px;
	padding:20px 0 20px 0;
	}
@media (max-width: 900px) {
  .grid-container-start{
	display: grid;
	grid-template-areas:
    'grid-container-start-left grid-container-start-left'
	'grid-container-start-right grid-container-start-right';
	grid-gap: 15px;
	padding:20px 0 20px 0;
	}
}
.grid-container-start > div{
	background-color: rgba(255, 255, 255,0);
	padding: 10px 10px;
	font-size: 13px;
	}
.grid-container-start-left{grid-area: grid-container-start-left;}
.grid-container-start-right{grid-area: grid-container-start-right;}
.topic_box{
	cursor: pointer;
	display: grid;
	grid-template-areas:
    'topic_box_image topic_box_title'
	'topic_box_image topic_box_text'
	'topic_box_image topic_box_text'
	'topic_box_image topic_box_text'
	'topic_box_image topic_box_added_by';
	grid-gap: 1px;
	max-width:800px;
	border:1px solid lightgrey;
	background:white;
	margin:20px;
	padding:0 10px 0 0;
	transition: all 0.2s linear;
}
@media (max-width: 900px) {
  .topic_box{
	cursor: pointer;
	display: grid;
	grid-template-areas:
    'topic_box_image'
	'topic_box_title'
	'topic_box_text'
	'topic_box_text'
	'topic_box_added_by';
	grid-gap: 1px;
	max-width:800px;
	border:1px solid lightgrey;
	background:white;
	margin:20px;
	padding:0 10px 0 10px;
	transition: all 0.2s linear;
	}
}
.topic_box:hover{
	background:rgba(80,80,80,0.5);
}
.topic_box_added_by{
	grid-area: topic_box_added_by;
	font-size:12px;
	text-align: right;
	border:0px solid black;
	padding:10px 10px 10px 0;
}
.topic_box_title{
	grid-area: topic_box_title;
	font-size:18px;
	border:0px solid black;
	font-weight: bold;
	text-align: center;
	padding:10px 0 0 0;
}
.topic_box_image{
	grid-area: topic_box_image;
	width:320px;
	height:180px;
	border:0px solid orange;
	margin:10px;
	vertical-align: middle;
	text-align:center;
}
@media (max-width: 900px) {
  .topic_box_image{
	width:100%;
}
}
.topic_box_image > img {
    max-width: 100%;
    max-height: 100%;
}
.topic_box_text{
	font-size:15px;
	grid-area: topic_box_text;
	word-break: normal;
	padding:0 10px 0 10px;
}
/* start page PHP*/
/*///////////////////////////////////////////////////
///////////////////////////////////////////////////
 topic_new PHP */
 .title_img{
	width:30%;
}
@media only screen and (max-width: 1200px) {
  .title_img {
    width: 50%;
  }
}
@media only screen and (max-width: 900px) {
  .title_img {
    width: 75%;
  }
}
@media only screen and (max-width: 500px) {
  .title_img {
    width: 100%;
  }
}
.responsive {
	border:1px solid lightgrey;
	padding:5px 5px 15px 5px;
	margin:1px;
	width: 22%;
	display:inline-grid;
	min-height:250px;
}
@media only screen and (max-width: 1200px) {
  .responsive {
    width: 30%;
  }
}
@media only screen and (max-width: 900px) {
  .responsive {
    width: 45%;
  }
}
@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}
 .responsive:hover {
	opacity:0.9;
	box-shadow: 2px 2px 5px rgba(80,80,80,0.4);
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 3; /* Sit on top */
  padding-top: 4%; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
.close {
  padding:0 15px;
  z-index:2;
  position: absolute;
  top: 15px;
  right: 35px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor:pointer;
  border:1px solid white;
  border-radius:2px;
}
.modal-content {
  margin: auto;
  display: block;
  	height:80%;
    width:auto;
}
@media only screen and (max-width: 900px){
  .modal-content {
	height:auto;
    width:95%;
  }
}
/* topic_new PHP*/
.inputbox{
	width:175px;
	height:20px;
	border-radius:5px;
	border:1px solid lightgrey;
}
.button{
	border-radius:2px;
	border:1px solid lightgrey;
	font-size:17px;
	padding:5px 15px;
	background-color:white;
	text-decoration:none;
	color:black;
}
.button:hover{
	border:1px solid grey;
}