/* 

Style Sheet for Butter aufs Brot - www.butteraufsbrot.com

Design and Development by Svevo Romano for Mavo Studio (www.mavostudio.com) - ©2025 All Rights Reserved

NOTES

# Corporate colors

Butter yellow: #f9f2d7;
Font grey: #191819;
Light grey: #f4f7f8;
Purple: #49367A
Green: #7A6D36


Just some notes following



# Corporate Fonts
Sans: Helvetica Neue

*/



/* PX to EM table


1px - 0.0625em
2px - 0.125em
3px - 0.1875em
4px - 0.25em
5px - 0.3125em
6px - 0.375em
7px - 0.4375em
8px - 0.5em
9px - 0.5625em
10px - 0.625em
11px - 0.6875em
12px - 0.75em
13px - 0.8125em
14px - 0.875em
15px - 0.9375em
17px - 1.0625em	
18px - 1.125em	
19px - 1.1875em	
20px - 1.250em
21px - 1.3125em	
22px - 1.375em	
23px - 1.4375em	
24px - 1.5em	
25px - 1.5625em	
26px - 1.625em	
27px - 1.6875em	
28px - 1.75em	
29px - 1.8125em	
30px - 1.875em	
31px - 1.9375em
32px - 2em
33px - 2.0625em
34px - 2.125em
35px - 2.1875em
36px - 2.25em
37px - 2.3125em
38px - 2.375em
39px - 2.4375em
40px - 2.5em

	
*/



/* Let's load the Helvetica Neue font faces we need */


@font-face {
    font-family: 'HelveticaNeue';
    src:url('../fonts/HelveticaNeue.woff') format('woff'),
        url('../fonts/HelveticaNeue.woff2') format('woff2'),
        url('../fonts/HelveticaNeue.eot'),
        url('../fonts/HelveticaNeue.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeue.otf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeue-Italic';
    src:url('../fonts/HelveticaNeue-Italic.woff') format('woff'),
        url('../fonts/HelveticaNeue-Italic.woff2') format('woff2'),
        url('../fonts/HelveticaNeue-Italic.eot'),
        url('../fonts/HelveticaNeue-Italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeue-Italic.otf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeue-Light';
    src:url('../fonts/HelveticaNeue-Light.woff') format('woff'),
        url('../fonts/HelveticaNeue-Light.woff2') format('woff2'),
        url('../fonts/HelveticaNeue-Light.eot'),
        url('../fonts/HelveticaNeue-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeue-Light.otf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeue-Medium';
    src:url('../fonts/HelveticaNeue-Medium.woff') format('woff'),
        url('../fonts/HelveticaNeue-Medium.woff2') format('woff2'),
        url('../fonts/HelveticaNeue-Medium.eot'),
        url('../fonts/HelveticaNeue-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeue-Medium.otf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeue-Bold';
    src:url('../fonts/HelveticaNeue-Bold.woff') format('woff'),
        url('../fonts/HelveticaNeue-Bold.woff2') format('woff2'),
        url('../fonts/HelveticaNeue-Bold.eot'),
        url('../fonts/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeue-Bold.otf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeue-CondensedBold';
    src:url('../fonts/HelveticaNeue-CondensedBold.woff') format('woff'),
		url('../fonts/HelveticaNeue-CondensedBold.woff2') format('woff2'),
		url('../fonts/HelveticaNeue-CondensedBold.eot'),
		url('../fonts/HelveticaNeue-CondensedBold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/HelveticaNeue-CondensedBold.otf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeueLTStd-Blk';
    src:url('../fonts/HelveticaNeueLTStd-Blk.woff') format('woff'),
        url('../fonts/HelveticaNeueLTStd-Blk.woff2') format('woff2'),
        url('../fonts/HelveticaNeueLTStd-Blk.eot'),
        url('../fonts/HelveticaNeueLTStd-Blk.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeueLTStd-Blk.otf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeue-CondensedBlack';
    src:url('../fonts/HelveticaNeue-CondensedBlack.woff') format('woff'),
        url('../fonts/HelveticaNeue-CondensedBlack.woff2') format('woff2'),
        url('../fonts/HelveticaNeue-CondensedBlack.eot'),
        url('../fonts/HelveticaNeue-CondensedBlack.eot?#iefix') format('embedded-opentype'),
        url('../fonts/HelveticaNeue-CondensedBlack.otf') format('truetype');

    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




/* ###################################################### */
/* ################# BASIC RESET STYLES ################# */
/* ###################################################### */

/* NORMALIZE */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}

*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.clearfix:before, .clearfix:after {
	content: '';
	display: table;
}

.clearfix:after {
	clear: both;
}

html {
	font-size: 100%;	
}



/*****************************************************************

 ######   ######## ##    ## ######## ########     ###    ##       
##    ##  ##       ###   ## ##       ##     ##   ## ##   ##       
##        ##       ####  ## ##       ##     ##  ##   ##  ##       
##   #### ######   ## ## ## ######   ########  ##     ## ##       
##    ##  ##       ##  #### ##       ##   ##   ######### ##       
##    ##  ##       ##   ### ##       ##    ##  ##     ## ##       
 ######   ######## ##    ## ######## ##     ## ##     ## ######## 

******************************************************************/


body {
	font-family: 'HelveticaNeue', sans-serif;
	font-weight: normal;
	background: #F9F2D7;
}


a:link {
	color: #49367A;
}

a:visited {
	color: #49367A;
}

a:hover {
	color: #7c6ba6;
	-webkit-transition: color 0.1s;
	transition: color 0.1s;
	 -moz-transition: 0.1s;
	 backface-visibility: hidden;
}

a.white:link, a.white:visited, a.white:hover {
	color: #fff;
}

h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link {
	color: #49367A;
	/* text-decoration: none; */
}

h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
	color: #49367A;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
	color: #7c6ba6;
	-webkit-transition: color 0.1s;
	transition: color 0.1s;
}

/*
h3 a:link::after {
	content: url('../images/svg/open-link-icon.svg');
	display: inline-block;
	width: 5%;
	height: auto;
	margin-left: 10px;
}
*/


.live_link:hover, .live_link:link, .live_link:visited {
	color: #49367A;
}

p {
	margin: 0 0 20px 0;
	padding: 0;
	font-size: 1.125em; /* 18px */
	line-height: 1.4444444444444444em; /* 26px */
	color: #1d1d1f;
}


/* MAIN PAGE HEADINGS */

h1 { 
	font-family: 'HelveticaNeue-Bold', sans-serif;
	font-size: 2.5em;
	line-height: 1em;
	margin: 0 0 24px 0;
	padding: 0;
	color: #1d1d1f;
	/* IMPORTANT TO SPECIFY FONT-WEIGHT: NORMAL
	TO AVOID STRANGE LETTER SPACING ON MY IPHONE */
	font-weight: normal;
}

h2 {
	font-family: 'HelveticaNeue', sans-serif;
	font-size: 2.5em;
	line-height: 1.0625em;
	margin: 0 0 30px 0;
	padding: 10px 10px;
	text-align: left;
	color: #BAAF80;
	text-align: center;
	/* IMPORTANT TO SPECIFY FONT-WEIGHT: NORMAL
	TO AVOID STRANGE LETTER SPACING ON MY IPHONE */
	font-weight: normal;
	width: 100%;
}

h3 { /* The h3 headings at present appear only in the content boxes (vertical, horizontal, banners etc.)
		The following values apply to all of them
		Other values (specifically sizes) are defined below according to where the h3s appear  */
	font-family: 'HelveticaNeue-Bold', sans-serif;
	line-height: 1.125em;
	margin: 0 0 16px 0;
	padding: 0;
	color: #1d1d1f;	
	/*letter-spacing: 0.00625em;*/
	/* IMPORTANT TO SPECIFY FONT-WEIGHT: NORMAL
	TO AVOID STRANGE LETTER SPACING ON MY IPHONE */
	font-weight: normal;
}


h4 { /* On mobile all h4 look the same - They may be different on larger screens */
	font-family: 'HelveticaNeue-Light', sans-serif;
	color: #1d1d1f;
	font-size: 1.250em;
	/* IMPORTANT TO SPECIFY FONT-WEIGHT: NORMAL
	TO AVOID STRANGE LETTER SPACING ON MY IPHONE */
	font-weight: normal;
	line-height: 1.125em;
	margin: 0 0 14px 0;
	padding: 0;
}


a img {
	border: 0;
}


/* IF WE NEED TO WRAP THE WEBSITE AND GIVE A BG TO THE BODY... */

body {
	background: #F9F2D7;
}


/* The site wrapper defines the total maximum width of the website */
#site_wrapper {
	max-width: 1080px; /* Was 1200 */
	background: #f9f2d7;
	margin: 0 auto 0 auto;
}

.wrapped_contents {
	margin: 0;
	padding: 0;
	margin: 0 auto 0 auto;
	background: transparent;
}


/* GENERAL LAYOUT CLASSES */

.strong {
	font-weight: 700;
}

.italic {
	font-style: italic;
}

.notes {
	font-size: 1em;
	line-height: 1.250em;
}

.small_notes {
	font-size: 0.750em;
	line-height: 0.875em;
	text-align: right;
}


.right_aligned { /* Clear all the floats of the boxes for mobile layout */
	float: none;
}

.left_aligned { /* Clear all the floats of the boxes for mobile layout */
	float: none;
}

.centered {
	text-align: center;
}

/* We take advantage of the flex vertical alignment capabilities */
.v_align_center {
	/* We have to make this element a flex container in order to vertically center it's contents */
	display: flex;
	align-items: center;
}

.text_block {
	/* This is used to group and center few text elements vertically 
	No styles for now, but I put it here just in case */
}

.right_to_left {
  flex-direction: row-reverse;
}

.box_paragraph:last-child {
	margin: 0;
	padding: 0;
}

.form_ok_text {
	color: green;
}

.form_ko_text {
	color: red;
}

/* Cookie consent text message */
.cc_message {
	color: #fff;
}

#poper p {
	font-size: 16px !important;
	line-height: 1.5em !important;
	margin-bottom: 10px;
	color: #475156 !important;
}

#poper #btn .spopupbtnok {
	/* background-color: #0081b1 !important; */
}


/* GENERAL USE CONTENT BOXES */

/* Just in case we need to use floats or other width reduction */
.width_50_percent {
	width: 50%;
}



/* The content row - will we need one? */
.content_row {

}

.content_box {

}


/* Style the images inside the content boxes */

.content_box img {
	width: 100%;
	height: auto !important;
	display: block;
	filter: drop-shadow(4px 4px 4px #999);
}

.content_box_nopadding img {
	width: 100%;
	height: auto !important;
	display: block;	
}


/* The content row used for the main headlines - it has no bottom margin */

.content_row_headlines {
	margin: 0;
	padding: 0;
}


/* The content row used outside of wrapped contents - it's a full page row */
.content_row_cover {
	margin: 0 0 50px 0;
	padding: 0;
}

.content_row_cover .content_box {
	margin: 0 0 30px 0;
	padding: 0 4.4%;
}

.content_row_cover .content_box_nopadding {
	margin: 0 0 30px 0;
	padding: 0;
}


/* The content row with a full width content - text or image (fullwidth layout) */


.content_row_fullwidth {
	margin: 0 0 50px 0;
	padding: 0;
}

.content_row_fullwidth .content_box {
	margin: 0;
	padding: 0 4.4%;
}

.content_row_fullwidth .content_box img {
	margin: 0;
}



/* The content row with image and text one above the other (vertical layout) */

.content_row_vertical {
	margin: 0;
	padding: 0;
}

.content_row_vertical h3 {
	font-size: 1.8125em;
}

.content_row_vertical h4 {
	font-size: 1.250em;
}

.content_row_vertical .content_box {
	margin: 0 0 50px 0;
	padding: 0 4.4%;
}

.content_row_vertical .content_box img {
	margin: 0 0 30px 0;
}



/* The content row with image and text side by side (horizontal layout) */

.content_row_horizontal {
	margin: 0 0 50px 0;
	padding: 0;
}

.content_row_horizontal h3 {
	font-size: 1.8125em;
}

.content_row_horizontal h4 {
	font-size: 1.250em;
}

.content_row_horizontal .content_box {
	margin: 0 0 30px 0;
	padding: 0 4.4%;
}

.content_row_horizontal .content_box:last-child {
	margin: 0;
}

.content_row_horizontal .content_box img {
	margin: 0;
}



/* The different box widths */


/* 25% boxes (3 cols) */
.flex_25_percent {
	flex: 0 0 100%;
}

/* 33% boxes (4 cols) */
.flex_33_percent {
	flex: 0 0 100%;
}

/* 40% boxes (5 cols) */
.flex_40_percent {
	flex: 0 0 100%;
}

/* 50% boxes (6 cols) */
.flex_50_percent {
	flex: 0 0 100%;
}
	
/* 60% boxes (7 cols) */
.flex_60_percent {
	flex: 0 0 100%;
}

/* 66% boxes (8 cols) */
.flex_66_percent {
	flex: 0 0 100%;
}

/* 75% boxes (9 cols) */
.flex_75_percent {
	flex: 0 0 100%;
}

/* 100% boxes (12 cols) */
.flex_100_percent {
	flex: 0 0 100%;
}





/* ############ INTERNAL PAGES TEMPLATE ############ */


section#page_contents {
	/* Add some white space where the viewport sides are the left and right edges (mid size, 780px - 1200, screens) */
	padding: 4% 0 0 0;
}


/* The full width cover image */

#cover_image {
	width: 100%;
	height: auto !important;
	display: block;
}


#main_headlines {
	margin: 6% 4.4% 6% 4.4%;
}





/********** HEADER **********/


header#home_header {
	background: transparent;
	padding: 0;
}

header {
	background: #fff;
	position: relative;
	text-align: center;
	padding: 0;
	margin: 0;
}

div#header_inner_wrapper {
	background: transparent;
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}

#mobile_logo_header {
	margin: 30px auto 0 auto;
	height: auto !important;
	width: 50%; /* Was 34% */
	max-width: 300px; /* Was 160px */
}

#telephone_icon {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 43px;
}

#mail_icon {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 43px;
}

button#mobile_menu_icon {
	position: absolute;
	top: 30px;
	right: 30px;
	width: 36px;
}

button#mobile_menu_icon img {
	width: 35px;
}



/* Social icons header */

#social_icons_header {
	display: none; /* Hide header social icons on mobile devices */
}

#social_icons_header ul {
	padding: 0;
	margin: 0;
}

#social_icons_header ul li {
	list-style: none;
	display: inline;
	margin: 0 3px 0 0;
	padding: 0;
}

#social_icons_header ul li a:hover {
	opacity: .88;
}

#social_icons_header ul li img {
	width: 36px;
	height: auto;
}

#social_icons_header ul li:last-child {
	margin: 0;
}




/* hide desktop stuff (logo and navigation) */
#desktop_logo_header {
	display: none;
}


#desktop_nav {
	display: none;
}





/********** FOOTER **********/

footer {
	background: transparent;
	text-align: center;
	padding: 10px 0 10px 0;
	position: relative;
}

div#inner_footer {
	position: relative;
	margin: 0 auto 0 auto;
}

footer a:link, footer a:visited, footer a:hover {
	color: #49367A;
}

footer p#footer_contact_details {
	font-size: 0.750em;
	line-height: 1.250em;	
	color: #191819;
}




#mobile_logo_footer {
	margin: 0 0 20px 0;
	width: 22%;
	max-width: 110px;
}


nav#footer_nav ul {
	padding: 0px;
	margin: 20px 0 20px 0;
	font-size: 0.750em;
}

nav#footer_nav ul li {
	list-style: none;
	display: inline;
	margin: 10px;
	padding: 0px;
}

nav#footer_nav ul li a:link {
	text-decoration: none;
	color: #fff;
}

nav#footer_nav ul li a:visited {
	text-decoration: none;
	color: #fff;
}

nav#footer_nav ul li a:hover {
	text-decoration: none;
	color: #fff;
}


/* Social icons footer */

div#social_icons_footer {
	margin: 30px 0 20px 0;
	padding: 0;
}

#social_icons_footer ul {
	padding: 0px;
	margin: 0px;
}

#social_icons_footer ul li {
	list-style: none;
	display: inline;
	margin: 0 3px 0 0;
	padding: 0px;
}

#social_icons_footer ul li img {
	width: 36px;
	height: auto;
}

#social_icons_footer ul li:last-child {
	margin: 0;
}




/********** CONTACT FORM SECTION **********/


#contact_section {
	margin: 0;
	padding: 6% 4.4%;
	background: #e0f5fd;
	border-top: solid 1px #a4dff5;
	/*background: #00506E; blue bg*/
}

#contact_inner_wrapper {
	max-width: 1200px;
	margin: 0 auto 0 auto;
	padding: 0;
}

#contact_section h3 {
    font-size: 2.25em;
}

#contact_form label {
	font-family: 'HelveticaNeue', sans-serif;
	font-size: 1.5em;
	display: block;
	margin: 0 0 4px 2px;
}

#contact_form input#name {
	color: #4A4A4A;
	display: block;
	font-family: 'HelveticaNeue', sans-serif;
	font-size: 1.375em;
	width: 100%;
	margin: 0 0 4% 0;
	padding: 0.250em;
	border: solid 1px #ccc;
}

#contact_form input#email {
	color: #4A4A4A;
	display: block;
	font-family: 'HelveticaNeue', sans-serif;
	font-size: 1.500em;
	width: 100%;
	margin: 0 0 4% 0;
	padding: 0.250em;
	border: solid 1px #ccc;
}

#contact_form textarea {
	color: #4A4A4A;
	display: block;
	font-family: 'HelveticaNeue', sans-serif;
	font-size: 1.125em;
	width: 100%;
	margin: 0 0 6% 0;
	border: solid 1px #ccc;
}

#contact_form div.centered {
	/*	text-align: center; */
}

#contact_form div.g-recaptcha {
	display: inline-block;
	margin: 3% auto 6% auto;
}

#contact_form input#submit_button {
	display: block;
	/*margin: 0 auto;*/
	font-family: 'HelveticaNeue', sans-serif;
	font-size: 1.5em;
	background-color: #001922;
	color: white;
	width: 100%;
	max-width: 200px;
	padding: 12px 20px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
}





/***********************************************************************************************************

########     ###     ######   ########     ######  ########  ########  ######  #### ######## ####  ######  
##     ##   ## ##   ##    ##  ##          ##    ## ##     ## ##       ##    ##  ##  ##        ##  ##    ## 
##     ##  ##   ##  ##        ##          ##       ##     ## ##       ##        ##  ##        ##  ##       
########  ##     ## ##   #### ######       ######  ########  ######   ##        ##  ######    ##  ##       
##        ######### ##    ##  ##                ## ##        ##       ##        ##  ##        ##  ##       
##        ##     ## ##    ##  ##          ##    ## ##        ##       ##    ##  ##  ##        ##  ##    ## 
##        ##     ##  ######   ########     ######  ##        ########  ######  #### ##       ####  ######  

***********************************************************************************************************/






/* ############# HOME PAGE ############# */



/* Home page slogan */

section#home_slogan {
	position: relative;
	padding: 12% 0 22% 0;
	
	/* DARK CYAN
	background: url('../images/svg/home_page_wave_cyan_1200x200_waves_3h_nonresp.svg'), #00adee;
	*/

	background: url('../images/svg/home_page_wave_cyan_1200x200_waves_3h_nonresp_light.svg'), linear-gradient(180deg, #00adee 0%, #45ccff 58%);

	/* In rgba
	background: url('../images/svg/home_page_wave_cyan_1200x200_waves_3h_nonresp_light.svg'), linear-gradient(180deg, rgba(0,173,238,1) 0%, rgba(69,204,255,1) 58%);
	*/
	background-repeat: no-repeat;
	/* Position the image a little bit after the bottom edge of the container to avoid 1px gaps in some browsers */
	background-position: 100% 100.5%;
	background-size: 100% auto;
	
}


#home_slogan h1 {
	width: 86%;
	padding-left: 4%;
	max-width: 940px;
	margin: 0 auto 0 auto;
	font-family: 'HelveticaNeueLTStd-Blk';
	font-size: 10.6vw;
	line-height: 1em;
	/* IMPORTANT TO SPECIFY FONT-WEIGHT: NORMAL
	TO AVOID STRANGE LETTER SPACING (AT LEAST) ON (MY) IPHONE */
	font-weight: normal;
	color: #fff;
}




/* Home Page highlights area */

#highlights_intro {
	padding: 10% 0 10% 0;
}

p#company_intro {
	width: 76%;
	text-align: center;
	margin: 0 auto 0 auto;
	padding: 0;
	color: #1d1d1f;
	font-size: 1.375em;
	/*border-bottom: #eee 1px solid;*/
	
}


section#highlights {
padding: 0 0 4% 0;
}

/* #################################################################### */
.wrapped_highlights h2 {
	width: 70%;
	margin-left: auto;
	margin-right: auto; 
}


































/* ############# ARTICLE PAGE ############# */

.page_article {
	padding: 0 4.4%;
	margin: 0 0 50px 0;
}









/*

######## ######## ##     ## ########  
   ##    ##       ###   ### ##     ## 
   ##    ##       #### #### ##     ## 
   ##    ######   ## ### ## ########  
   ##    ##       ##     ## ##        
   ##    ##       ##     ## ##        
   ##    ######## ##     ## ##        

*/






 




/************************************************************************************************************

##     ## ######## ########  ####    ###        #######  ##     ## ######## ########  #### ########  ######  
###   ### ##       ##     ##  ##    ## ##      ##     ## ##     ## ##       ##     ##  ##  ##       ##    ## 
#### #### ##       ##     ##  ##   ##   ##     ##     ## ##     ## ##       ##     ##  ##  ##       ##       
## ### ## ######   ##     ##  ##  ##     ##    ##     ## ##     ## ######   ########   ##  ######    ######  
##     ## ##       ##     ##  ##  #########    ##  ## ## ##     ## ##       ##   ##    ##  ##             ## 
##     ## ##       ##     ##  ##  ##     ##    ##    ##  ##     ## ##       ##    ##   ##  ##       ##    ## 
##     ## ######## ########  #### ##     ##     ##### ##  #######  ######## ##     ## #### ########  ######  

*************************************************************************************************************/





/*

#######  ######## ######## 
##     ## ##    ## ##       
	   ##     ##   ##       
 #######     ##    #######  
	   ##   ##           ## 
##     ##   ##     ##    ## 
 #######    ##      ######  

*/



@media only screen 
	and (min-width: 375px) {
	
	
	/* This media query targets mobile phones in portrait view */


}



/*

########   #####      ##   
##        ##   ##   ####   
##       ##     ##    ##   
#######  ##     ##    ##   
      ## ##     ##    ##   
##    ##  ##   ##     ##   
 ######    #####    ######  
 
*/


@media only screen 
	and (min-width: 501px) {
	
	h1 {
	font-size: 3em;
	}

	#home_slogan h1 {
	font-size: 7vw;
	}


	p#company_intro{
	font-size: 1.5em;
	}

}



/*

########   #####      ##   
##    ##  ##   ##   ####   
	##   ##     ##    ##   
   ##    ##     ##    ##   
  ##     ##     ##    ##   
  ##      ##   ##     ##   
  ##       #####    ###### 

*/




@media only screen 
	and (min-width: 701px) {
	
	
	
}



/*

########  #######    #####   
##    ## ##     ##  ##   ##  
	##   ##     ## ##     ## 
   ##     #######  ##     ## 
  ##     ##     ## ##     ## 
  ##     ##     ##  ##   ##  
  ##      #######    #####   

*/



@media only screen 
	and (min-width: 780px) {
	
	/* Main page headings */
	
	h1 {
	font-size: 3.3125em;
	margin: 0 0 30px 0;
	}
	
	h2 {
	}
	
	h4 {
	font-size: 1.4375em;
	}
	

	/* Vertical layout content box headings */
	
	.content_row_vertical h3 {
	font-size: 1.5em;
	}

	.content_row_vertical h4 {
	font-size: 1.1875em;
	}
	

	/* Horizontal layout content box headings */

	.content_row_horizontal h3 {
	font-size: 2em;
	}
	
	.content_row_horizontal h4 {
	font-size: 1.250em;
	}
	
	
	
	/* Header layout changes */
	
	header {
	text-align: left;
	}
	
	/* ...first hide mobile stuff */
	#telephone_icon {
	display: none;
	}

	#mail_icon {
		display: none;
	}

	#mobile_menu_icon {
	display: none;
	}
	
	#mobile_logo_header {
	display: none;
	}
	
	/* Then make the desktop stuff appear */
	
	#desktop_nav {
	/* The bottom of the menu is always alligned to the bottom of the logo because the height 
	of the header depends on the height of the logo since the logo is the only element in the 
	header flow and the padding of the header corresponds to the bottom: property of the nav 
	(social icons and nav are absolutely positioned). That way we get the nice effect of social 
	icons and nav aligned, respectively, to the top and the bottom of the logo, even if the logo 
	has an liquid size, at least up to a certain max-width */
	
	display: block; /* Uncomment/comment the previous line to show/hide the desktop nav at 780px */
	position: absolute;
	right: 30px;
	bottom: 0;
	text-transform: uppercase;
	font-size: 1.0625em;
	}

	#desktop_nav ul {
	padding: 0px;
	margin: 0px;
	}

	#desktop_nav ul li {
	list-style: none;
	display: inline;
	margin: 0 30px 0 0;
	padding: 0px;
	}

	#desktop_nav ul li:last-child {
	margin-right: 0;
	}

	/* The desktop nav on the home page */
	
	#desktop_nav.home_nav ul li a:link {
	color: #fff !important;
	text-decoration: none;
	}

	#desktop_nav.home_nav ul li a:visited {
	color: #fff !important;
	text-decoration: none;
	}

	#desktop_nav.home_nav ul li a:hover {
	color: #fff !important;
	text-decoration: none;
	}
	
	/* The generic desktop nav */
	
	#desktop_nav ul li a:link {
	color: #1d1d1f;
	text-decoration: none;
	}

	#desktop_nav ul li a:visited {
	color: #1d1d1f;
	text-decoration: none;
	}

	#desktop_nav ul li a:hover {
	color: #1d1d1f;
	text-decoration: none;
	}
	
	#desktop_logo_header {
	display: inline-block;
	min-width: 440px; 
	max-width: 30%;
	margin: 30px 0 0 30px;
	}
	
	#social_icons_header {
	display: block;
	position: absolute;
	top: 30px;
	right: 30px;
	margin: 0;
	}
	
	
	/* Adjust home slogan text */
	
	section#home_slogan {
	padding: 8% 0 14% 0;
	}	
	
	#home_slogan h1 {
	font-size: 6.1vw;
	width: 76%;
	padding-left: 4%; /* Kind of temp */
	}
	
	#highlights_intro {
	padding: 8% 0 6% 0;
	}
	
	p#company_intro {
	width: 70%;
	font-size: 1.625em;
	padding: 0;
	}
	
	
	
	
	/* Adjust the internal pages contents section styles */
	
	
	#main_headlines {
	margin: 6% 2.083333% 6% 2.083333%;
	}

	


	/* Adjust the content boxes layout */
	
	/* The following classes work in conjunction with others */
	.right_aligned {
	float: right;
	}

	.left_aligned {
	float: left;
	}

	.super_padded {
	/* Using !important here because content boxes, for example, have padding set.
	Could achieve the same result of overriding it by putting this rule after those or using div.super_padded to  take advantage of specificity. 
	I want to keep the class definition here among the generic ones and don't want to use div because super padded may be applied to other elements in the future.
	!imporant seems to be the best way to go about it.
	*/
	padding: 0 4% !important;
	}

	
	
	.content_row {
	display: flex;
	margin: 0 2% 4% 2%;
	}

	.content_box {
	margin: 0;
	padding: 0 2.083333%;/* To make it equivalent to the padding of the external container which is narrower because of the 2+2% left and right padding */	
	}
	
	
	
	.content_row_cover {
	display: flex;
	margin: 0 0 4% 0;
	}
	
	.content_row_cover .content_box_nopadding {
	margin: 0;
	padding: 0;
	}


	.content_row_headlines {
	margin: 0 2% 0 2%;
	}


	.content_row_fullwidth {
	display: flex;
	margin: 0 2% 4% 2%;
	}

	.content_row_fullwidth .content_box {
	margin: 0;
	padding: 0 2.083333%;/* To make it equivalent to the padding of the external container which is narrower because of the 2+2% left and right padding */	
	}


	.content_row_vertical {
	display: flex;
	margin: 0 2% 4% 2%;
	}
	
	.content_row_vertical .content_box {
	margin: 0;
	padding: 0 2.083333%;/* To make it equivalent to the padding of the external container which is narrower because of the 2+2% left and right padding */
	}

	/************************/
	/* PERCHÈ LI HO FATTI DIVERSI?? MI SA CHE UNIFICO - NO, PER I MARGIN - EVENTUALI BORDER - SU MOBILE */
	/************************/
	
	.content_row_horizontal {
	display: flex;
	margin: 0 2% 4% 2%;
	}

	.content_row_horizontal .content_box {
	margin: 0;	
	padding: 0 2.083333%; /* To make it equivalent to the padding of the external container which is narrower because of the 2+2% left and right padding */
	}

	.content_row_horizontal .content_box img {
	margin: 0;
	}


	
	
	/* Adjust the widths of different content box types */
	
	/* NOTE: The columns value prevails on percentage in order to keep a grid
	otherwise, when too many sizes are used the design can become uneasy on the eye */
	
	/* 25% boxes (3 cols) */
	.flex_25_percent {
	flex: 0 0 25%;
	}

	/* 33% boxes (4 cols) */
	.flex_33_percent {
	flex: 0 0 33.333333%;
	}

	/* 40% boxes (5 cols) */
	.flex_40_percent {
	flex: 0 0 41.666667%;
	}

	/* 50% boxes (6 cols) */
	.flex_50_percent {
	flex: 0 0 50%;
	}
	
	/* 60% boxes (7 cols) */
	.flex_60_percent {
	flex: 0 0 58.333333%;
	}

	/* 66% boxes (8 cols) */
	.flex_66_percent {
	flex: 0 0 66.666667%;
	}

	/* 75% boxes (9 cols) */
	.flex_75_percent {
	flex: 0 0 75%;
	}

	/* 100% boxes (12 cols) */
	.flex_100_percent {
	flex: 0 0 100%;
	}

	

	/* Adjust the contact form section elements */

	#contact_section {
	display: flex;
	padding: 6% 0;
	}
	
	#contact_inner_wrapper {
	display: flex;
	padding: 0 2%;
	}
	
	
	
	/* Adjust the footer contents */
	
	footer {
	position: relative;
	min-height: 200px;
	padding: 0;
	}
	
	div#inner_footer {
	min-height: 200px;
	}
	
	footer p#footer_contact_details {
	margin: 0;
	padding: 0;
	text-align: center;
	}
	
	div#social_icons_footer {
	margin: 0;
	padding: 0;
	position: absolute;
	right: 30px;
	bottom: 76px;
	}


	#mobile_logo_footer {
	width: 16%;
	max-width: 130px;
	}


	nav#footer_nav {
	margin: 0;
	padding: 0;
	position: absolute;
	right: 22px;
	bottom: 30px;
	}
	
	nav#footer_nav ul {
	margin: 0;
	font-size: 0.8750em;
	}
	

	
}


/*

 #######  ##          #####   
##     ## ##    ##   ##   ##  
##     ## ##    ##  ##     ## 
 #######  ##    ##  ##     ## 
##     ## ######### ##     ## 
##     ##       ##   ##   ##  
 #######        ##    #####   

*/


@media only screen 
	and (min-width: 840px) {
	
	
	
}




/*

#######   #######     ##   
##     ## ##     ##  ####   
##     ## ##           ##   
 ######## ########     ##   
	   ## ##     ##    ##   
##     ## ##     ##    ##   
 #######   #######   ###### 

*/


	

@media only screen 
	and (min-width: 961px) {
	
	
	/* Main page headings */
	
	h1 {
	font-size: 4em;
	}

	h2 {
	
	}

	h4 {
	font-size: 1.500em;
	}

	
	/* Vertical layout content box headings */
	
	.content_row_vertical h3 {
	font-size: 1.9375em;
	}

	.content_row_vertical h4 {
	font-size: 1.250em;
	}

	
	/* Horizontal layout content box headings */

	.content_row_horizontal h3 {
	font-size: 2.5em;
	}

	.content_row_horizontal h4 {
	font-size: 1.375em;
	}



	p#company_intro {
	width: 60%;
	}


	/* Make the desktop menu font slightly larger */
	#desktop_nav {
	font-size: 1.0625em;
	}
	
	#desktop_nav ul li {
	margin: 0 30px 0 0;
	}

	

}




/*

   ##     #####    #######    #####   
 ####    ##   ##  ##     ##  ##   ##  
   ##   ##     ## ##     ## ##     ## 
   ##   ##     ##  #######  ##     ## 
   ##   ##     ## ##     ## ##     ## 
   ##    ##   ##  ##     ##  ##   ##  
 ######   #####    #######    #####   

*/




@media only screen 
	and (min-width: 1080px) {
	
	
	/* Main page headings */
	
	h1 {
	font-size: 4.750em;
	}

	h2 {
	}

	h4 {
	font-size: 1.625em;
	}
	

	/* Vertical layout boxes headings */
	
	.content_row_vertical h3 {
	font-size: 2.125em;
	}

	.content_row_vertical h4 {
	font-size: 1.375em;
	}


	/* Horizontal layout boxes headings */

	.content_row_horizontal h3 {
	font-size: 2.8125em;
	}

	.content_row_horizontal h4 {
	font-size: 1.5em;
	}


	
	/* Make the desktop menu font slightly larger */

	#desktop_nav {
	font-size: 1.1875em;
	}
	
	
	
	p#company_intro {
	font-size: 1.750em;
	max-width: 660px;
	}



	#contact_section h3 {
    font-size: 2.8125em;
	}
	

	#investec_banner_text p {
	font-size: 1.5em;
	}

	/* Should we ever have an article, make its text 2 columns */
	.page_article {
	padding: 0 4%;
	margin: 0 0 4% 0;
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 4%; /* Chrome, Safari, Opera */
    -moz-column-gap: 4%; /* Firefox */
    column-gap: 4%;
    }
	



}



/*

   ##      ##    #######   #######  
 ####    ####   ##     ## ##     ## 
   ##      ##   ##     ## ##     ## 
   ##      ##    ########  ######## 
   ##      ##          ##        ## 
   ##      ##   ##     ## ##     ## 
 ######  ######  #######   #######  

*/


@media only screen 
	and (min-width: 1199px) {

	
	/* Main page headings */

	h1 {
	font-size: 6em;
	}

	h2 {
	}

	h4 {
	font-size: 1.8125em;
	}

	
	

	section#home_slogan {
	padding: 7.6% 0 14% 0;
	}


	#home_slogan h1 {
	/* Stop the text growth. Switch back to EMs */
	font-size: 4.625em;
	width: 76%;
	}




}



/* THIS MediaQuery IS JUST FOR THE TOP MARGIN OF THE WRAPPER - PROBABLY IT WILL BE DROPPED ONCE AND FOR ALL */

@media only screen 
	and (min-width: 1280px) {
	
/* If we want to encapsulate the website and apply some space

	#site_wrapper {
	margin: 2.09% auto 0 auto;
	}	
*/
}


/* AND THIS JUST TO CAP THE FULL WIDTH MF BANNER HEADINGS FONT SIZE */

@media only screen and (min-width: 1440px) {



}