/********************************
	Reset
********************************/
*{
	position: relative;
	box-sizing: border-box; /* no width change when adding padding */
	margin: 0px;
	padding: 0px;
	border: none;
}
ul{
	list-style-type: inherit;
}
ul li{
	font-size: inherit;
}
nav ul{
	list-style-type: none;
}
a{
	color: inherit;
	text-decoration: inherit;
}
nav a {
	text-decoration: none;
}
/********************************
	Variables
********************************/
:root {
	/*
		*
		* Layout Variables: Box model Variables
		*
	*/
	/*
		* Header page
	*/
	--header-horz-padding: 5rem;
	--header-vert-padding: 1rem;
	--bar-height: 5rem;/* (Fixed) header top bar */
	/*
		* Footer page
	*/
	--footer-horz-padding: 5rem;
	--footer-vert-padding: 2rem;
	/*
		* Sections page
	*/
	/* Header section */
	--header-section-horz-padding: 5rem;
	--header-section-vert-padding: 2rem;
	/* Section */
	--section-margin-bottom: 0rem;
	--section-horz-padding: 5rem;
	--section-vert-padding: 5rem;
	--section-vert-margin: 10vw;
	--column-horz-padding: 2rem;
	--column-vert-padding: 2rem;
	/*
		* Grid system
	*/
	/* Row */
	--row-width: 90vw;
	--row-margin: 1vw;
	/* Columns */
	--column-margin: 1vw;
	--column-horz-padding: 1rem;
	--column-vert-padding: 1rem;
	/*
		* Elements
	*/
	/* Button */
	--button-horz-padding: 1rem;
	--button-vert-padding: 1rem;
	/* Form */
	--form-input-padding: 0.5rem;
	/* Image */
	--hero-bg-img-ratio-s-scrn: 4/5;
	--hero-bg-img-ratio-m-scrn: 4/3;
	--hero-bg-img-ratio-l-scrn: 3/2;
	--bg-img-ratio-s-scrn: 4/5;
	--bg-img-ratio-m-scrn: 4/3;
	--bg-img-ratio-l-scrn: 3/2;
	--banner-img-ratio-s-scrn:	16/9;
	--banner-img-ratio-m-scrn:	4/1;
	--banner-img-ratio-l-scrn:	4/1;
	--col-img-ratio-s-scrn: 4/5;
	--col-img-ratio-m-scrn: 4/3;
	--col-img-ratio-l-scrn: 3/2;
	/* list */
	--list-column-gap: 1rem;
	--list-row-gap: 1rem;
	/*
		*
		* Font Variables
		*
	*/
	/*
		* Font Types
	*/
	/* Header Font Type */
	--font-type-headers: Playfair Display;
	/* Body Font Type */
	--font-type-body: Source Sans 3;
	/*
		*
		* Icon Variables
		*
	*/
	/*
		* Icon sizes
	*/
	--icon-size-small: 1.5rem;
	--icon-size-mid: 2rem;
	--icon-size-large: 3rem;
	/*
		*
		* Color Variables
		*
	*/
	/*
		* General Colors (not text)
	*/
	/* Primary color */
	--primary-color: #333652;
	--primary-color-rgba: rgba(51, 54, 82, 0.5);
	--primary-additional-color: #333652;
	--primary-additional-color-rgba: rgba(51, 101, 2, 0.5);
	/* Secondary color */
	--secondary-color: #FAD02C;
	--secondary-color-rgba: rgba(250, 208, 44, 0.5);
	--secondary-additional-color: #90ADC6;
	--secondary-additional-color-rgba: rgba(144, 173, 198, 0.5);
	/* Accent color: buttons, call to action etc */
	--accent-color: #90ADC6;
	--accent-color-rgba: rgba(144, 173, 198, 0.5);
	/* Neutral color */
	--neutral-color: #DDDDDD;
	--neutral-color-rgba: rgba(221, 221, 221, 0.5);
	--neutral-color-light: #EEEEEE;
	--neutral-color-light-rgba: rgba(238, 238, 238, 0.5);
	--neutral-color-medium: #AAAAAA;
	--neutral-color-medium-rgba: rgba(170, 170, 170, 0.5);
	--neutral-color-dark: #555555;
	--neutral-color-dark-rgba: rgba(85, 85, 85, 0.5);
	/* Overlay colors */
	--overlay-color: rgba(200, 200, 200,0.5);
	--overlay-light-color: rgba(250,250,250, 0.5);
	--overlay-medium-color: rgba(125, 125, 125, 0.5);
	--overlay-dark-color: rgba(222,222,222, 0.75);
	/*
		* General Text Colors
	*/
	/* Primary text color: Paragraphs, body-text, default text etc */
	--primary-text-color: #333652;
	--primary-text-color-rgba: rgba(51, 54, 82, 0.5);
	/* Secondary text color: Sub titles, small labels, time stamps etc */
	--secondary-text-color: #EEEEEE;
	--secondary-text-color-rgba: rgba(238, 238, 238, 0.5);
	/* Heading text */
	--heading-text-color: #2E2E41;
	--heading-text-color-rgba: rgba(46, 46, 65, 0.5);
	/* Links, button, interactive elements, text on background etc */
	--accent-text-color: #DDDDDD;
	--accent-text-color-rgba: rgba(221, 221, 221, 0.5);
	/* Hover text */
	--hover-text-color: #B7B1A8;
	--how-text-color-rgba: rgba(183, 177, 168, 0.5);
	/* Overlay text colors */
	--overlay-text-color: #------; /* Tekst on dark overlays */
	--overlay-light-text-color: #------;
	--overlay-medium-text-color: #EEEEEE;
	--overlay-dark-text-color: #------;
	/* Button (incl. border styles) */
	--button-border-style: solid;
	--button-border-width: 1px;
	--button-border-color: #111111;
	--button-border-radius: 2rem;
	--button-background-color: transparent;
	/*
		*
		* Remaining text Variables
		*
	*/
	/* 
        * Text Margins 
	*/
    --text-margin: 1.5rem;
    /* 
        * Text line-heights 
	*/
    --text-line-height: 1.5rem;
	/*
		*
		* Border Variables
		*
	*/
	--border: 1px solid var(--primary-text-color);
	--border-overlay-light: 1px solid var(--overlay-light-text-color);
	--border-overlay-medium: 1px solid var(--overlay-medium-text-color);
	--border-overlay-dark: 1px solid var(--overlay-dark-text-color);
	--grid-border: 1vw solid var(--secondary-text-color);
	--border-shadow: -15px 15px 18px 0px rgba(238, 238, 238, 0.5);
}
/********************************
	
	Layout
	
********************************/

/********************************
	Layout General
********************************/
body > header,
body > main,
body > footer{
	max-width: 2400px;
}

.overlay{
	position: absolute;
	top: 0px;	
	left: 0px;
	width: 100%;
	height: 100%;	
	z-index: 1;	
}

section > header{
	padding:	0rem
	0rem
	var(--header-section-vert-padding)
	0rem;	
}


section{
	padding:
	var(--section-vert-padding)
	calc( 0.5 * var(--section-horz-padding) );	
}

@media (min-width: 769px){
	
	section{
		padding:
		var(--section-vert-padding)
		var(--section-horz-padding);	
	}
	
}/* end (min-width: 769px) */

main > section:not(:last-of-type){
	margin-bottom: var(--section-margin-bottom);
}

[class*="col"]{
	display: flex;
	flex-direction: column;	
}

/********************************
	Content width styles
********************************/
@media (min-width: 769px) {
	
	.content_width {
		width: 80vw;
		max-width: 1024px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.between_content_and_max_width {
		width: 80vw;
		max-width: 1440px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.max_width {
		/* width: 90vw; */
		max-width: 1920px;
		margin-left: auto;
		margin-right: auto;
	}
	.full_width {
		width: 100%;
	}
	
	
} /*end min-width 769px */

/********************************
	Layout Grid
********************************/
@media (min-width: 426px){
	/* All grids */
	[class*="grid_"]{
 		display: grid;
		grid-column-gap: var(--column-margin);
		grid-row-gap: var(--row-margin);
		grid-auto-rows: auto;
	}
	[class*="grid_"].collapse{
 		grid-column-gap: 0px;
		grid-row-gap: 0px;
	}
	/* Default grid */
	.grid_12{
		grid-template-columns: repeat(12, 1fr);
	}
	/* Special grids */
	.grid_8{
		grid-template-columns: repeat(8, 1fr);
	}
	.grid_10{
		grid-template-columns: repeat(10, 1fr);
	}
	.grid_11{
		grid-template-columns: repeat(11, 1fr);
	}
	.grid_14{
		grid-template-columns: repeat(14, 1fr);
	}
	
}/* end (min-width: 769px) */	

.grid_12 + .grid_12{
margin-top: var(--row-margin);	
}	

/********************************
	Grid columns
********************************/	

[class*="col_d"]{
	grid-column: span 12; 
}

/********************************
	Grid columns default
********************************/
@media (min-width: 769px) {
	
	.col_d_1{
		grid-column: span 1; 
	}	
	
	.col_d_2{
		grid-column: span 2; 
	}
	
	.col_d_3{
		grid-column: span 3; 
	}
	
	.col_d_4{
		grid-column: span 4; 
	}
	
	.col_d_5{
		grid-column: span 5; 
	}
	
	.col_d_6{
		grid-column: span 6; 
	}
	
	.col_d_7{
		grid-column: span 7; 
	}
	
	.col_d_8{
		grid-column: span 8; 
	}
	
	.col_d_9{
		grid-column: span 9; 
	}
	
	.col_d_10{
		grid-column: span 10; 
	}
	
	.col_d_11{
		grid-column: span 11; 
	}
	
	.col_d_12{
		grid-column: span 12; 
	}	
	
	.d_display_none {
		display: none;	
	}
	
}/* end (min-width: 769px) */

/********************************
	Grid column extra small
********************************/
@media (max-width: 425px) {
	
	.col_xs_1 {
		grid-column: span 1;
	}
	
	.col_xs_2 {
		grid-column: span 2;
	}
	
	.col_xs_3 {
		grid-column: span 3;
	}
	
	.col_xs_4 {
		grid-column: span 4;
	}
	
	.col_xs_5 {
		grid-column: span 5;
	}
	
	
	.col_xs_6 {
		grid-column: span 6;
	}
	
	
	.col_xs_7 {
		grid-column: span 7;
	}
	
	
	.col_xs_8 {
		grid-column: span 8;
	}
	
	
	.col_xs_9 {
		grid-column: span 9;
	}
	
	.col_xs_10 {
		grid-column: span 10;
	}
	
	.col_xs_11 {
		grid-column: span 11;
	}
	
    .col_xs_12 {
		grid-column: span 12;
	}
	
	
	.xs_display_none {
		display: none;	
	}
	
}
/* end 	(max-width: 425px) */

/********************************
	Grid columns small
********************************/
@media (min-width: 426px) and (max-width: 768px) {
	
	.col_s_1 {
		grid-column: span 1;
	}
	
	.col_s_2 {
		grid-column: span 2;
	}
	
	.col_s_3 {
		grid-column: span 3;
	}
	
	.col_s_4 {
		grid-column: span 4;
	}
	
	.col_s_5 {
		grid-column: span 5;
	}
	
	
	.col_s_6 {
		grid-column: span 6;
	}
	
	
	.col_s_7 {
		grid-column: span 7;
	}
	
	
	.col_s_8 {
		grid-column: span 8;
	}
	
	
	.col_s_9 {
		grid-column: span 9;
	}
	
	.col_s_10 {
		grid-column: span 10;
	}
	
	.col_s_11 {
		grid-column: span 11;
	}
	
    .col_s_12 {
		grid-column: span 12;
	}
	
	
	.s_display_none {
		display: none;	
	}
	
}
/* end 	(min-width: 426px) and (max-width: 768px) */

/********************************
	150.d Grid columns mid small
********************************/

@media (min-width: 769px) and (max-width: 1024px) {
	
	.col_ms_1 {
		grid-column: span 1;
	}
	
	.col_ms_2 {
		grid-column: span 2;
	}
	
	.col_ms_3 {
		grid-column: span 3;
	}
	
	.col_ms_4 {
		grid-column: span 4;
	}
	
	/* line 110, 12-grid-css-grid.scss */
	.col_ms_5 {
		grid-column: span 5;
	}
	
	.col_ms_6 {
		grid-column: span 6;
	}
	
	/* line 118, 12-grid-css-grid.scss */
	.col_ms_7 {
		grid-column: span 7;
	}
	
	.col_ms_8 {
		grid-column: span 8;
	}
	
	.col_ms_9 {
		grid-column: span 9;
	}
	
	/* line 130, 12-grid-css-grid.scss */
	.col_ms_10 {
		grid-column: span 10;
	}
	
	/* line 134, 12-grid-css-grid.scss */
	.col_ms_11 {
		grid-column: span 11;
	}
	
	.col_ms_12 {
		grid-column: span 12;
	}
	
	.ms_display_none {
		display: none;	
	}
	
}
/* end 	min-width: (min-width: 769px) and (max-width: 1024px) */

/********************************
	Grid columns medium
********************************/
@media (min-width: 1025px) and (max-width: 1440px) {
	.col_m_1 {
		grid-column: span 1;
	}
	
	.col_m_2 {
		grid-column: span 2;
	}
	
	.col_m_3 {
		grid-column: span 3;
	}
	
	.col_m_4 {
		grid-column: span 4;
	}
	
	.col_m_5 {
		grid-column: span 5;
	}
	
	.col_m_6 {
		grid-column: span 6;
	}
	
	.col_m_7 {
		grid-column: span 7;
	}
	
	.col_m_8 {
		grid-column: span 8;
	}
	
	.col_m_9 {
		grid-column: span 9;
	}
	
	.col_m_10 {
		grid-column: span 10;
	}
	
	.col_m_11 {
		grid-column: span 11;
	}
	
	.col_m_12 {
		grid-column: span 12;
	}
	
	.m_display_none {
		display: none;	
	}
	
}
/* end 	(min-width: 1025px) and (max-width: 1440px) */

/********************************
	Position styles
********************************/
body > header.fixed {
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 3; /* 3 because content after overlay has z-index 2 */
}

/********************************
	Layers
********************************/
[class*="layer"]{
	position: absolute;	
	top: 0px;	
	left: 0px;	
}

.layer_-2{
	z-index: -2;
	overflow: hidden;
}

.layer_-1{
	z-index: -1;
	overflow: hidden;
}

.layer_0{
	position: relative;	
	z-index: initial;
	overflow: hidden;
	color: var(--overlay-medium-text-color);
	background-color: var(--overlay-medium-color);
}

.layer_1{
	z-index: 1;
	overflow: hidden;
	color: var(--overlay-medium-text-color);
	background-color: var(--overlay-medium-color);
}

.layer_2{
	z-index: 2;
	overflow: hidden;
}

[class*="layer"] .grid_12,
[class*="layer"] .grid_12 figure,
[class*="layer"] .grid_12 img{
	height: 100%;	
}

/********************************
	Media
********************************/
figure{
	display: flex;
	flex-direction: column;
	width: 100%;
}


figure img{
	width: 100%;
	object-fit: cover;
	object-position: center;
}

/* Default aspect ratio (if not defined) */
figure img{
	/*! aspect-ratio: 3/4; */
}

[class*="col_"]	figure img{
	aspect-ratio: var(--col-img-ratio-s-scrn);	
}

@media (min-width: 768px) and (max-width: 1440px){
	[class*="col_"]	figure img{
		aspect-ratio: var(--col-img-ratio-m-scrn);	
	}
}/* end (min-width: 768px) and (max-width: 1440px) */

@media (min-width: 1441px){
	[class*="col_"]	figure img{
		aspect-ratio: var(--col-img-ratio-l-scrn);	
	}
}/* end (min-width: 1441px) */

/********************************
	
	Text
	
********************************/

/********************************
	Font type font-faces
********************************/
/*
	Default Headings: Lora
	Default text: Roboto;
*/
@font-face {
    font-family: 'Abril_Fatface';
    src: url('../fonts/Google/Abril_Fatface/AbrilFatface-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Arvo';
    src: url('../fonts/Google/Arvo/Arvo-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bitter';
    src: url('../fonts/Google/Bitter/Bitter-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DM Serif Display';
    src: url('../fonts/Google/DM_Serif_Display/DMSerifDisplay-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lato';
    src: url('../fonts/Google/Lato/Lato-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Libre Baskerville';
    src: url('../fonts/Google/Libre_Baskerville/LibreBaskerville-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lobster';
    src: url('../fonts/Google/Lobster/Lobster-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lora';
    src: url('../fonts/Google/Lora/Lora-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Merriweather';
    src: url('../fonts/Google/Merriweather/Merriweather_24pt-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Google/Montserrat/Montserrat-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('../fonts/Google/Noto_Sans/NotoSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../fonts/Google/Open_Sans/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Google/Oswald/Oswald-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/Google/Playfair_Display/PlayfairDisplay-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Google//Poppins/Poppins-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PT Sans';
    src: url('../fonts/Google/PT_Sans/PTSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/Google/Raleway/Raleway-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Google/Roboto/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/Google/Source_Sans_3/SourceSans3-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Work Sans';
    src: url('../fonts/Google/Work_Sans/WorkSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/********************************
	Font families
********************************/
body {
	font-family: 'Roboto', sans-serif;
	font-family: var(--font-type-body);
}

h1, h2, h3, button {
	font-family: 'Lora', serif; 
	font-family: var(--font-type-headers);
}

/********************************
	Font sizes
********************************/
html{
	font-size: 85%;
	/*! background-color: red; */	
}

*{
	font-size: 1rem;
}

h1{
	font-size: 1.8rem;
}

h2{
	font-size: 1.6rem;
}

h3{
	font-size: 1.2rem;
}

p,a{
	font-size: 1rem;
}

@media (min-width: 769px) and (max-width: 1440px){
	
	html{
		font-size: 90%;
		/*! background-color: green; */	
	}
	
}/* end @media (min-width: 769px) and (max-width: 1440px) */


@media (min-width: 1441px){
	
	html{
		font-size: 100%;
		/*! background-color: blue; */	
	}
	
}/* end @media (min-width: 1441px) */

/********************************
	Text margins
********************************/
section * + header,
aside * + header,
section header + *:not(.grid_12),
aside header + *,
* + h2,
* + h3,
* + p,
* + article,
a.button + figure,
article + footer,
article + .button,
* + ul,
address + *,
* + address,
* + form,
form + *,
fieldset + fieldset,
section .button + *,
aside .button + *{
	margin-top: var(--text-margin);
}



/********************************
	Line heights
********************************/
p{
	line-height: 2rem;
}

/********************************
	Forms
********************************/
form{
	width: 100%;
	max-width: 1024px;
	padding: 2rem 2rem;
	background-color: var(--primary-additional-color);	
}

* + form{
	margin-top: var(--section-margin-bottom);	
}

fieldset{
	padding: var(--text-margin);
}

label{
	font-size: 1.2rem;
	display: block;
}

input:not([type="checkbox"]), textarea{
	width: 100%;
	padding: 1rem 1rem;
}

label + input, 
input + label,
label + textarea,
textarea + label{
	margin-top: 1rem;
}

input + button{
	margin-top: 2rem;	
}

textarea{
	height: 10rem;
}

/********************************
	
	Single elements
	
********************************/

/********************************
	Buttons
********************************/
button, a.button, a .button{
	display: block;
	width: 8rem;
	padding: 1rem;
	text-align: center;
	border-style: var(--button-border-style);
	border-width: var(--button-border-width);
	border-color: var(--button-border-color);
	border-radius: var(--button-border-radius);
	background-color: var(--button-background-color);
}

.layer_0 button, .layer_0 a.button, .layer_0 a .button{
	border-color: var(--overlay-medium-text-color);
}
/********************************
	
	Header page
	
********************************/
body > header ul{
	list-style-type: none;
}

/********************************
	Header top page
********************************/
#header-top-top{
	padding: var(--header-vert-padding) var(--header-horz-padding);
	background-color: var(--primary-color);
}

#header-top-top.fixed{
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 3; /* 3 because content after overlay has z-index 2 */	
}


#header-top-top address{
	display: flex;
	column-gap: 1rem;	
}

/********************************
	Header top page
********************************/
#header-top{
	padding: var(--header-vert-padding) var(--header-horz-padding);
	background-color: var(--primary-color);
}

#header-top.fixed{
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 3; /* 3 because content after overlay has z-index 2 */	
}

#header-top-top.fixed + #header-top.fixed{
	top: var(--bar-height);
}

#header-top address{
	display: flex;
	column-gap: 1rem;	
}


/********************************
	Header mid page
********************************/
#header-mid{
	padding:
	var(--header-vert-padding)
	calc( 0.5 * var(--header-horz-padding) );
}

#header-mid nav ul li{
	padding: 1rem;	
	border: solid 1px var(--secondary-color);	
	border-bottom: none;
	background-color: var(--primary-additional-color);	
}

#header-mid nav ul li:last-of-type{
	border: solid 1px var(--secondary-color);	
}


@media (min-width: 769px){
	
	#header-mid{
		padding:
		var(--header-vert-padding)
		var(--header-horz-padding);
	}	
	
	#header-mid .grid_12 [class*="col"]:nth-of-type(2){
		justify-content: center;
		align-items: flex-end;	
	}
	
	#header-mid nav ul{
		display: flex;
		column-gap: 1rem;
	}
	
	#header-mid nav ul li,
	#header-mid nav ul li:last-of-type{
		padding: 0rem;	
		border: none;	
		background-color: transparent;	
	}
	
}/* end @media (min-width: 769px) */	



/********************************
	Header hero page
********************************/
#header-top.fixed + #header-hero{
	margin-top: var(--bar-height);
}

#header-top-top.fixed + #header-top.fixed + #header-hero{
	margin-top: calc(2 * var(--bar-height) );
}

#header-hero img{
	aspect-ratio: 8/3;
}

#header-hero .overlay{
	color: var(--secondary-text-color);
	background-color: rgba(125,125,125,0.5);
}

#header-hero .overlay h1 + h3{
	margin-top: 2rem;	
}




/********************************
	
	Footer page
	
********************************/
body > footer{
	
}

body > footer ul{
	display: flex;
	flex-direction: column;
	row-gap: var(--list-row-gap);
	list-style-type: none;	
}

body > footer ul li{
	display: flex;
	column-gap: var(--list-column-gap);
	align-items: center;
}



#footer-top{
	display: flex;
	justify-content: center;
	padding: var(--footer-vert-padding) var(--footer-horz-padding);
	list-style-type: none;
}

#footer-top ul{
	display: flex;
	column-gap: var(--list-column-gap);
}

#footer-mid{
	background-color: var(--primary-color);
}

#footer-bottom{
	padding: var(--footer-vert-padding) var(--footer-horz-padding);	
	background-color: var(--primary-additional-color);	
}

#footer-bottom address{
	display: flex;
	column-gap: var(--list-column-gap);	
}

/********************************
	
	Banners
	
********************************/
section.banner{
	padding: 0rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.banner	figure img{
	aspect-ratio: var(--banner-img-ratio-s-scrn);	
}

@media (min-width: 768px) and (max-width: 1440px){
	.banner	figure img{
		aspect-ratio: var(--banner-img-ratio-m-scrn);	
	}
}/* end (min-width: 768px) and (max-width: 1440px) */

@media (min-width: 1441px){
	.banner	figure img{
		aspect-ratio: var(--banner-img-ratio-l-scrn);	
	}
}/* end (min-width: 1441px) */

.banner	.overlay{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: var(--overlay-medium-text-color);
	background-color: var(--overlay-medium-color);	
}

/********************************
	
	Design specific
	
********************************/

/********************************
	Design specific general styling
********************************/
section{
}

section > header{
}

section [class*="col_"]{
}

section [class*="col_"] header{
}

section [class*="col_"] footer{
}

/********************************
	Header top
********************************/
body > header #header-top {
top: 0%;
left: 0%;	
width: 100%;	
}

body > header  #header-top  {
	z-index: 10;
	display: flex;
	flex-direction: row;
  height: var(--bar-height);
	padding: 0rem calc( var(--section-vert-padding) / 2 );
	justify-content: space-between;	
	flex-wrap: wrap;
	align-items: center;
	color:  var(--secondary-text-color);
	background-color:  var(--primary-color);
	z-index: 10;
}

body > header #header-top nav ul  {
	display: flex;
	column-gap: 1rem;
}




/********************************
	Header page
********************************/
#header-hero {
	height: calc(100vh - var(--bar-height));  
	
}

#header-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color:  var(--accent-text-color);
}

#header-hero [class*="col_"]{
    align-items: center;
    justify-content: center;
    color: #fff;
}

#header-hero .overlay{
	
}

#header-hero .overlay section.top{
	height: 40%;   
	background-color:  var(--primary-color);   
}

#header-hero .overlay section.bottom{
	height: 60%;    
	background-color: var(--secondary-color);  
}


/********************************
	Content Header page
********************************/
#header-hero #header-hero figure {
    /* width: 80%; */
    /* height: 50%; */
}

#header-hero img {
	height: 100%;
    object-fit: cover;
    object-position: center;
}

#header-hero *:not(.overlay){
    z-index: 2;
}

body > header #header-hero h1 {
	/* font-size: 3.2rem; */
}

#header-hero figure + h1 {
	margin-top: 1rem;	
}

#header-hero h2 {
	/* font-size: 2.4rem; */
}

#header-hero p {
	/* font-size: 1.8rem; */
}

body > header #header-hero p + h2 {
	margin-top: 1rem;	
}

body > header #header-hero .scroll-down {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    bottom: 20px;
    font-size: 24px;
    cursor: pointer;
}


/********************************
	Responsiveness header-hero
********************************/
/*---------------------------------------------------------------------------
	>>> Begin Mobile Large Screen (max-width: 425px)
-----------------------------------------------------------------------------*/
@media (max-width: 425px)  {
	
	#header-hero {
		
	}
	
	
} 
/*---------------------------------------------------------------------------
	<<< End Mobile Large Screen (max-width: 425px)
-----------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------
	>>> Begin Mobile Large Screen (min-width: 426px) and (max-width: 768px)
-----------------------------------------------------------------------------*/

@media (min-width: 426px) and (max-width: 768px) {
	
	#header-hero {
		
	}
	
	
}
/*---------------------------------------------------------------------------
	<<< End Mobile Large Screen (min-width: 426px) and (max-width: 768px)
-----------------------------------------------------------------------------*/



/*---------------------------------------------------------------------------
	>>> Begin bottom Small Screen (min-width: 769px) and (max-width: 1024px)
-----------------------------------------------------------------------------*/
@media (min-width: 769px) and (max-width: 1024px) {
	
	#header-hero {
		
	}
	
}
/*---------------------------------------------------------------------------
	<<< End bottom Small Screen (min-width: 769px) and (max-width: 1024px)
-----------------------------------------------------------------------------*/


/*---------------------------------------------------------------------------
	>>> Begin bottom Screen (min-width: 1025px) and (max-width: 1440px)
-----------------------------------------------------------------------------*/
@media (min-width: 1025px) and (max-width: 1440px)  {  
	
	body > header #header-hero { 
		
	}
	
	body > header #header-hero img {
		
	}  
	
}
/*---------------------------------------------------------------------------
	<<< End bottom Screen (min-width: 1025px) and (max-width: 1440px)
-----------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------
	>>> Begin Large Screen (min-width: 1441px) 
-----------------------------------------------------------------------------*/
@media (min-width: 1441px) {  
	
	body > header #header-hero { 
		
	}
	
	body > header #header-hero img {
		
	}   
	
}
/*---------------------------------------------------------------------------
	<<< End Large Screen (min-width: 1441px)
-----------------------------------------------------------------------------*/




/********************************
	Section offers
********************************/
#offers{
	color:  var(--primary-text-color);
	background-color:  var(--neutral-color-light);
}

#offers > header{
	text-align: center;	
}

#offers [class*="col_"]{
	/*! border: solid 2px var(--accent-color) */
}

#offers [class*="col_"]:nth-of-type(odd){
justify-content: center;	
padding: calc(0.5 *	var(--section-vert-padding) ) calc(0.5 *	var(--section-horz-padding) );
}

#offers [class*="col_"] figure,
#offers [class*="col_"] img{
	aspect-ratio: 1;
	aspect-ratio: auto;
	height: 100%;
}


/********************************
	services
********************************/
#services{
	color:  var(--primary-text-color);
	background-color:  var(--neutral-color-light);
}

#services > header{
	text-align: center;
}

#services [class*="col_"]{
	padding: var(--column-vert-padding)	var(--column-horz-padding);
	text-align: center;
}

#services footer{
}

#services footer .button{
	width: 100%;
	/*! border: 1px solid var(--accent-color); */	
	/*! border-radius: 2rem; */
	/*! background-color: transparent; */
}
/********************************
	Section why-us
********************************/
#why-us{
	color:  var(--secondary-text-color);
	background-color:  var(--accent-color);	
}

#why-us > header{
	text-align: center;	
}

#why-us > .grid_12 > [class*="col_"] > .grid_12 > [class*="col_"]{
	align-items: center;
	justify-content: center;
	padding: var(--column-vert-padding) var(--column-horz-padding);	
	text-align: center;
}

#why-us > .grid_12 [class*="col_"] h3 {
	text-transform: capitalize;
}

#why-us > .grid_12 [class*="fa-"] {
	padding: 2rem;
	font-size: 3rem;
	background-color: var(--accent-color);
	border-radius: 50%;
	border: var(--border);
}
/********************************
portfolio
********************************/
#portfolio {
color:  var(--primary-text-color);
background-color:  var(--neutral-color-light);
}

#portfolio figure .overlay {
display: none;
}

#portfolio .grid_12 figure   {
	/*! z-index: 15; */
	opacity: 0.7;
	height: 100%;
	/*! background-color: green; */
}

#portfolio .grid_12 figure img  {
z-index: 1;
object-fit: cover;
object-position: center;	
height: 100%;
}

#portfolio .grid_12 {
grid-template-columns: repeat(12, 1fr );
grid-template-rows:	repeat(14, 1fr );
column-gap: var(--column-margin);
row-gap: var(--row-margin);	
height: calc(350vh - 4rem);
/*! z-index: 20; */
}

#portfolio .grid_12 .cell {
  overflow: hidden;
 }

#portfolio .grid_12 .cell:nth-of-type(1) {
/*! grid-area: cell1; */
	grid-column: 1/span 2;
	grid-row: 1/span 12;
} 

#portfolio .grid_12 .cell:nth-of-type(2) {
/*! grid-area: cell2; */
		grid-column: 3/span 5;
	grid-row: 1/span 2;
}

#portfolio .grid_12 .cell:nth-of-type(3) {
/*! grid-area: cell3; */
	grid-column: 8/span 5;
	grid-row: 1/span 3;
}

#portfolio .grid_12 .cell:nth-of-type(4) {
/*! grid-area: cell4; */

grid-column: 3/span 5;
grid-row: 3/span 2;
}

#portfolio .grid_12 .cell:nth-of-type(5) {
/*! grid-area: cell5; */
grid-column: 8/span 5;
grid-row: 4/span 6;	
}

#portfolio .grid_12 .cell:nth-of-type(6) {
/*! grid-area: cell6; */	
grid-column: 3/span 5;
grid-row: 5/span 4;		
}

#portfolio .grid_12 .cell:nth-of-type(7) {
/*! grid-area: cell7; */	
grid-column: 3/span 5;
grid-row: 9/span 2;			
}

#portfolio .grid_12 .cell:nth-of-type(8) {
/*! grid-area: cell8; */	
grid-column: 8/span 5;
grid-row: 10/span 2;			
}

#portfolio .grid_12 .cell:nth-of-type(9) {
/*! grid-area: cell9; */
grid-column: 3/span 5;
grid-row: 11/span 4;			
}

#portfolio .grid_12 .cell:nth-of-type(10) {
/*! grid-area: cell10; */
grid-column: 8/span 5;
grid-row: 12/span 3;			
}

#portfolio .grid_12 .cell:nth-of-type(11) {
	/*! grid-area: cell11; */
	grid-column: 1/span 2;
	grid-row: 2/span 2;		
}

#portfolio .grid_12 .cell:nth-of-type(12) {
	/*! grid-area: cell12; */
	grid-column: 1/span 2;
	grid-row: 4/span 3;		
}

#portfolio .grid_12 .cell:nth-of-type(13) {
	/*! grid-area: cell13; */
	grid-column: 1/span 2;
	grid-row: 7/span 6;		
}

#portfolio .grid_12 .cell:nth-of-type(14) {
	/*! grid-area: cell14; */
	grid-column: 1/span 2;
	grid-row: 13/span 2;			
}


#portfolio .grid_12 .cell:nth-of-type(15) {
/*! grid-area: cell15; */
grid-column: 4/span 1;
grid-row: 8/span 1;			
}

#portfolio .grid_12 .cell:nth-of-type(16) {
/*! grid-area: cell16; */
	grid-column: 4/span 3;
grid-row: 9/span 4;		
}


#portfolio .grid_12 .cell:nth-of-type(17) {
/*! grid-area: cell17; */
	grid-column: 8/span 2;
grid-row: 9/span 4;		
}

#portfolio .grid_12 .cell:nth-of-type(18) {
/*! grid-area: cell18; */
grid-column: 1/span 2;
grid-row: 10/span 3;			
}

#portfolio .grid_12 .cell:nth-of-type(19) {
/*! grid-area: cell19; */
	grid-column: 3/span 1;
grid-row: 10/span 3;		
	
}

#portfolio .grid_12 .cell:nth-of-type(20) {
/*! grid-area: cell20; */
}

#portfolio .grid_12 .cell:nth-of-type(21) {
/*!	grid-area: cell21; */
}

#portfolio .grid_12 .cell:nth-of-type(22) {
/*! grid-area: cell22; */
}

#portfolio .grid_12 .cell:nth-of-type(23) {
/*! grid-area: cell23; */
}

#portfolio .grid_12 .cell:nth-of-type(24) {
grid-area: cell24;
}

#portfolio .grid_12 .cell:nth-of-type(n+15) {
display: none;
}



/********************************
	Responsiveness portfolio
********************************/
/*---------------------------------------------------------------------------
	>>> Begin Mobile Large Screen (max-width: 425px)
-----------------------------------------------------------------------------*/
@media (max-width: 425px)  {
	
	#portfolio {
		
	}
	
	
	
} 
/*---------------------------------------------------------------------------
	<<< End Mobile Large Screen (max-width: 425px)
-----------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------
	>>> Begin Mobile Large Screen (min-width: 426px) and (max-width: 768px)
-----------------------------------------------------------------------------*/

@media (min-width: 426px) and (max-width: 768px) {
	
	body >  main > section#portfolio { 
	padding-left: 0rem;
	padding-right: 0rem;
	}	
	
	body >  main > section#portfolio .grid_12 {
	grid-auto-rows: 25vw;	   
}
	
	body >  main > section#portfolio .grid_12 { 
		
	}
	
	body >  main > section#portfolio .cell { 
		
	}	
	
	
	
	body >  main > section#portfolio .cell figure {
		
	} 	
	
	body >  main > section#portfolio .cell figure img {
		
	}  
	
	
}
/*---------------------------------------------------------------------------
	<<< End Mobile Large Screen (min-width: 426px) and (max-width: 768px)
-----------------------------------------------------------------------------*/



/*---------------------------------------------------------------------------
	>>> Begin bottom Small Screen (min-width: 769px) and (max-width: 1024px)
-----------------------------------------------------------------------------*/
@media (min-width: 769px) and (max-width: 1024px) {
	
	
	
	body >  main > section#portfolio .grid_12 { 
	
	}
	
	body >  main > section#portfolio .cell { 
		
	}	
	
	
	
	body >  main > section#portfolio .cell figure {
		
	} 	
	
	body >  main > section#portfolio .cell figure img {
		
	}  
	
	
}
/*---------------------------------------------------------------------------
	<<< End bottom Small Screen (min-width: 769px) and (max-width: 1024px)
-----------------------------------------------------------------------------*/


/*---------------------------------------------------------------------------
	>>> Begin bottom Screen (min-width: 1025px) and (max-width: 1440px)
-----------------------------------------------------------------------------*/
@media (min-width: 1025px) and (max-width: 1440px)  {  
	
	body >  main > section#portfolio { 
		
	}	
	
	body >  main > section#portfolio .grid_12 { 
		
	}
	
	body >  main > section#portfolio .grid_12 .cell { 
		
	}	
	
	body >  main > section#portfolio .grid_12 .cell:nth-of-type(n+20) { 
	display: none;	
	}	
	
	
	body >  main > section#portfolio .grid_12 .cell figure {
		
	} 	
	
	body >  main > section#portfolio .grid_12 .cell figure img {
		
	}  
	
}
/*---------------------------------------------------------------------------
	<<< End bottom Screen (min-width: 1025px) and (max-width: 1440px)
-----------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------
	>>> Begin Large Screen (min-width: 1441px) 
-----------------------------------------------------------------------------*/
@media (min-width: 1441px) {  
	
	body >  main > section#portfolio { 
		
	}	
	
	body >  main > section#portfolio .grid_12 { 
		
	}
	
	body >  main > section#portfolio .grid_12 .cell { 
		
	}	
	
	body >  main > section#portfolio .grid_12 .cell:nth-of-type(n+20) { 
	display: none;	
	}	
	
	
	body >  main > section#portfolio .grid_12 .cell figure {
		
	} 	
	
	body >  main > section#portfolio .grid_12 .cell figure img {
		
	}  
	
}
/*---------------------------------------------------------------------------
	<<< End Large Screen (min-width: 1441px)
-----------------------------------------------------------------------------*/
/********************************
	our-designers
********************************/
#our-designers{
	color:  var(--primary-text-color);
	background-color:  var(--neutral-color-light);
}

#our-designers > header{
	text-align: center;
}

#our-designers [class*="col_"]{
	padding: var(--column-vert-padding)	var(--column-horz-padding);
	color: var(--primary-text-color);
	
}

#our-designers footer{
}

#our-designers footer nav ul{
display: flex;
column-gap: var(--list-column-gap);
}

#our-designers footer nav ul a{
padding: 1rem;
background-color: var(--accent-color);
}

#our-designers footer nav [class*="fa-"]{
color: var(--secondary-text-color);
}

/********************************
	Section our-customers
********************************/
#our-customers{
	color:  var(--primary-text-color);
	background-color:  var(--neutral-color-light);
}

#our-customers > header{
text-align: center;	
}

#our-customers [class*="col_"] img{
	/*! aspect-ratio: 4/3; */	
}
/********************************
	contact
********************************/
#contact{
	color:  var(--primary-text-color);
	background-color:  var(--accent-color);
}

#contact > header{
	text-align: center;	
}

#contact [class*="col_"]{
	align-items: center;
}

#contact [class*="col_"] ul{
	list-style-type: none;	
}

#contact [class*="col_"] ul a{
	text-decoration: none;	
}

#contact iframe{
	width: 100%;	
	height: 450px;	
}

/********************************
	contact-form
********************************/
#contact-form{
	color:  var(--primary-text-color);
	background-color:  var(--secondary-additional-color);
}

#contact-form [class*="col_"] figure,
#contact-form [class*="col_"] img{
		height: 100%;
}

#contact-form form{
	background-color: transparent;
}

#contact-form form fieldset{
	border: var(--border);
}

#contact-form form input::placeholder {
	text-transform:capitalize;
}

#contact-form form button[type="submit"]{
	grid-column-start: span 12;
	width: 100%;
	/*! border: 1px solid var(--accent-color); */	
	/*! border-radius: 2rem; */
	/*! background-color: transparent; */
}

#contact-form [class*="col_"] ul{
	list-style-type: none;	
}
/************************************
Footer styles (design specific)
*************************************/

/********************************
Footer mid
********************************/
#footer-mid {
color:  var(--primary-text-color);
background-color:  var(--secondary-color);
}

#footer-mid form{
padding: 0rem;	
color: var(--primary-text-color);
background-color: transparent;
}

#footer-mid form fieldset{
padding: 0rem;	
}

#footer-mid [class*="col"]:nth-of-type(4) ul {
display: flex;
flex-direction: row;
/* justify-content: center; */
column-gap: var(--list-column-gap);  
}  

#footer-mid [class*="fa-"]{
font-size: var(--icon-size-small);  
}  

/********************************
Responsiveness Footer mid
********************************/
/*---------------------------------------------------------------------------
>>> Begin Mobile Large Screen (min-width: 426px)
-----------------------------------------------------------------------------*/
@media (min-width: 426px)  {
	
#footer-mid {

}

} 
/*---------------------------------------------------------------------------
<<< End Mobile Large Screen (min-width: 426px)
-----------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------
>>> Begin Mobile Large Screen (min-width: 426px) and (max-width: 768px)
-----------------------------------------------------------------------------*/

@media (min-width: 426px) and (max-width: 768px) {

#footer-mid {

}

}
/*---------------------------------------------------------------------------
<<< End Mobile Large Screen (min-width: 426px) and (max-width: 768px)
-----------------------------------------------------------------------------*/


/*---------------------------------------------------------------------------
	>>> Begin Mid Small Screen (min-width: 769px) and (max-width: 1024px)
-----------------------------------------------------------------------------*/
@media (min-width: 769px) and (max-width: 1024px) {
#footer-mid [class*="col"] {
}
}
/*---------------------------------------------------------------------------
	<<< End Mid Small Screen (min-width: 769px) and (max-width: 1024px)
-----------------------------------------------------------------------------*/


/*---------------------------------------------------------------------------
	>>> Begin Mid Screen (min-width: 1025px) and (max-width: 1440px)
-----------------------------------------------------------------------------*/
@media (min-width: 1025px) and (max-width: 1440px)  {  
#footer-mid [class*="col"] {
grid-column: span 4;
}
}
/*---------------------------------------------------------------------------
	<<< End Mid Screen (min-width: 1025px) and (max-width: 1440px)
-----------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------
	>>> Begin Large Screen (min-width: 1441px) 
-----------------------------------------------------------------------------*/
@media (min-width: 1441px) {  
#footer-mid [class*="col"] { 
}
#footer-mid [class*="col"]:last-of-type header {
text-align: center;  
}  
#footer-mid [class*="col"]:nth-of-type(4) ul {
display: flex;
justify-content: center;
column-gap: var(--list-column-gap);  
}  
}
/*---------------------------------------------------------------------------
	<<< End Large Screen (min-width: 1441px)
-----------------------------------------------------------------------------*/





#footer-mid [class*="col"] form {
display: flex;
flex-direction: column;
row-gap: var(--list-row-gap);
}


#footer-mid [class*="col"] input[type="text"],
#footer-mid [class*="col"] input[type="email"]{
width: 100%;
}

#footer-mid [class*="col"]:nth-of-type(4) ul {
display: flex;
column-gap: var(--list-column-gap);  
}


/********************************
	Footer bottom
********************************/
body > footer #footer-bottom {
	padding: 1rem var(--section-horz-padding);
	color:  var(--secondary-text-color);
	background-color:  var(--primary-color);
}



body > footer #footer-bottom nav a:hover {
	color: var(--accent-color);
}

body > footer #footer-bottom ul {
	display: flex;
	flex-direction: row;
	column-gap: 1rem;
	font-size: 1.0rem;	
	/* color: var(--accent-color); */
	/* color: var(--primary-text-color); */
}


/********************************
	Responsiveness Footer bottom
********************************/
/*---------------------------------------------------------------------------
	>>> Begin Mobile Large Screen (min-width: 426px)
-----------------------------------------------------------------------------*/
@media (min-width: 426px)  {
	
	#footer-bottom {
		
	}
	
} 
/*---------------------------------------------------------------------------
	<<< End Mobile Large Screen (min-width: 426px)
-----------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------
	>>> Begin Mobile Large Screen (min-width: 426px) and (max-width: 768px)
-----------------------------------------------------------------------------*/

@media (min-width: 426px) and (max-width: 768px) {
	
	#footer-bottom {
		
	}
	
}
/*---------------------------------------------------------------------------
	<<< End Mobile Large Screen (min-width: 426px) and (max-width: 768px)
-----------------------------------------------------------------------------*/



/*---------------------------------------------------------------------------
	>>> Begin bottom Small Screen (min-width: 769px) and (max-width: 1024px)
-----------------------------------------------------------------------------*/
@media (min-width: 769px) and (max-width: 1024px) {
	
	#footer-bottom {
		
	}
	
}
/*---------------------------------------------------------------------------
	<<< End bottom Small Screen (min-width: 769px) and (max-width: 1024px)
-----------------------------------------------------------------------------*/


/*---------------------------------------------------------------------------
	>>> Begin bottom Screen (min-width: 1025px) and (max-width: 1440px)
-----------------------------------------------------------------------------*/
@media (min-width: 1025px) and (max-width: 1440px)  {  
	
	#footer-bottom {
		
	}
}
/*---------------------------------------------------------------------------
	<<< End bottom Screen (min-width: 1025px) and (max-width: 1440px)
-----------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------
	>>> Begin Large Screen (min-width: 1441px) 
-----------------------------------------------------------------------------*/
@media (min-width: 1441px) {  
	
	#footer-bottom { 
		
	}
	
	
}
/*---------------------------------------------------------------------------
	<<< End Large Screen (min-width: 1441px)
-----------------------------------------------------------------------------*/