:root {
	--green: #013328;
	--greendark: #100c0d;
	--white: #ffffff;
	--black: #000000;
	--trans: #00000013;
  }

::-moz-selection { background: var(--greendark); color: var(--white); }
::selection { background: var(--greendark); color: var(--white); }

* {
	box-sizing: border-box;
	border-radius: 5px;
	
  }
  h1,  h2 {
	color: var(--greendark);
	padding-bottom: 10px;
	padding-top: 50px;
	margin: 0px;
}
p {
	color: var(--greendark);
	padding-bottom: 50px;
	padding-top: 10px;
	margin: 0px;
}
.aside p, .footer p {
	color: color: var(--white);
	padding: 1%;
	margin: 1%;
}
.header h1 {
	color: var(--white);
	padding: 0px;;
}
.panel p {
	text-align: left;
}
  .row::after {
	content: "";
	clear: both;
	display: table;
  }
  
  [class*="col-"] {
	float: left;
	padding: 5px;
  }
  
  html {
	font-family: "Arial", sans-serif;
	max-width: 1400px;
	margin: auto;
	
  }
  
  .header {
	background-color: var(--black);
	color: var(--white);
	padding: 15px;
		
  }
  .middle {
	background-color: var(--trans);
	padding: 15px;
	margin: 2%;
	color: var(--white);
	text-align: center;
	font-size: 14px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  }
  
  .aside {
	background-color: var(--green);
	padding: 15px;
	color: var(--white);
	text-align: center;
	font-size: 14px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  }
  
  .footer {
	background-color: var(--greendark);
	color: var(--white);
	text-align: center;
	font-size: 12px;
	padding: 15px;
  }
  
  /* For mobile phones: */
  [class*="col-"] {
	width: 100%;
  }
  
  @media only screen and (min-width: 600px) {
	/* For tablets: */
	.col-s-1 {width: 8.33%;}
	.col-s-2 {width: 16.66%;}
	.col-s-3 {width: 25%;}
	.col-s-4 {width: 33.33%;}
	.col-s-5 {width: 41.66%;}
	.col-s-6 {width: 50%;}
	.col-s-7 {width: 58.33%;}
	.col-s-8 {width: 66.66%;}
	.col-s-9 {width: 75%;}
	.col-s-10 {width: 83.33%;}
	.col-s-11 {width: 91.66%;}
	.col-s-12 {width: 100%;}
	
  }
  @media only screen and (min-width: 768px) {
	/* For desktop: */
	.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%;}
	
  }

  .accordion {
	
	color: var(--white);
	background-color: var(--green);
	cursor: pointer;
	width: 100%;
	border: none;
	text-align: center;
	outline: none;
	font-size: 15px;
	transition: 0.4s;
  }
  
  .active, .accordion:hover {
	background-color: var(--trans);
	color: var(--green);
	background-color: var(--white); 
  }
  
  .panel {
	padding: 0 18px;
	background-color: var(--green);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
  }
  
  #logogr{
	max-height: 100%;
	max-width: 100%;
	border-radius: 2%;
	transition: 0.5s;
}
#logogr:hover {
	-ms-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}
a {
	text-decoration: none; 
	display: inline-table;
	color: var(--greendark);
	border: 2px solid var(--greendark);
	background-color: var(--white);
	padding: 2%;
	margin-bottom: 8%;
	border-radius: 5px;	
	font-size: 20px;
	vertical-align: top;
	text-decoration: none; 
	transition: 0.5s;
}
a:hover {
	padding: 2%;
	background-color: var(--greendark);
	color: white;
	border: 2px solid var(--green); 
	
}