* {
    box-sizing: border-box;
}

body {
    font-family: 'Varela Round', sans-serif;
	font-size: 18px;
    margin: 1%;
    background-image: url("images/background2.jpg");
}

h1 {
	font-family: 'Raleway', sans-serif;
	font-size: 3em;
    margin: 0;
}

h2, h3, h4, h5 {
	font-family: 'Raleway', sans-serif;
    margin: 2%;
  }



#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 50px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #ff6666; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
} 


/* Fake image */
.fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
}

/* Add a card effect for articles */
.card {
    background-color: white;
    padding: 20px;
    margin-top: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}



/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
    .leftcolumn, .rightcolumn {   
        width: 100%;
        padding: 0;
    }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
    .topnav a {
        float: none;
        width: 100%;
    }
}


div.gallery:hover {
    box-shadow: 10px 10px 5px grey;
}

div.gallery img {
    width: 100%;
    height: auto;
}



* {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px) {
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/* Footer */
.footer {
    padding: 2%;
    text-align: center;
    background: none;
    margin-top: 2%;
}

/* Place the navbar at the bottom of the page, and make it stick */
.navbar {
    background-color: #333;
    overflow: hidden;
	opacity: 0.8;
	border-radius: 5px;
    position: relative;
    bottom: 0;
    width: 100%;
}

/* Style the links inside the navigation bar */
.navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.navbar a:hover {
    background: linear-gradient(#f2f2f2, #ff6666);
    color: black;
	padding: 0;
	margin: 0;
}


/* Add a green background color to the active link */
.navbar a.active {
    background-color: #4CAF50;
    color: white;
}

/* Hide the link that should open and close the navbar on small screens */
.navbar .icon {
    display: none;
} 

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the navbar (.icon) */
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
} 

.collapsible {
	
	background-color: linear-gradient(#f2f2f2, #ff6666); /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 2%; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 14px; /* Increase font size */
    width: 100%;
    border: none;
    text-align: center;
    outline: none;

}

button {
    
    background-color: #ff6666; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 2%; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 14px; /* Increase font size */
}

.active, .collapsible:hover {
    background-color: #555;
}

.content {
    padding: 1%;
    max-height: 0;
	max-width:100%;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
	}

.space {
	height: 60px;
}
		
th, td {
    padding: 2%;
    text-align: left;
	border-bottom: 1px solid #f2f2f2;
		} 

	tr:hover {background-color: #f5f5f5;}