html
	{
		height: 100%;
		background-color: #008C95;
	}

@font-face
	{
		font-family: 'Catamaran';
  
		font-style: normal;
  
		font-weight: 200;
  
		src: local('Catamaran ExtraLight'), local('Catamaran-ExtraLight'), url(fonts/Catamaran.woff2) format('woff2'),
		     local('Catamaran ExtraLight'), local('Catamaran-ExtraLight'), url(fonts/Catamaran.woff) format('woff');
	
}

@font-face
	{
		font-family: 'Libre Baskerville';
  		font-style: normal;
  		font-weight: 400;
  		src: local('Libre Baskerville'), local('LibreBaskerville-Regular'), url(fonts/LibreBaskerville.woff2) format('woff2'),
		     local('Libre Baskerville'), local('LibreBaskerville-Regular'), url(fonts/LibreBaskerville.woff) format('woff');
	}

body
	{
		margin-right: auto;
		margin-left: auto;
		margin-top: 0;
		font-family: "Catamaran", sans-serif;
		font-size: 160%;
		max-width: 1500px;
	}

body#wholefront
	{
		background-color: white;
	}

div#langselect
	{
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		background-color: #008C95;
		margin: 0;
		margin-right: 1em;
		font-size: 80%;
		z-index: 20;
		color: #C0C0C0;
	}
div#langselect a
	{
		color: white;
		text-decoration: underline;
	}		
div#navbar
	{
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #008C95;
		margin: 0;
		width: 100%;
		font-size: 80%;
		text-align: center;
		z-index: 10;
	}
div#navbar a
	{
		display: inline-block;
		padding-left: 0.5em;
		padding-right: 0.5em;
		color: white;
		text-decoration: none;
	}
div#navbar a:hover
	{
		text-decoration: underline;
	}
div#navbar a.langselect
	{
		display: none;
	}
div#dropdownmenu
	{
		display: none;
		position: fixed;
		top: 0;
		background-color: #008C95;
		margin: 0;
		width: 100%;
		font-size: 80%;
		text-align: right;
		z-index: 10;
	}
div#dropdownmenu a
	{
		display: inline-block;
		padding-right: 1em;
		color: white;
		text-decoration: none;
	}
@media screen and (max-width: 1000px) { 
div#langselect { font-size: 90%; }
div#navbar { font-size: 90%; }
}

@media screen and (max-width: 690px) { 
	div#langselect
	{
		display: none;
	}
	div#navbar 
	{ 
		display: none;
		background-color: black;
		width: auto;
		top: 0.6em;
		left: auto;
		right: 0.6em;
		overflow: hidden;
		border: 1px solid gray;
		border-radius: 0.5em;
		z-index: 11;
	}
	div#navbar a
	{
		display: block;
		font-size: 100%;
		text-align: left;
		border-top: 1px solid white;	
	}
	div#navbar a:first-child
	{
		border-top: none;
	}
	div#navbar a.langselect
	{
		display: block;
		background-color: #045360;
		color: white; 
	}
	div#dropdownmenu { display: block }
}

div#footer
	{
		margin-top: 2em;
		background-color: #008C95;
		width: 100%;
		font-size: 70%;
		text-align: center;
		color: white;
	}		

img.logo
	{
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-top: 2em;
		margin-bottom: 1em;
		width: 20%;
	}
@media screen and (max-width: 800px) { 
	img.logo { width: 30% }
}

div.content
	{
		position: relative;
	}

img.mainimg
	{
		display: block;
		width: 100%;
		position: absolute;
		margin: 0;
		left: 0;
		top: 0;
		z-index: 1;
	}
div.transp
	{
		width: 100%;
		position: absolute;
		margin: 0;
		left: 0;
		top: 0;
		z-index: 2;
	}
div.leftside {
    width: 40%;
    margin-left: 10%;
    margin-right: auto;
}
div.rightside
	{
		width: 40%;
		margin-left: auto;
		margin-right: 10%;
	}
div.rightside img,div.leftside img
	{
		width: 100%;
	}


.screentitle { font-size: 240%; line-height: 1.3em; }
@media screen and (max-width: 1350px) { .screentitle { font-size: 200%; }}
@media screen and (max-width: 1250px) { .screentitle { font-size: 185%; }}
@media screen and (max-width: 1150px) { .screentitle { font-size: 170%; }}
@media screen and (max-width: 1050px) { .screentitle { font-size: 155%; }}
@media screen and (max-width: 900px) { .screentitle { font-size: 135%; }}
@media screen and (max-width: 770px) { .screentitle { font-size: 125%; }}
@media screen and (max-width: 650px) { .screentitle { font-size: 105%; }}
@media screen and (max-width: 480px) { .screentitle { font-size: 90%; }}

div.bread
	{
		position: relative;
		margin-left: 5%;
		margin-right: 5%;
		padding: 1em;
		background-color: rgba(255,255,255,0.75);
		border-radius: 0.5em;
		z-index: 3;
	}
@media screen and (max-width: 500px) { 
	div.bread { margin-left: 2%; margin-right: 2%; padding: 0.3em; }
}
div.bread p
	{
		margin-left: 5%;
		margin-right: 5%;
		font-size: 80%;
	}
div.bread h1,div.bread h2,div.bread h3
	{
		margin-left: 5%;
		margin-top: 1.5em;
		margin-bottom: 1em;
		font-family: 'Libre Baskerville', serif;
		font-size: 130%;	
	}
div.bread h2
	{
		color: #D05836;
	}
div.bread h3 {
    display: inline-block;
    margin-left: 0;
    font-size: 110%;
    color: #008C95;
}
div.bread img
	{
		margin-left: 5%;
		margin-right: 5%;
		width: 90%;
	}

div.newsbox {
    position: relative;
    width: 65%;
    margin-left: 25%;
    margin-right: 5%;
    padding: 1em;
    background-color: rgba(252,171,15,0.5);
    border-radius: 0.5em;
    z-index: 3;
    margin-bottom: 1em;
}
div.newsmore {
    background-color: white;
    margin-bottom: 0;
    font-size: 80%;
}
div.onleft
	{
		margin-left: 5%;
		margin-right: 25%;
	}
@media screen and (max-width: 770px) { 
div.newsbox
	{
		width: 75%;
		margin-left: auto;
		margin-right: auto;
	} 
}
@media screen and (max-width: 500px) { 
	div.newsbox { width: 90%; padding: 0.5em; }
}

div.newsbox p
	{
		font-size: 80%;
		text-align: left;
		color: black;
	}
div.newsbox h1
	{
		font-size: 120%;
		font-family: 'Libre Baskerville', serif;
		text-align: left;
		line-height: 1.1em;
		color: black;
	}
div.newsbox p.dated {
    padding: 0;
    margin: 0;
    text-align: right;
    font-size: 60%;
}
div.newsbox_collapsed {
    display: none;
    height: 0;
    overflow: hidden;
    transition: height 1s ease-in-out 0s;
}

    @media screen and (max-width: 700px) {
        div.bread p {
            font-size: 70%;
        }

        div.newsbox p {
            font-size: 70%;
        }

        div.bread h1, div.bread h2 {
            font-size: 100%;
        }

        div.newsbox h1 {
            font-size: 100%;
        }
    }

    div .contactbox
	{
		position: relative;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		z-index: 3;
	}
div.contactbox div
	{
		display: inline-block;
		width: 21.5%;
		margin-right: 1.25%;
		margin-left: 1.25%;
		padding: 1.25%;
		background-color: rgba(32,32,32,0.5);
		border-radius: 0.5em;
		color: white;
	}
div.contactbox div h1
	{
		font-family: 'Libre Baskerville', serif;
		font-size: 130%;	
	}
div.contactbox div p
	{
		font-size: 75%;
		line-height: 1.2em;
	}
div.contactbox div img
	{
		width: 5.9em;
		border-radius: 1em;
	}
div.contactbox div h2
	{
		font-family: 'Libre Baskerville', serif;
		font-size: 100%;	
	}
div.contactbox div#companydata
	{
		display:block;
		width: 75%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 1em;
	}
@media screen and (max-width: 1050px) { 
	div.contactbox div
	{
		display:block;
		width: 70%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 1em;
	}
	div.contactbox div#companydata
	{
		width: 70%;
	
	}
}

div.contact
	{
		width: 80%;
		margin-right: auto;
		margin-left: 5%;
		padding: 1em;
		background-color: rgba(32,32,32,0.5);
		border-radius: 0.5em;
		color: white;
	}
div.contact div
	{
		display: inline-block;
		font-size: 75%;
		line-height: 1.2em;
		vertical-align: middle;
	}
div.contact img
	{
		display: inline-block;
		width: 3.5em;
		margin-right: 1em;
		border-radius: 1em;
	}

div.collapsed
	{
        display: none;
		font-size:75%;
		padding-left: 10%;
		height: 0;
		overflow: hidden;	
		transition: height 1s ease-in-out 0s;
	}
div.collapsed p {
    font-size: 100%;
    margin: 0.8em 0.3em 0.9em 1em;
}
div.collapsed p.footstar {
    margin-top: 0.5em;
    margin-left: 3em;
    margin-bottom: 1.5em;
    font-style: italic;
    font-size: 85%;
}
@media screen and (max-width: 500px) { 
	div.collapsed { padding-left: 0; }
}
div.collapsed ul {
    margin-bottom: 0;
}
div.collapsed li
	{
		padding-bottom: 0.5em;
	}
div.bulb a {
    font-size: 80%;
}
div.bulb a span {
    margin-left: 1em;
    display: inline-block;
    text-decoration: underline;
}
div.bulb img
	{
		display: inline-block;
		width: 4em;
		margin-left: 0;
		margin-right: 0.5em;	
	}
div.collapsed img {
    display: block;
    width: 100%;
    margin: 0;
}
.tinylead {
    margin-top: 1em;
}
.morelead {
    margin-top: 3em;
}
div.bulb a img {
    width: 8em;
}