@import "../vendor/normalize/normalize.css";
@import "../vendor/flexboxgrid/flexboxgrid.css";
@import "grid.css";
@import "typography.css";
@import "form.css";
@import "slider.css";
@import "header.css";
@import "footer.css";
@import "pikaday-theme.css";
/* @import "cookie-consent.css"; */


:root {
  --color-petrol: #006567;
  --color-lemon:  #B0D400;
}

html {
	scroll-behavior: smooth;
}

body { 
	margin: 0; 
	padding: 0; 
	width: 100vw;
	overflow-x: hidden;
}

.anchor--pagestart {	
	position: relative;
	display: block;
	width: 0;
	height: 0;
	font-size: 0;
	background-color: transparent;
	margin-top: 60px;	
}
.anchor--hidden {
	position: relative;
	display: block;
	width: 0;
	height: 0;
	font-size: 0;
	background-color: transparent;
}

.ruler {
	background: url(../assets/rulers/ruler-default.png) no-repeat;
	background-size: cover;
	background-position: 100% 0;
	height: 330px;
    display: flex;
}

.ruler h2 {
	color: white;
}

.box {
	position: relative;
	display: flex; 
	flex-direction: column; 
	justify-content: space-between;
	height: 100%; 

	padding: 0 20px;
	background-color: white;
  	border: 1px solid #E5E5E5;
  	border-radius: 4px;
}

img.box__addon {
	position: absolute; 
	left:   -70px; 
	bottom: 275px; 
	width:  140px;
}

.--border {
	padding: 0 20px;
	background-color: #white;
  	border: 1px solid #E5E5E5;
  	border-radius: 4px;
}

img.--desktop, button.--desktop, .--desktop {
	display: block;
}

img.--mobile, button.--mobile, .--mobile {
	display: none;
}


/* LG */
@media only screen and (min-width: 75em) {
}

/* MD */
@media only screen and (min-width: 64em) {
}

/* SM */
@media only screen and (min-width: 48em) {
}   

/* XS */
@media only screen and (max-width: 48em) {
	.box {
		margin-bottom: 20px;
	}
	img.box__addon {
		position: absolute;
		left: unset;
		bottom: unset;
	    right: -16px;
	    top: -38px;
	    width: 128px;
	}	
	img.--desktop, button.--desktop, .--desktop {
		display: none;
	}	
	img.--mobile, button.--mobile, .--mobile {
		display: block;
	}
}