@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: #363636; 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, a { color: #f3f1f1; }
h1, h2, h3 { font-weight: 400; color: #f3f1f1; }
h1 { font-size: 1.7em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.2em; }

.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 { width: 100%; }
div#SERVER_MSG { width: 100%; }
div#top-blank { height: 0; }
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: #363636; 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 span#app-header-overlay-switch { position: absolute; left: 0; top: 25%; }
div#app-header-main span#app-header-identity a { font-size: 2.25em; color: #9c7cae; }
div#app-header-main span#app-header-lang-switch { position: absolute; right: 0; top: 25%; }

div#app-header-menu { text-align: center; }
div#app-header-menu a.menu-item { font-size: 1.4em; font-weight: 400; color: #dacae8; }
div#app-header-menu a.menu-item.active { font-weight: 700; color: #9c7cae; }

div#app-overlay-menu { display: none; position: fixed; top: 85px; width: 100%; background-color: #363636; padding: .5em .5em 1.5em .5em; z-index: 1000; }
div#app-overlay-menu a.menu-item { display: block; color: #9c7cae; padding: .5em; border-bottom: 0px #aaa solid; }

div#app-main img { max-width: 100% !important; height: auto !important; }

a.tag { font-weight: 400; color: #dacae8; }
a.tag.active { font-weight: 700; color: #9c7cae; }
span.sep { opacity: .5; padding: 0 .5em; }

/* 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: 1px #ccc solid; padding: .5em; }
form select { font-family: 'Roboto', sans-serif; font-size: 1em; color: #333; border: 1px #ccc 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 {
	position: relative;
	display: inline-block;
	width: 170px;
	height: 170px;
	vertical-align: top;
	padding: 10px;
	border: 0px #808080 solid;
	margin: 1em .5em 0 .5em;
}
div.portfolio-box img {
	border: 2px #222 solid;
	max-width: 150px;
	max-height: 150px;
}
div.portfolio-box span {
	position: absolute;
	display: none;
	font-size: .85em;
	color: #dacae8;
	bottom: 0;
	left: 0;
	right: 0;
	background: #333;
	padding: .5em;
	vertical-align: bottom;
}

div.portfolio-box:hover span {
  display: block;
}

blockquote#main-quote {
	padding: 2em 2em 1em 60px;
	background-image: url('../.././../ext/uploads/media/double-quote.png');
	background-repeat: no-repeat;
	background-position: top left;
	max-width: 600px;
	margin: auto;
	background-color: inherit;
	border-radius: 10px;
}

blockquote#main-quote, blockquote#main-quote p {
	font-size: 1.25em;
	color: #fff;
}

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 { position: fixed; overflow: hidden; top: 0; left: 0; z-index: 9999; }
	div#top-blank { height: 90px; }
	blockquote#main-quote { font-size: 1em; }
	input.text { width: 96%; }
}

@media only screen and (max-width: 414px) {
	form input.text, form textarea { width: 90%; }
	div.portfolio-box {
		width: 150px;
		height: 150px;
		margin: 1em .5em 0 .5em;
	}
	div.portfolio-box img {
		max-width: 100%;
		max-height: 100%;
	}
}