@charset "utf-8";

html, body {
    height: 100%;
}

html {
	display: table;
    margin: auto;
}

body {
	background-attachment: scroll;
	background-image: url("Images/Backgrounds/395023.png");
	background-repeat: repeat;
	display: table-cell;
	vertical-align: middle;
}

h1, h2, h3, h4, h5, h6 {
    font: inherit;
    margin: 0;
}

p {
    margin: 0;
}

a {
	color: inherit;
}

.smlink {
	text-decoration: none;
}

td {
    text-align: center;
}

#wrapper {
	box-shadow: 4px 4px 0 #000000;
	color: #000000;
	display: flex;
	margin: 50px 15px;
	max-width: 650px;
}

#main {
   	align-self: center;
	background-color: #a2c8a9;
	border: 2px solid #d0e3d3;
	display: flex;
	flex-direction: column;
}

#title {
    background: linear-gradient(to right, #599764, #427e4e);
	border-bottom: 2px solid #d0e3d3;
	color: #ffffff;
	display: flex;
	padding: 15px;
}

[id^="body"] {
	display: flex;
	padding: 15px;
}

[id^="body"] + [id^="body"] {
    border-top: 2px dashed #599764;
}

.title {
    text-align: left;
	font-family: "Silkscreen", sans-serif;
    font-size: 1.833rem;
	font-weight: bold;
}

.header {
    font-family: "Bebas Neue", sans-serif;
    font-size: 2.083rem;
	letter-spacing: 0.03em;
    text-align: center;
}

.text {
	flex: 1;
}

.body {
	font-family: "Roboto Condensed", serif;
    font-size: 1.667rem;
	padding: 5px 15px 15px 15px;
    text-align: justify;
    word-spacing: -0.05em;
}

.bodyalt {
	font-family: "Roboto Condensed", serif;
    font-size: 1.667rem;
	padding: 5px 30px 15px 15px;
    text-align: justify;
    word-spacing: -0.05em;
}

.list {
	font-family: "Roboto Condensed", serif;
    font-size: 1.667rem;
    text-align: center;
	list-style-type: none;
	padding: 0 15px;
    word-spacing: -0.05em;
}

.caption {
	background: linear-gradient(to right, #599764, #427e4e);
	color: #ffffff;
	font-family: "Bebas Neue", sans-serif;
	text-align: center;
	letter-spacing: 0.1em;
	padding: 5px 0;
}

.image-250px {
    align-self: center;
    border: 2px solid #599764;
	box-shadow: 4px 4px 0 #000000;
    margin-right: 15px;
	width: 250px;
}

.bodyimg {
	vertical-align: bottom;
	width: 250px;
}

.image-icon {
	filter: invert(100%) !important;
	margin: 0 0 0 auto;
}

#nb {
	cursor: pointer;
}

.icon {
	filter: invert(0%);
	height: 36px;
}

.flag {
	border: 2px solid #d0e3d3;
	border-radius: 5px;
	height: 24px;
}

.linkicon {
	filter: invert(0%);
	height: 24px;
	padding-right: 15px;
	vertical-align: middle;
}

.buttonrow {
    border-top: 2px dashed #599764;
    padding: 10px 0;
	width: 100%;
}

.flagrow {
    margin: 0 auto;
	width: 85%;
}

@media only screen and (max-width: 1100px) {
    #wrapper {
        max-width: 500px;
    }
	
    [id^="body"] {
        display: block;
        text-align: center;
    }
	
	.header {
		padding: 15px 0 0 0;
	}
	
    .image-250px {
        margin: 0 auto;
    }
}