/*
  Defaults and branding
  ---------------------

  The default colour for BlueMagnet is blue. We selected blue because it is
  the colour of "trust". As stated based on a simple Google search:

    "Blue is known for its trust and dependability. It is reliable,
    responsible, and mentally soothing."

  These CSS variables are to be used instead of hardcoding the hex
  values all over the CSS file.
*/
:root {
	--primary-brand-color: #0a54eb;
	--secondary-brand-color: #00aeef;
	--black: #313131;
	--dark-grey: #4c4c4c;
	--light-grey: #828282;
}

.is-brand {
	color: var(--primary-brand-color) !important;
}

.has-background-brand {
	background: var(--primary-brand-color) !important;
}

.content pre {
	margin-bottom: 1em;
	border-radius: 5px;
}

/*
    Buttons
    -------
  */

.is-blue,
.is-blue:hover,
.is-blue:focus,
.is-blue:active {
	background: var(--primary-brand-color);
	color: #fff;
}

.is-blue ion-icon {
	color: #fff;
	margin-left: 5px;
}

.is-blue[disabled] {
	background: var(--primary-brand-color);
	box-shadow: none;
	opacity: 0.5;
}

.is-inverted {
	background: #fff;
	color: var(--primary-brand-color);
}

.is-inverted:hover {
	background: #fff;
	color: var(--primary-brand-color);
}

.is-inverted ion-icon {
	color: var(--primary-brand-color);
	margin-left: 5px;
}

.button-magnet {
	height: 1em;
	margin-left: 5px !important;
}

.grecaptcha-badge {
	visibility: hidden;
}

.featured {
	margin-top: 5rem;
}

.featured img {
	max-height: 30px;
}

.featured .block {
	width: 25px;
}

.people img {
	filter: grayscale(100%);
}

.people img:hover {
	filter: grayscale(0);
}

.people figure {
	padding-bottom: 12em !important;
}

.list-item-controls img {
	height: 1em;
}

.footer .twitter {
	height: 1em;
}

/*
    Navbar
    ------
  */
.navbar,
.navbar > .container,
.navbar-brand,
.navbar-tabs,
.navbar-burger {
	min-height: 6rem;
}

.navbar-item {
	color: #000;
}

.navbar-item:hover {
	color: var(--primary-brand-color);
}

.inverted-navbar {
	border-bottom: 1px solid #eee;
}
/* 
  .inverted-navbar .navbar-item,
  .inverted-navbar .navbar-item:hover {
    color: #000;
  } */

/*
    Hero
    ----
  
    The hero is only for the index page and can change depending on
    campaigns we are doing.
  */
.hero {
	position: relative;
	overflow: hidden;
	/* background: var(--primary-brand-color); */
}

.hero-body {
	background: white;
	background-image: radial-gradient(rgb(203, 203, 203) 1px, transparent 0);
	background-size: 40px 40px;
	background-position: -19px -19px;
}

@media screen and (min-width: 1280px) {
	.hero.is-small .hero-body {
		padding: 5.5rem;
	}
}

.logo {
	max-height: 70px;
}

.hero-foot img {
	display: block;
	margin: 0 auto;
}

.brands {
	margin-top: 20px;
}

.brands img {
	display: block;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 0;
	max-height: 30px;
}

.hero-body p .title .is-size-1 {
	font-size: 5rem !important;
}

.example img {
	padding: 7px;
	max-height: 40px;
}

.features .columns:not(:last-child) {
	margin-bottom: 5rem;
}

@media screen and (min-width: 800px) {
	.features img {
		display: block;
		margin: 0 auto;
	}
}

.is-faded-half {
	opacity: 0.5;
}

.is-faded-full {
	opacity: 0.2;
}

.waiting {
	display: inline-block;
	margin-left: 15px;
	max-height: 55px;
	opacity: 0.8;
}

/*
    Footer
    ------
  */
.footer {
	padding: 2rem 1.5rem 6rem;
}

footer .content ul,
footer .content li {
	list-style-type: none;
	list-style-position: inside;
	margin-left: 0;
}

footer a {
	color: var(--primary-brand-color);
}

footer span {
	padding: 5px;
	border-radius: 3px;
}

.sheets figure {
    margin-left: 0;
}

.signature {
	height: 27px;
	margin-top: 13px;
}