:root {
	--lightBlue: #12B5FC;
	--blue: #099EDF;
	--darkBlue: #184579; 
}

/* LAYOUT */

.container {
	margin: 0 auto;
}

.header-translations {
	margin-top: 120px;
}

.header-layout {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-gap: 32px;
}

.header-info {
	max-width: 400px;
}

.download-btn,
.download-btn .icon,
.download-btn i {
	transition: background-color .3s ease, border-color .3s ease;
} 

.download-btn {
	border-color: var(--lightBlue);
	background-color: var(--lightBlue);
	padding-left: 56px;
	overflow: hidden;
}

.download-btn i,
.download-btn .icon {
	background-color: rgba(0,0,0,.08);
	top: 0;
	left: 0;
	width: 42px;
	bottom: 0;
	line-height: 44px
}

.download-btn:hover {
	background-color: var(--blue);
	border-color: var(--blue);
}

.download-btn .icon svg {
	width: 16px;
}

.languages-layout {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	grid-gap: 16px;
}

.panel {
	margin-bottom: 0;
}

.search-input {
	color: #c4c7cc;
}

@media (min-width: 992px) {
	.search-input {
		width: 300px;
	}
}

.search-input .icon {
	width: 18px;
	z-index: 123;
	top: 10px;
	left: 12px;
}

.search-input .form-control {
	padding-left: 40px;
}


/* HELPERS */

.img {
	max-width: 100%;
}

.mt-1 {
	margin-top: 8px;
}

.mt-2 {
	margin-top: 16px;
}

.mt-3 {
	margin-top: 24px;
}

.mt-4 {
	margin-top: 32px;
}

.mt-5 {
	margin-top: 40px;
}

.mt-6 {
	margin-top: 48px
}

.mb-1 {
	margin-bottom: 8px;
}

.mb-2 {
	margin-bottom: 16px;
}

.mb-3 {
	margin-bottom: 24px;
}

.mb-4 {
	margin-bottom: 32px;
}

.mb-5 {
	margin-bottom: 40px;
}

.mb-6 {
	margin-bottom: 48px
}

.d-grid {
	display: grid;
}

.d-flex {
	display: flex;
}

.wrap {
	flex-wrap: wrap;
}

.flex-1 {
	flex: 1 1 400px;
}

.d-block {
	display: block;
}

.d-inline-block {
	display: inline-block;
}

.ai-center {
	align-items: center;
}

.jc-space-between {
	justify-content: space-between;
}

.jc-center {
	justify-content: center;
}

.c-darkblue {
	color: var(--darkBlue);
}

.p-relative {
	position: relative;
}

.p-absolute {
	position: absolute;
}

.bold {
	font-weight: bold;
}