/* GENERAL */

html{
	background: #e9f5fc;
}

body {
	font-family: 'Roboto', sans-serif;
	margin: 0;
}

main {
	font-family: 'Roboto', sans-serif;
}

h1   {
	margin: 0px;
}

p {
	margin: 0px;
}

/* HEADER */

body> header {
	background: #102f58 ;
	padding: 0.8rem 1rem;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom-style: solid;
	border-bottom-color: #102f58 ;
}

body> header h1 {
	margin: 2.5% 0 0 0;
	color: white;
}

.header-rounded-bar {
	height: 1.5%;
	background: white;
	width: 55%;
	top: 0.6rem;
	left: 0;
	right: 0;
	margin: 0 20% 0 10%;
	position: fixed;
	border-radius: 1rem;
}

.english-language-link {
	top: 0.6rem;
	left: 66%;
	right: 0;
	position: fixed;
	color: white;
	text-decoration: none;
	z-index: -1;
}

.dutch-language-link {
	top: 2rem;
	left: 66%;
	right: 0;
	position: fixed;
	color: white;
	text-decoration: none;
	z-index: -1;
}

.flags {
	width: 22px;
	height: 12px;
	margin-left: 10px;
	z-index: -1;
}

.favorites_icon {
	padding: 0.3rem;
	border-radius: .7rem;
	color: white;
	font-size: .8rem;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.1rem;
	font-weight: 900;
	cursor: pointer;
	z-index: 2;
}

.star_icon {
	width: 40px;
	height: 40px;
	z-index: 2;
}

#favorites-number {
	position: fixed;
	top: .7rem;
	right: 1rem;
	z-index: 3;
	border-radius: 50%;
	border-style: solid;
	border-width: 2px;
	border-color: white;
	background: #102f58;
	font-size: 0.6rem;
	width: 1rem;
	height: 1rem;
	line-height: 1rem;
	text-align: center;
	text-indent: 1px;
	color: white;
}

#flying-star {
  position: fixed;
  z-index: 4;
  width: 40px;
  height: 40px;
}

/* NAVIGATION */

.measures {
	display: flex;
	justify-content: space-between;
	margin: 8rem auto 3rem auto;
	height: 4rem;
	max-width: 650px;
}

.measures button {
	border: 0;
	padding: 0;
	width: 4rem;
	filter: drop-shadow(4px 4px 6px #ccc);
	border-radius: 1rem;
}

.measures button:not(.active), .measures a:not(.active) {
	transform: scale(1.0);
	transition: transform .2s cubic-bezier(0.370, -0.305, 0.740, 1.205);
}

.measures button:not(.active):hover, .measures button:focus, .measures a:not(.active):hover, .measures a:focus {
	transform: scale(1.2);
	outline: none;
}

.measures img {
	cursor: pointer;
}

/* CARD GRID */

.grid {
	margin: auto 2rem auto 4rem;
	padding-bottom: 2rem;
}

/* CARD */

.card {
	width: 270px;
	height: 580px;
	float: left;
	margin: 0 1rem 1rem 0;
	filter: drop-shadow(4px 4px 6px #ccc);
	background: white;
	border-radius: 20px;
}

.card header {
	color: white;
}

.card-text-padding {
	padding: 2rem 10% 1rem 10%;
}

.card-banner {
	height: 22%;
	/* width: 120px; */
	margin: 0;
	border-radius: 20px 20px 0 0;
}

.darkened-bar {
	height: 3%;
	width: 100%;
	margin: 11% auto auto auto;
	position: fixed;
}

.rounded-bar {
	height: 1.5%;
	background: white;
	width: 70%;
	margin: 2.75% 20% auto 10%;
	position: fixed;
	/* float: center; */
	border-radius: 1rem;
}

.card-number {
	color: white;
	position: fixed;
	margin: 1% 20% auto 85%;
}

.card .button-box {
  position: absolute;
  bottom: 1.5rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  justify-content: space-between;
}

.button-box a{
  font-size: .8rem;
  display: inline-block;
  text-align: center;
  padding: 0.3rem;
  border-radius: .7rem;
  width: 47%;
  text-decoration: none;
}

/* MEASURE DESCRIPTION CARD */

.measure-description {
	width: 1000px;
	height: 80px;
	margin: 0 auto 2rem auto;
	border-radius: 1rem;
	filter: drop-shadow(4px 4px 6px #ccc);
	padding: 1rem;
	background: #102f58;
	color: white;
}

.measure-description.grey {
	color: white;
}

/* HIDDEN CLASS */ 

.hidden {
	display: none;
	line-height: 0;
}

/* COLORS */

.grey {
	background: #102f58 ;
	border-color: #f9ebdf ;
}

.purple {
	background: #4f2d7f;
	border-color: #3f2465;
}

.red {
	background: #c60c30;
	border-color: #ac0a2a;
}

.orange {
	background: #ec7a08;
	border-color: #d26d07;
}

.yellow {
	background: #fed100;
	border-color: #e4bc00;
}

.green {
	background: #34b235;
	border-color: #2d982d;
}

.blue {
	background: #0094b3;
	border-color: #007f9a;
}

.dark-purple {
	background: #3f2465;
}

.dark-red {
	background: #ac0a2a;
}

.dark-yellow {
	background: #e4bc00;
}

.dark-green {
	background: #2d982d;
}

.dark-blue {
	background: #007f9a;
}

.dark-orange {
	background: #d26d07;
}

.service-strategy .button-box a {
	color: #0094b3;
	border-style: solid;
	border-width: 1px;
}

.service-strategy .button-box a.call-to-action {
	color: white;
	background: #0094b3;
}

.information-data-strategy .button-box a {
	color: #34b235;
	border-style: solid;
	border-width: 1px;
}

.information-data-strategy .button-box a.call-to-action {
	color: white;
	background: #34b235;
}

.platform-application-strategy .button-box a {
	color: #fed100;
	border-style: solid;
	border-width: 1px;
}

.platform-application-strategy .button-box a.call-to-action {
	color: white;
	background: #fed100;
}

.infrastructure-strategy .button-box a {
	color: #ec7a08;
	border-style: solid;
	border-width: 1px;
}

.infrastructure-strategy .button-box a.call-to-action {
	color: white;
	background: #ec7a08;
}

.security-strategy .button-box a {
	color: #c60c30;
	border-style: solid;
	border-width: 1px;
}

.security-strategy .button-box a.call-to-action {
	color: white;
	background: #c60c30;
}


.operations-performance .button-box a {
	color: #4f2d7f;
	border-style: solid;
	border-width: 1px;
}

.operations-performance .button-box a.call-to-action {
	color: white;
	background: #4f2d7f;
}

/* Footer */

footer {
  background: #102f58;
  height: 80px;
  bottom: 0;
}