/* Set default margin, padding to 0 */
*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	text-decoration:none;
}

@font-face {
    font-family: Kollektif;
    src: local(Kollektif), url('fonts/Kollektif/Kollektif.ttf') format('opentype');
}

@font-face {
    font-family: Gidole;
    src: local(Gidole), url('fonts/Gidole/Gidole-Regular.ttf') format('opentype');
}

/* Background pictures of trees and elephants */
#screen{
	background: url('pics/taguatree.jpg') left top no-repeat, url('pics/elephant.jpg') right top no-repeat;
    background-attachment: fixed;
    background-color: #E1E5DE;
    background-size: 500px, 470px;
} 

/* Creates white column in the middle, shadows on the sides */
#container{
	border: 1px solid #573F2A;
	background-color:white;
	box-shadow: 0px 10px 10px 10px white;
	min-height:100%;
	margin: 0 auto;
	filter: opacity(100%);
	position:relative;
	width: 960px;
}

/* CSS used in header */

header{
	background: #4B7720;
	color: #E1E5DE;
	font-family: Kollektif;
}

header a{
	color: #E1E5DE;
	font-family: Kollektif;
}

header h1{
	padding: 10px 0px 0px 30px;
}

header h3{
	padding: 0px 0px 10px 60px;
}

.partner{
	color:#E1E5DE;
	background:#112229;
	border-top: 3px #573F2A solid;
	border-bottom: 3px #573F2A solid;
	font-family: Gidole;
	padding:5px 0;	
	font-weight: bold;
	text-align:center;
}

/* CSS used in navigation menu */

ul {
	font-family: Gidole;
	list-style-type: none;
	overflow: hidden;
	background-color: #E1E5DE;
}

li {
	float: left;
}

li a, .dropbtn {
	display: inline-block;
	color: #112229;
	text-align: center;
	padding: 14px 16px;
	width: 180px;
}

li a:hover, .dropdown:hover .dropbtn .active {
	background-color: #112229;
	color: #E1E5DE;
}

li a.active {
	background-color: #112229;
	color: #E1E5DE;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

.dropdown-content a {
	color: #112229;
	background-color: #E1E5DE;
    padding: 12px 16px;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
	background-color: #112229;
	color: #E1E5DE;
}

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

section {
	padding-bottom:60px; /* Height of the footer element */
}

footer{
	background: #112229;
	bottom:0;
	color: #E1E5DE;
	font-family: Kollektif;
	left:0;
	padding: 20px 0;
	position:absolute;
	text-align: center;
	width:100%;

}