@font-face {
  font-family: Ubuntu;
  src: url(./Ubuntu/Ubuntu-Light.ttf);
}
	*{
		box-sizing: border-box;
	}
	
	/* CSS for the table*/
	
		#colorfield {
			width: 50%;
			height: 100%;
		}
		
		.color-green {
			width: 100px;
			height: auto;
			background-color: green;
		}
		
		.color-lightblue {
			width: 100px;
			height: auto;
			background-color: lightblue;
		}
		
		.color-blue {
			width: 100px;
			height: auto;
			background-color: blue;
		}
		
		.color-gold {
			width: 100px;
			height: auto;
			background-color: olive;
		}
		
		.color-red {
			width: 100px;
			height: auto;
			background-color: darkred;
		}
		
		.color-orange {
			width: 100px;
			height: auto;
			background-color: orange;
		}
		
		.color-lightpink{
			width: 100px;
			height: auto;
			background-color: lightpink;
		}
		
		.color-lightbrown{
			width: 100px;
			height: auto;
			background-color: brown;
		}
		
		.color-white{
			width: 100px;
			height: auto;
			background-color: white;
		}
		
		.color-yellow{
			width: 100px;
			height: auto;
			background-color: yellow;
		}
		
		table{      
			border-collapse: collapse;
			width: 80%;
			margin:auto;
			background-color:white;
		}
		
		td, th {
			border: 1px solid rgb(221, 221, 221);
			padding: 8px;
			text-align: center;
		}
		
		span {
			font-size: 12pt;
		}
	
    body {
            font-family: 'Ubuntu', sans-serif;
			font-weight:300;
			
			color:black;
			left: 0;
			margin: 0;
			position: relative;

        }
		
		.bg {
 
  display: block;
  position: relative;
  width: 100%;
  height:100%;
}

.bg::after {
  content: "";
  background:url('PhytoBox_background.jpg');
  background-attachment: fixed;
  background-size:cover;
  opacity: 0.6;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}


		h1{
			display: flex;
			align-items: center;
			justify-content: center;			
		}
		
		h1.lang_english{
			display: none;
		}
		
		
        .logo {
		    padding-bottom: 50px;
            display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			top:0;
        }
		
		.logo img{
			width: 300px;
			height: 300px;		
		}
	    
		.footer {
			display: flex;
			align-items: center;
			justify-content: center;
			margin:0;
			padding: 1rem;
			text-align: center;
			position: fixed;
			left: 0;
			bottom: 0;
		}
	
		.footer p{
			{*background-color: rgba(255,255,255,0.3);*}
			padding: 5px;
		}		
		
        .footer img{
		width: 37px;
		height: 25 px ;
		padding: 5px;
		cursor: pointer;
		}
		
		.button1{ 
			font-size: 25px;
			background:#ffffff;
			color:#000000; 
			padding: 15px 20px;
			margin:10px;
			border: 2px solid #5b8845;
			border-radius: 8px;
			cursor: pointer;
		}
		
		a:link {
			color: black;
			background-color: transparent;
			text-decoration: none;
		}
		
		.button1:hover {
			background-color:#5b8845;
			color: white;
		}
	
		.about-us{
			font-size: larger;
			margin: 3%;
			padding: 1%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.about-us p.lang_english{
		display: none;
		}

		.buttoncolumn {
			
			padding: 5px;
			align-items: center;
			justify-content: center;
			display: flex;
		}


		/* Clear floats after image containers */
		.buttonrow::after {
			content: "";
			clear: both;
			display: table;
		} 
		
		.column {
			float: left;
			width: 50%;
			padding: 5px;
			padding-right: 185px;
			padding-left: 45px;
		}

		/* Clear floats after image containers */
		.row::after {
			content: "";
			clear: both;
			display: table;
		} 
	
		input[type=submit]{
			background:#ffffff;
			color:#000000; 
			padding: 5px 8px;
			margin:2px;
			border: 2px solid #5b8845;
			border-radius: 8px;
			cursor: pointer;
		}
		
		input[type=submit]:hover {
			background-color:#5b8845;
			color: white;
		}
		
		.password-box{
			text-align:center;
			margin-top:50px;
			background:rgba(255,255,255,0.5);
			padding: 30px;
		}
		
		.english{
			display: none;
		}
		p.lang_english{
			display: none;
		}
		
		
		/* Responsive */
		@media screen and (max-width: 1034px) {
			.buttoncolumn {
				width: 100%;
			}
		
			.column{
				width:100%;
				padding:5%;
			}
		
			.footer {
				position:relative;
			}
		
			.logo img{
				width: 200px;
				height: 200px;
			}
		
			.about-us p{
				padding: 25px;
			}
			body {
			font-weight:500;
			}
			.bg::after {
				width: 100%;
				opacity: 0.3;
			}
		}