/* FONTS */

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-Bold-Web.woff2') format('woff2'),
url('Graphik-Bold-Web.woff') format('woff');
font-weight: 700;
font-style: normal;
font-stretch: normal;
}

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-Semibold-Web.woff2') format('woff2'),
url('Graphik-Semibold-Web.woff') format('woff');
font-weight: 600;
font-style: normal;
font-stretch: normal;
}

@font-face {
font-family: 'Graphik Web';
src: url('Graphik-Regular-Web.woff2') format('woff2'),
url('Graphik-Regular-Web.woff') format('woff');
font-weight: 400;
font-style: normal;
font-stretch: normal;
}

@font-face {
font-family: 'Publico Text Web';
src: url('PublicoText-Bold-Web.woff2') format('woff2'),
url('PublicoText-Bold-Web.woff') format('woff');
font-weight: 700;
font-style: normal;
font-stretch: normal;
}

@font-face {
font-family: 'Publico Text Web';
src: url('PublicoText-Italic-Web.woff2') format('woff2'),
url('PublicoText-Italic-Web.woff') format('woff');
font-weight: 400;
font-style: italic;
font-stretch: normal;
}

@font-face {
font-family: 'Publico Text Web';
src: url('PublicoText-Roman-Web.woff2') format('woff2'),
url('PublicoText-Roman-Web.woff') format('woff');
font-weight: 400;
font-style: normal;
font-stretch: normal;
}

.fs { font-family: 'Publico Text Web', serif; }
.fs4 { font-family: 'Publico Text Web', serif; font-weight: 400; }
.fs7 { font-family: 'Publico Text Web', serif; font-weight: 700; }

.fss { font-family: 'Graphik Web', sans-serif; }
.fss4 { font-family: 'Graphik Web', sans-serif; font-weight: 400; }
.fss6 { font-family: 'Graphik Web', sans-serif; font-weight: 600; }
.fss7 { font-family: 'Graphik Web', sans-serif; font-weight: 700; }
.fss9 { font-family: 'Graphik Web', sans-serif; font-weight: 700; }

/* VARS */
:root {
	--prgba: 29,45,54;
	--phex: #1D2D36;

	--srgba: 255,224,43;
	--shex: #FFE02B;

	--trgba: 255,255,255;
	--thex: #FFFFFF;

	--qrgba: 237,237,238;
	--qhex: #EDEDEE;

	--mftrgba: 0,5,83;
	--mfthex: #000553;

	--nmfrgba: 27,62,202;
	--nmfhex: #1b3eca;

	--mcdrgba: 38,79,54;
	--mcdhex: #264f36;

	--erprgba: 110,110,110;
	--erphex: #6e6e6e;

	--sflrgba: 44,46,62;
	--sflhex: #2c2e3e;

	--onbrgba: 0,34,61;
	--onbhex: #00223d;

	--nbcrgba: 17,73,148;
	--nbchex: #114994;

	--nowrgba: 13,2,211;
	--nowhex: #0D02D3;
}

/* MAIN */

.line { border-top: 1px dotted var(--phex); }

.op0 { opacity: 0; }
.op1 { opacity: 0.1; }
.op2 { opacity: 0.2; }
.op3 { opacity: 0.3; }
.op4 { opacity: 0.4; }
.op5 { opacity: 0.5; }
.op6 { opacity: 0.6; }
.op7 { opacity: 0.7; }
.op8 { opacity: 0.8; }
.op9 { opacity: 0.9; }

body { color: var(--phex); font-size: 18px;; padding: 0; margin: 0; line-height: 1.5em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

h1 { font-size: 3rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.2rem; }

@media (min-width: 768px) {
	h1 { font-size: 4rem; }
	h2 { font-size: 3rem; }
}

@media (min-width: 992px) {
	h1 { font-size: 5rem; }
}

@media (min-width: 1200px) {
	h1 { font-size: 7rem; }
}

a { color: var(--phex); text-decoration: underline; text-decoration-color: var(--phex); }
a:hover { color: inherit; text-decoration: underline; text-decoration-color: var(--shex); text-decoration-thickness: 3px; }

img { max-width: 100%; height: auto; }

.navi a { margin: 0 3px; padding: 5px 3px; text-decoration: underline; text-decoration-color: var(--phex); transition: all .2s ease-in-out; }
.navi a:hover { text-decoration: underline; text-decoration-color: var(--shex); text-decoration-thickness: 2px; }

@media (min-width: 768px) {
	.navi a { font-size: 1.2rem; margin: 0 5px; padding: 5px 5px; }
}

@media (min-width: 992px) {
	.navi a { font-size: 1.4rem; }
}

.header { background: radial-gradient(circle, rgba(var(--qrgba),0.5) 30%, rgba(var(--trgba),1) 50%); background-size: 100% 250%; }
.header img { position: relative; margin-top: -28px; }
.header a { text-decoration: none; }
.header a:hover { color: var(--phex); }

.header-sub { background: none; }
.header-sub a { text-decoration: none; }
.header-sub a:hover { color: var(--phex); }


@media (min-width: 768px) {
	.header img { margin-top: -40px; }
}

@media (min-width: 992px) {
	.header img { margin-top: -45px; }
}

@media (min-width: 1200px) {
	.header img { margin-top: -55px; }
}

.announce { color: var(--thex); background: rgba(var(--nowrgba),0.7); }
.announce a { color: var(--thex); text-decoration: underline; }
.announce a:hover { color: inherit; text-decoration: underline var(--shex) 3px; }

.announcedetail a { display: inline-block; padding: 5px 10px; border-radius: 5px; background-color: var(--shex); color: var(--phex); text-decoration: none; transition: all .2s ease-in-out; }
.announcedetail a:hover { color: var(--phex); text-decoration: underline var(--phex) 3px; }

.announcemore a { display: inline-block; padding: 5px 10px; border-radius: 5px; background-color: var(--thex); color: var(--phex); text-decoration: none; transition: all .2s ease-in-out; }
.announcemore a:hover { color: var(--phex); text-decoration: underline var(--phex) 3px; }

.announcearchive { color: var(--phex); background: rgba(var(--qrgba),0.7); }

.announcearchivedetail a { display: inline-block; padding: 5px 10px; border-radius: 5px; background-color: var(--shex); color: var(--phex); text-decoration: none; transition: all .2s ease-in-out; }
.announcearchivedetail a:hover { color: var(--phex); text-decoration: underline var(--phex) 3px; }

.experience img { width: 20px; margin: -5px 0 0 10px; opacity: 0.3; }
.experience a { text-decoration: none; }

.employers img { width: 100px; margin: 20px 30px; }
.employers a { opacity:0.4; filter:alpha(opacity=40); text-decoration: none; }
.employers a:hover { opacity:0.8; filter:alpha(opacity=80); }

@media (min-width: 992px) {
	.employers img { margin: 20px 50px; }
}

.company img { max-width: 40px; border-radius: 15%; }

.clients img { width: 100px; margin: 20px 30px; }
.clients a {  opacity:0.4; filter:alpha(opacity=40); text-decoration: none; }
.clients a:hover { opacity:0.8; filter:alpha(opacity=80); }

.project { color: var(--phex); font-size: 16px; background: rgba(var(--qrgba),0.7); }
.project img { width: 100%; }

.projectlink a { font-size: 18px; color: var(--phex); }

.by { min-height: 25px; white-space: nowrap; }
.by img { border-radius: 15%; width: 20px; }

.mcd { color: var(--thex); background: rgba(var(--mcdrgba),1); }
.mcd a { color: var(--thex); text-decoration-color: var(--thex); text-decoration-thickness: 2px; }
.mcd a:hover { text-decoration-color: var(--shex); text-decoration-thickness: 2px; }

.mft { color: var(--thex); background: rgba(var(--mftrgba),1); }
.mft a { color: var(--thex); text-decoration-color: var(--thex); text-decoration-thickness: 2px; }
.mft a:hover { text-decoration-color: var(--shex); text-decoration-thickness: 2px; }

.nmf { color: var(--thex); background: rgba(var(--nmfrgba),1); }
.nmf a { color: var(--thex); text-decoration-color: var(--thex); text-decoration-thickness: 2px; }
.nmf a:hover { text-decoration-color: var(--shex); text-decoration-thickness: 2px; }

.erp { color: var(--thex); background: rgba(var(--erprgba),1); }
.erp a { color: var(--thex); text-decoration-color: var(--thex); text-decoration-thickness: 2px; }
.erp a:hover { text-decoration-color: var(--shex); text-decoration-thickness: 2px; }

.sfl { color: var(--thex); background: rgba(var(--sflrgba),1); }
.sfl a { color: var(--thex); text-decoration-color: var(--thex); text-decoration-thickness: 2px; }
.sfl a:hover { text-decoration-color: var(--shex); text-decoration-thickness: 2px; }

.onb { color: var(--thex); background: rgba(var(--onbrgba),1); }
.onb a { color: var(--thex); }
.onb a:hover { text-decoration-color: var(--shex); text-decoration-thickness: 3px; }

.nbc { color: var(--thex); background: rgba(var(--nbcrgba),1); }
.nbc a { color: var(--thex); }
.nbc a:hover { text-decoration-color: var(--shex); text-decoration-thickness: 3px; }

.enyaq { color: var(--thex); background-image: url('../img/projekt/enyaq.jpg'); background-size: cover; min-height: 500px; }

.highlight { color: var(--phex); background: rgba(var(--qrgba),0.7); }

@media (min-width: 768px) {
	.project, .highlight, .announce, .announcearchive { border-radius: 10px; }
}

.contact img { width: 30px; margin-right: 15px; opacity: 0.7; }

.booking a { display: inline-block; padding: 5px 10px; border-radius: 5px; background-color: var(--phex); color: var(--thex); text-decoration: none; transition: all .2s ease-in-out; }
.booking a:hover { color: var(--thex); text-decoration: underline var(--shex) 3px; }

.map { position: relative; border-radius: 10px; overflow: hidden; }
.map iframe { position: absolute; display: block; margin-left: -15px; width: 100%; height: 100%; border: 0; }

.cookie-content body { font-family: 'Publico Text Web', serif; }
.cookie-content ._CookieScriptReportPageTable { margin-bottom: 20px;}
.cookie-content ._CookieScriptReportPageCheckboxInput { margin: 0 5px 0 0;}
.cookie-content	button {
	border-radius: 6px;
	border: 1px solid gray;
	margin-top: -5px;
	font-size: 16px;
}