/* -------------------------------------------------- */
/* --- ROOT / VARIABLES ------------------------------ */
/* -------------------------------------------------- */

:root {
    --page-width:			960px;

    --col-blue-bright:		#95c3ca;
    --col-blue-light:		#83aebb;
    --col-blue-medium:		#15597a;
    --col-blue-dark:		#11242e;
    --col-white:			#ffffff;
    --col-cream:			#fbfaf1;
    --col-red:				#e30421;
    --col-green: 			#41a803;
	--col-captcha-bgr: 		#cdd7de;

    --font-main:			'Yanone Kaffeesatz', sans-serif;
	--font-input:			'Tahoma', sans-serif;

    --size-input:			13px;
    --size-xs:				17px;
    --size-s:				20px;
    --size-m:				22px;
    --size-l:				28px;
    --size-xl:				36px;
}

/* -------------------------------------------------- */
/* --- BASE ------------------------------------------ */
/* -------------------------------------------------- */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    min-width: var(--page-width);
    font-family: var(--font-main);
    font-size: var(--size-m);
    letter-spacing: 1px;
    color: var(--col-blue-bright);
    background: linear-gradient(#fcfcfc, #c7c8ca);
    background-attachment: fixed;
    overflow-x: auto;
}

/* -------------------------------------------------- */
/* --- LAYOUT ---------------------------------------- */
/* -------------------------------------------------- */

#wrapper {
	min-height: 100vh;
    min-width: var(--page-width);
    display: flex;
    flex-direction: column;
    background: url('/gfx/watermark.png') no-repeat bottom;
}

#main {
    width: var(--page-width);
    margin: 0 auto;
	flex: 1;
}


/* -------------------------------------------------- */
/* --- HEADER ---------------------------------------- */
/* -------------------------------------------------- */

#header {
    width: var(--page-width);
    height: 200px;
    margin: 0 auto;
    flex-shrink: 0;

    background: url('/gfx/header_logo.png') no-repeat left top;
    background-size: 960px 157px;
}

/* -------------------------------------------------- */
/* --- MENU ------------------------------------------ */
/* -------------------------------------------------- */

#menu {
    font-size: var(--size-xs);
    text-align: right;
    padding-top: 160px;
    padding-right: 10px;
}

#menu a {
    color: var(--col-blue-medium);
    text-decoration: none;
}

#menu a:hover {
    text-decoration: underline;
}

.menu_sep {
    margin: 0 20px;
    font-weight: bold;
}

.menu_selected {
    color: var(--col-red);
}

/* -------------------------------------------------- */
/* --- FOOTER ---------------------------------------- */
/* -------------------------------------------------- */

#footer {
    width: var(--page-width);
    margin: 40px auto 20px auto;
    border-top: 1px solid var(--col-blue-medium);
    text-align: center;
    flex-shrink: 0;
}

#visit_social_media {
    padding: 15px;
    color: var(--col-blue-medium);
    font-size: var(--size-m);
}

.socials a {
	padding: 0 20px;
}

#company_info {
    padding-top: 25px;
    color: var(--col-blue-medium);
    font-size: var(--size-xs);
}

.img-sprite {
    display: inline-block;
    background-repeat: no-repeat;
    background-position: top;
    cursor: pointer;
}

.img-sprite:hover {
    background-position: bottom;
}

/* -------------------------------------------------- */
/* --- TYPOGRAPHY ------------------------------------ */
/* -------------------------------------------------- */

.headlines {
    font-size: var(--size-xl);
    margin: 0 0 20px 0;
    padding: 0;
    text-transform: uppercase;
    color: var(--col-blue-medium);
}

.sub_headlines {
    font-size: var(--size-l);
    padding: 0;
	margin: 20px 0;
    text-transform: uppercase;
    color: var(--col-blue-medium);
}

.page_desc {
    font-size: var(--size-m);
    line-height: 30px;
    color: var(--col-blue-medium);
	margin: 0 0 20px 0;
}

.page_desc a {
    color: var(--col-blue-light);
    text-decoration: none;
}

.page_desc a:hover {
    text-decoration: underline;
}

/* -------------------------------------------------- */
/* --- FRONT PAGE ------------------------------------ */
/* -------------------------------------------------- */

.welcome {
    font-size: var(--size-xl);
    text-align: center;
	margin: 10px 0 20px 0;
    text-transform: uppercase;
}

.holder {
    display: flex;
    gap: 15px;
    flex-wrap: nowrap;
}

.block {
    width: 310px;
    flex-shrink: 0;
}

.thumb-holder {
    position: relative;
    height: 129px;
}

.thumb-holder img {
    position: absolute;
    top: 0;
    left: 0;
}

.block h1 {
    font-size: var(--size-xl);
    margin: 20px 0 10px 0;
    color: var(--col-blue-medium);
    font-weight: normal;
	text-transform: uppercase;
}

.thumb-text {
    font-size: var(--size-m);
    line-height: 32px;
    color: var(--col-blue-medium);
    border-top: 1px solid var(--col-blue-medium);
    margin-top: 10px;
    padding-top: 10px;
}

.read_more {
    width: 79px;
    height: 26px;
    background: url('/gfx/button_read_more.png') no-repeat;
    border: none;
    cursor: pointer;
}

.read_more:hover {
    background-position: 0 -26px;
}

/* -------------------------------------------------- */
/* --- PORTFOLIO --------------------------------------- */
/* -------------------------------------------------- */

 /* ---------- GRID ---------- */

.gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 0;
	margin: 0 0 20px 0;
	list-style: none;
}


/* ---------- ITEM ---------- */

.gallery li {
	display: flex;
	flex-direction: column;
	align-items: center;
}


/* ---------- THUMB WRAPPER ---------- */

.thumb {
	position: relative;
	width: 224px;
	height: 163px;

	background-image: url('/gfx/gallery_background.png');
	background-repeat: no-repeat;
	background-size: 224px 163px;
}


/* ---------- IMAGE ---------- */

.thumb img {
	position: absolute;
	top: 2px;
	left: 2px;

	width: 220px;
	height: 150px;

	border-radius: 8px;
	display: block;
}


/* ---------- HOVER ---------- */

.thumb::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;

	width: 220px;
	height: 150px;

	background-image: url('/gfx/gallery_hover.png');
	background-repeat: no-repeat;
	background-size: 220px 150px;

	opacity: 0;
	transition: opacity 0.2s ease;
	border-radius: 8px;
}

.thumb:hover::after {
	opacity: 1;
}

/* ---------- TITLE ---------- */

.gallery li em {
    margin-top: 5px;
    font-size: var(--size-s);
    color: var(--col-blue-medium);
    font-style: normal;
    text-align: center;
}

/* ---------- PAGE HEADER ---------- */

.page-header {
    display: flex;
    align-items: baseline;   /* sørger for tekst flugter */
    gap: 20px;               /* afstand mellem titel og filter */
    margin-bottom: 10px;
}

/* ---------- FILTER MENU ---------- */

#filter {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Items */
#filter li {
    display: flex;
    align-items: center;
    font-size: var(--size-xs);
    color: var(--col-blue-bright);
}

/* Separator */
#filter li + li::before {
    content: "//";
    margin: 0 16px;
    font-weight: bold;
    color: var(--col-blue-bright);
}

/* Links */
#filter a {
    color: var(--col-blue-medium);
    text-decoration: none;
}

#filter a:hover {
    text-decoration: underline;
}

/* Active */
#filter .active {
    color: var(--col-red);
    font-weight: normal;
}


/* ---------- PAGINATOR CONTAINER ---------- */

.paginator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0;
}


/* ---------- GENEREL BUTTON ---------- */

.pg {
    display: inline-block;
    height: 26px;
    background-repeat: no-repeat;
}


/* ---------- SPACING MELLEM IKONER ---------- */

.paginator .pg + .pg {
    margin-left: 10px;
}


/* ---------- NUMBERS (numbers.png) ---------- */

.pg-num {
    width: 26px;
    background-image: url('/gfx/paginator/numbers.png');
}

/* Normal (øverste række) */
.pg-num[data-num="1"] { background-position: 0 0; }
.pg-num[data-num="2"] { background-position: -26px 0; }
.pg-num[data-num="3"] { background-position: -52px 0; }
.pg-num[data-num="4"] { background-position: -78px 0; }
.pg-num[data-num="5"] { background-position: -104px 0; }
.pg-num[data-num="6"] { background-position: -130px 0; }
.pg-num[data-num="7"] { background-position: -156px 0; }
.pg-num[data-num="8"] { background-position: -182px 0; }
.pg-num[data-num="9"] { background-position: -208px 0; }

/* Hover (midterste række) */
.pg-num:hover {
    background-position-y: -26px;
}

/* Active (nederste række) */
.pg-num.active {
    background-position-y: -52px;
}


/* ---------- DIRECTIONS (directions.png) ---------- */

.pg-dir {
    background-image: url('/gfx/paginator/directions.png');
}

/* bredder */
.pg-first,
.pg-last {
    width: 43px;
}

.pg-prev,
.pg-next {
    width: 26px;
}


/* ---------- POSITIONER ---------- */

/* FIRST */
.pg-first { background-position: 0 0; }

/* PREV */
.pg-prev { background-position: -43px 0; }

/* NEXT */
.pg-next { background-position: -69px 0; }

/* LAST */
.pg-last { background-position: -95px 0; }


/* ---------- HOVER ---------- */

.pg-dir:hover {
    background-position-y: -26px;
}


/* ---------- DISABLED (nederste række) ---------- */

.pg-dir.disabled {
    background-position-y: -52px;
    pointer-events: none;
}



/* -------------------------------------------------- */
/* --- INFO ----------------------------------------- */
/* -------------------------------------------------- */


/* ---------- LAYOUT ---------- */

.info-wrapper {
    display: flex;
    gap: 40px;
    margin-top: 20px;
}

.info-left {
    width: calc(100% - 420px - 40px);
}


.info-right {
	margin-top: 70px;
    width: 420px;
}


/* ---------- FORM ---------- */

fieldset.contact {
    padding: 0 10px 20px 10px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--col-captcha-bgr);
    border: 1px solid var(--col-blue-medium);
    border-radius: 4px;
    color: var(--col-blue-medium);
}

/* Inputs */
fieldset.contact input[type=text],
fieldset.contact input[type=email] {
    font-family: var(--font-input);
    font-size: var(--size-input);
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
    background: var(--col-cream);
    border: 1px solid var(--col-blue-medium);
    border-radius: 4px;
    margin-top: 4px;
}

/* Textarea */
fieldset.contact textarea {
    font-family: var(--font-input);
    font-size: var(--size-input);
    width: 100%;
    height: 150px;
    box-sizing: border-box;
    border: 1px solid var(--col-blue-medium);
    background: var(--col-cream);
    padding: 8px;
    resize: none;
    border-radius: 4px;
    margin-top: 4px;
}

/* Spacing */
fieldset.contact p {
    margin-bottom: 12px;
}

/* Submit */
fieldset.contact input[type=submit] {
    width: 79px;
    height: 26px;
    background: url('/gfx/button_send.png');
    border: none;
    margin-left: 30px;
}

fieldset.contact input[type=submit]:hover {
    background-position: 0 -26px;
    cursor: pointer;
}

fieldset.contact input[type=submit]:active {
    background-position: 0 -52px;
}

/* Messages */
fieldset.contact span.red {
    color: var(--col-red);
}

fieldset.contact span.green {
    color: var(--col-green);
}

fieldset.contact span.catcha_highlight {
    color: var(--col-red);
}

p.status {
    margin: 5px 0;
}


/* ---------- CAPTCHA ---------- */

#captcha {
    margin-top: 0;
    overflow: hidden;
}

#captcha div {
    float: left;
}

div.captcha_opt {
    padding-right: 10px;
}


/* ---------- FACTS ---------- */

.facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 40px;
    margin: 4px 0;
}

.fact-item {
    display: flex;
    gap: 8px;
}

.fact-label {
    min-width: 80px;
    color: var(--col-blue-medium);
}

.fact-value {
    color: var(--col-blue-medium);
}


/* -------------------------------------------------- */
/* --- ADM ------------------------------------------ */
/* -------------------------------------------------- */
div.adm {
	width: 40%;
    font-family: Verdana, sans-serif;
    font-size: 12px;
	letter-spacing: 0;
    color: var(--col-blue-dark);
	margin: 100px auto 0 auto;
}

.adm table {
	width: 100%;
}

.adm span {
	padding-left: 30px;
}

/* Inputs */
.adm input[type=text],
.adm input[type=password] {
    font-family: var(--font-input);
    font-size: var(--size-input);
    padding: 6px;
    width: 100%;
    box-sizing: border-box;
    background: var(--col-cream);
    border: 1px solid var(--col-blue-medium);
    border-radius: 4px;
    margin-top: 4px;
}

/* Submit */
.adm input[type=submit] {
    width: 79px;
    height: 26px;
    background: url('/gfx/button_login.png');
    border: none;
	margin-top: 5px;
}

.adm input[type=submit]:hover {
    background-position: 0 -26px;
    cursor: pointer;
}

.adm input[type=submit]:active {
    background-position: 0 -52px;
}