@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap');

body, html { width: 100%; margin: 0; padding: 0; background-color: #180f03; position: relative; }
body { font-family: 'Roboto', sans-serif; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body, p, div { font-size: 100%; }

body, p, h1, h2, h3, a { color: #708090; }
p, li { line-height: 1.5em; }

.small { font-size: .8em !important; }
.smaller { font-size: .9em !important; }
.larger { font-size: 1.25em !important; }
.large { font-size: 1.5em !important; }

.normal { font-weight: 400 !important; }
.strong, strong, b { font-weight: 700 !important; }
.em { font-style: italic; }
.underline { border-bottom: 1pt inherit solid; }

/*
#app-header (position: fixed)
	#app-header-main
	#app-header-menu -> #app-overlay-menu
#app-main
#app-footer
( .app-content-area defines content boundaries )
*/

/* Main area definition (start) */
div#app-header { position: fixed; overflow: hidden; width: 100%; top: 0; left: 0; z-index: 9999; }
div#SERVER_MSG { width: 100%; }
div#top-blank { height: 120px; }
div#app-main { padding: 1em; }
div#app-footer { padding: 1em 1em 3em 1em; }

div.app-content-area { width: 1200px; padding: .5em; margin: 0 auto; }
/* Main area definition (end) */

div#app-header { background-color: #180f03; padding: 1em .5em .25em .5em; z-index: 10; }
div#app-header-main { text-align: center; vertical-align: middle; width: 100%; position: relative; }

div#app-header-main div#app-header-identity a { font-size: 2.25em; color: #fefefe; }
div#app-header-main div#app-header-overlay-switch { width: 32px; }
div#app-header-main div#app-header-lang-switch { width: 32px; }

div#app-header-menu { text-align: center; }
div#app-header-menu a.menu-item { font-weight: 400; font-size: 1.2em; color: #708090; }

span.sep { font-weight: 400; color: #708090; opacity: .5; }

div#app-overlay-menu { display: none; position: fixed; top: 90px; width: 100%; background-color: #180f03; padding: .5em .5em 1.5em .5em; z-index: 1000; }
div#app-overlay-menu a.menu-item { display: block; font-weight: 700; color: #708090; padding: .5em; border-bottom: 1px #aaa solid; }

div#app-main img { max-width: 100% !important; height: auto !important; }
div#app-main div.body-text img { border: 1px #AFBBC6 solid; margin: 1em; }

a.tag { color: #708090; }
a.active-tag { color: #e0928f; }

/* Operation result start */
div.op-result-success, div.op-result-error, div.op-result-warning, div.op-result-info { padding: .5em 1em; white-space: normal; }
div.op-result-success { color: white; background-color: #9ad25d; }
div.op-result-error { color: white; background-color: #a32e1c; }
div.op-result-warning, .warning { color: #bc79a1 !important; background-color: #f1dede !important; }
div.op-result-info { color: #333; background-color: #fcdf98; }
div.op-result-success a, div.op-result-error a, div.op-result-warning a, div.op-result-info a { color: inherit; }
span.clear-msg { float: right; }
/* Operation result end */

/* Form elements (start) */
label { display: block; margin: 1em 0 .5em .2em; }
label.mandatory { font-weight: 700; }
form input.text, form textarea { font-size: 1em; color: #333; width: 400px; border: 3px #b3c0cc solid; padding: .5em; }
form select { font-family: 'Roboto', sans-serif; font-size: 1em; color: #333; border: 3px #b3c0cc solid; padding: .5em; }
form textarea { font-family: 'Roboto', sans-serif; width: 400px; }
div.form-error-msg { font-weight: 700; font-size: .9em; color: #7a4338; margin: .5em 0 .5em .2em; }

fieldset { border: none; padding: 0; margin: 0; }
legend { display: none; }
button, .button { font-size: 1em; font-family: 'Roboto', sans-serif; padding: .4em 1em; border: none; white-space: nowrap; }
.action-button { background-color: #a45857; color: #fff; }
.close-button { background-color: #ff6666; color: #fff; }
.reset-button { background-color: #555; color: #fff; }

div.portfolio-box {
	display: inline-block;
	margin: 0 .5em 3em .5em;	
}

div.portfolio-box img, img.work-img {
	border: 1px #adb9c5 solid;
}

form label#firstname-label, form input#firstname { display: none; }
/* Form elements (end) */

@media only screen and (max-width: 1200px) {
	div.app-content-area { width: 100%; }
}

@media only screen and (max-width: 960px) {
	div#app-header-menu div.menu-item { display: none; }
}

@media only screen and (max-width: 640px) {
	div#app-header-main div#app-header-identity a { font-size: 2em; }
	input.text { width: 96%; }
}

@media only screen and (max-width: 414px) {
	div#app-header-main div#app-header-identity a { font-size: 1.5em; }
	form input.text, form textarea { width: 90%; }
}