/*

	Media Query mixin

	See https://github.com/sass-mq/sass-mq/ for original full version.

	@example scss
	 .element {
	   @include mq($from: mobile) {
		 color: red;
	   }

	   @include mq($to: tablet) {
		 color: blue;
	   }

	   @include mq(mobile, tablet) {
		 color: green;
	   }

	   @include mq($from: tablet, $and: '(orientation: landscape)') {
		 color: teal;
	   }

	   @include mq(em(950px)) {
		 color: hotpink;
	   }

	   @include mq(em(950px), $media-feature: height) {
		 color: hotpink;
	   }

	   @include mq(tablet, $media-type: screen) {
		 color: hotpink;
	   }

	   // Advanced use:
	   $custom-breakpoints: (L: 900px, XL: 1200px);
	   @include mq(L, $bp: $custom-breakpoints) {
		 color: hotpink;
	   }
	 }

*/
/*

	Margin / Padding Quick Resets

	example: top & bottom margin set to $spacing-unit
	.element {
		@include push--ends;
	}

	example: left & right padding set to $spacing-unit--small
	.element {
		@include soft--sides($spacing-unit--small);
	}

*/
/*

	Helper mixins

*/
/*

	Form input placeholder text

	example:

	input,
	textarea {
		@include input-placeholder {
			color: $grey;
		}
	}

*/
/*

	Retina images

	example:

	.element {
		@include retina {
			background-image: url(../img/background@2x.png);
		}
	}

*/
/*

	Content margins

	fore removing first/last child margins

	example: default
	.element {
		@include content-margins;
	}

	output:
	.element > *:first-child {
		margin-top: 0;
	}
	.element > *:last-child {
		margin-bottom: 0;
	}

	example: empty selector
	.element {
		@include content-margins('false');
	}

	output:
	.element:first-child {
		margin-top: 0;
	}
	.element:last-child {
		margin-bottom: 0;
	}

*/
/*

	CSS Triangle

	used for creating CSS only triangles

	example:
	.element {

		&::before {
			@include css-triangle(blue, down);
		}
	}

*/
/*

	Hide text

	example:

	.element {
		@include hide-text;
	}

*/
/*

	Responsive ratio

	Used for creating scalable elements that maintain the same ratio

	example:
	.element {
		@include responsive-ratio(400, 300);
	}

*/
/*

	Icon

	For using fontastic icons in pseudo elements

*/
/*

	Colours

	background, colour, etc. match up with colour map in _variables.scss

	modify to suit per project

*/
/*

	Fluid Property

	http://www.adrenalinmedia.com.au/the-agency/insights/this-changes-everything-css-fluid-properties.aspx

	HTML:

	<h1 class="element">
		<span>Text to replace</span>
	</h1>

	example:
	h1 {
		@include fp(font-size, 50, 100); // 50px at 320, 100px at 1920;
	}

	output:
	h1 {
		font-size: calc(3.125vw + 40px); //This is the magic!
	}

	@media (max-width:320px){ //Clips the start to the min value
		font-size:50px;
	}

	@media (min-width:1920px){ //Clips the end to the max value
		font-size:100px;
	}


*/
/*

	Misc

*/
/*

	Font face

	example:

	@include font-face('Clarendon', 'clarendon-webfont');
	@include font-face('Clarendon', 'clarendon-webfont', $w--bold, italic);

*/
/*

	REMs

*/
/*

	EMs calculator

*/
/*

	Grids

*/
/*

	Photoshop letter spacing

	use:

		for simple conversion between Photoshop letter-spacing to ems

	prerequisits:

		$ls list must exist in variables file

	example:

		.awesome-heading {
			letter-spacing: ls('awesome-heading');
		}

		could generate (if "awesome-heading") is 2nd in the list:

		.awesome-heading {
			letter-spacing: -0.01em;
		}

*/
/*

	Map deep get

	Get values from anywhere in a variable list

	http://css-tricks.com/snippets/sass/deep-getset-maps/

*/
/*

	Strip unit

*/
/*

	Very simple number functions

*/
/*

	Photoshop letter spacing

	use:

		get the value of a particular breakpoint

	example:

		.box {
			width: breakpoint('phone-wide');
		}

		would generate:

		.box {
			width: 480px;
		}

*/
/*

	Colour map lookup, retrieving base value by default

*/
/*

	SVG inliner

*/
@font-face {
  font-family: "MetricRegular";
  src: url("../fonts/metric-r/MetricRegular.eot");
  src: url("../fonts/metric-r/MetricRegular.eot") format("embedded-opentype"),
    url("../fonts/metric-r/MetricRegular.woff2") format("woff2"),
    url("../fonts/metric-r/MetricRegular.woff") format("woff"),
    url("../fonts/metric-r/MetricRegular.ttf") format("truetype"),
    url("../fonts/metric-r/MetricRegular.svg#MetricRegular") format("svg");
}

@font-face {
  font-family: "MetricMedium";
  src: url("../fonts/metric-m/MetricMedium.eot");
  src: url("../fonts/metric-m/MetricMedium.eot") format("embedded-opentype"),
    url("../fonts/metric-m/MetricMedium.woff2") format("woff2"),
    url("../fonts/metric-m/MetricMedium.woff") format("woff"),
    url("../fonts/metric-m/MetricMedium.ttf") format("truetype"),
    url("../fonts/metric-m/MetricMedium.svg#MetricMedium") format("svg");
}

.col-gap-32 {
  margin-left: -16px;
  margin-right: -16px;
}

.col-gap-32 > div {
  padding-left: 16px;
  padding-right: 16px;
}

/*

	Media Query mixin

	See https://github.com/sass-mq/sass-mq/ for original full version.

	@example scss
	 .element {
	   @include mq($from: mobile) {
		 color: red;
	   }

	   @include mq($to: tablet) {
		 color: blue;
	   }

	   @include mq(mobile, tablet) {
		 color: green;
	   }

	   @include mq($from: tablet, $and: '(orientation: landscape)') {
		 color: teal;
	   }

	   @include mq(em(950px)) {
		 color: hotpink;
	   }

	   @include mq(em(950px), $media-feature: height) {
		 color: hotpink;
	   }

	   @include mq(tablet, $media-type: screen) {
		 color: hotpink;
	   }

	   // Advanced use:
	   $custom-breakpoints: (L: 900px, XL: 1200px);
	   @include mq(L, $bp: $custom-breakpoints) {
		 color: hotpink;
	   }
	 }

*/
/*

	Margin / Padding Quick Resets

	example: top & bottom margin set to $spacing-unit
	.element {
		@include push--ends;
	}

	example: left & right padding set to $spacing-unit--small
	.element {
		@include soft--sides($spacing-unit--small);
	}

*/
/*

	Helper mixins

*/
/*

	Form input placeholder text

	example:

	input,
	textarea {
		@include input-placeholder {
			color: $grey;
		}
	}

*/
/*

	Retina images

	example:

	.element {
		@include retina {
			background-image: url(../img/background@2x.png);
		}
	}

*/
/*

	Content margins

	fore removing first/last child margins

	example: default
	.element {
		@include content-margins;
	}

	output:
	.element > *:first-child {
		margin-top: 0;
	}
	.element > *:last-child {
		margin-bottom: 0;
	}

	example: empty selector
	.element {
		@include content-margins('false');
	}

	output:
	.element:first-child {
		margin-top: 0;
	}
	.element:last-child {
		margin-bottom: 0;
	}

*/
/*

	CSS Triangle

	used for creating CSS only triangles

	example:
	.element {

		&::before {
			@include css-triangle(blue, down);
		}
	}

*/
/*

	Hide text

	example:

	.element {
		@include hide-text;
	}

*/
/*

	Responsive ratio

	Used for creating scalable elements that maintain the same ratio

	example:
	.element {
		@include responsive-ratio(400, 300);
	}

*/
/*

	Icon

	For using fontastic icons in pseudo elements

*/
/*

	Colours

	background, colour, etc. match up with colour map in _variables.scss

	modify to suit per project

*/
/*

	Fluid Property

	http://www.adrenalinmedia.com.au/the-agency/insights/this-changes-everything-css-fluid-properties.aspx

	HTML:

	<h1 class="element">
		<span>Text to replace</span>
	</h1>

	example:
	h1 {
		@include fp(font-size, 50, 100); // 50px at 320, 100px at 1920;
	}

	output:
	h1 {
		font-size: calc(3.125vw + 40px); //This is the magic!
	}

	@media (max-width:320px){ //Clips the start to the min value
		font-size:50px;
	}

	@media (min-width:1920px){ //Clips the end to the max value
		font-size:100px;
	}


*/
/*

	Misc

*/
/*

	Font face

	example:

	@include font-face('Clarendon', 'clarendon-webfont');
	@include font-face('Clarendon', 'clarendon-webfont', $w--bold, italic);

*/
/*

	REMs

*/
/*

	EMs calculator

*/
/*

	Grids

*/
/*

	Photoshop letter spacing

	use:

		for simple conversion between Photoshop letter-spacing to ems

	prerequisits:

		$ls list must exist in variables file

	example:

		.awesome-heading {
			letter-spacing: ls('awesome-heading');
		}

		could generate (if "awesome-heading") is 2nd in the list:

		.awesome-heading {
			letter-spacing: -0.01em;
		}

*/
/*

	Map deep get

	Get values from anywhere in a variable list

	http://css-tricks.com/snippets/sass/deep-getset-maps/

*/
/*

	Strip unit

*/
/*

	Very simple number functions

*/
/*

	Photoshop letter spacing

	use:

		get the value of a particular breakpoint

	example:

		.box {
			width: breakpoint('phone-wide');
		}

		would generate:

		.box {
			width: 480px;
		}

*/
/*

	Colour map lookup, retrieving base value by default

*/
/*

	SVG inliner

*/
html {
  font-size: 100%;
}

body {
  font-size: 1rem;
  font-family: "MetricRegular";
  line-height: 1;
  margin: 0;
  background: #f7dade;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: #252525;
  transition: 0.5s ease all;
}
a:hover,
a:focus {
  color: #f7dade;
  text-decoration: none !important;
  outline: none !important;
}

/*---

Clickable buttons:

```
<div class="button-wrapper">
	<button class="button">Button</button>
</div>

<div class="button-wrapper">
	<a href="#0" class="button">Button (link)</a>
</div>
```

Alternate styles using `secondary`, `positive` and `negative` modifiers:

```
<div class="button-wrapper">
	<button class="button button--secondary">Button: Secondary</button>
</div>

<div class="button-wrapper">
	<button class="button button--positive">Button: Positive</button>
</div>

<div class="button-wrapper">
	<button class="button button--negative">Button: Negative</button>
</div>
```

And sized using `large` and `small`:

```
<div class="button-wrapper">
	<button class="button button--large">Button: Large</button>
</div>

<div class="button-wrapper">
	<button class="button button--small">Button: Small</button>
</div>
```

Other states:

```
<div class="button-wrapper">
	<button class="button" disabled>Button: Disabled</button>
</div>

<div class="button-wrapper">
	<button>Unstyled button</button>
</div>
```

*/
.bootstrap-select
  > select.mobile-device:focus
  + .dropdown-toggle
  .dropdown-toggle:focus,
.bootstrap-select
  > select.mobile-device:focus
  .bootstrap-select
  .dropdown-toggle:focus {
  border-color: #009cde !important;
}

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  width: 100%;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
  color: #fff;
  font-size: 0.875rem;
}

.bootstrap-select > select.mobile-device:focus + .dropdown-toggle,
.bootstrap-select
  > select.mobile-device:focus
  .bootstrap-select
  .dropdown-toggle:focus {
  outline: none !important;
}

.bootstrap-select .dropdown-menu li a.active,
.bootstrap-select a:active {
  background-color: #dbe8fe;
}

.bootstrap-select.bs-container .dropdown-menu {
  border-radius: 0;
  margin-top: 2px;
}

.bootstrap-select .dropdown-menu li a span.text {
  color: #383843;
  font-size: 1rem;
}

.btn-light:focus {
  box-shadow: none;
}

.btn.disabled,
.btn:disabled {
  opacity: 0.4;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
  background-color: #3daae2 !important;
  border-color: #3daae2 !important;
}
.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: none !important;
}

.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active,
.show > .btn-light.dropdown-toggle {
  background: #fff !important;
  border: 0 !important;
  outline: none !important;
}

.btn-light:not(:disabled):not(.disabled).active:focus,
.btn-light:not(:disabled):not(.disabled):active:focus,
.show > .btn-light.dropdown-toggle:focus {
  box-shadow: none !important;
  border: 1px solid #009cde !important;
}

.button-row {
  text-align: center;
  margin: 2.5rem auto 2.5rem auto;
}
@media screen and (max-width: 414px) {
  .button-row {
    margin: 1.25rem 0;
  }
}

.btn {
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 0;
  outline: none;
  line-height: 1;
  border-radius: 50px;
  transition: all 0.5s ease;
  font-size: 1.125rem;
}
.btn:focus {
  outline: none;
  box-shadow: none;
}
.btn.btn-default {
  background-color: #005e86;
  color: #fff;
  padding: 0.9375rem 1.8125rem;
  font-size: 0.9375rem;
  text-transform: none;
  letter-spacing: 1px;
}
.btn.btn-default:hover {
  opacity: 0.8;
}
.btn.btn-primary {
  padding: 0.875rem 2.8125rem;
  color: #fff;
  background: #3daae2;
  font-size: 1rem;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 1px;
}
.btn.btn-primary:not(:disabled):hover {
  opacity: 0.8;
}
.btn.btn-file {
  opacity: 1;
  font-weight: 500;
  letter-spacing: 0;
  cursor: pointer;
  position: relative;
  background: #009cde;
  padding: 0.875rem 1.5rem;
}
.btn.btn-secondary {
  padding: 1rem 3.25rem;
  color: #fff;
  background: #7ba30c;
  font-size: 1rem;
  font-weight: 500;
  width: 245px;
  position: absolute;
  bottom: -22px;
}
.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary.active,
.btn.btn-secondary:active {
  opacity: 0.8;
  background: #7ba30c !important;
  border: 0 !important;
  box-shadow: none;
}
.btn.btn-white {
  padding: 0.6875rem 1.75rem;
  color: #152432;
  font-size: 1rem;
  background: #fff;
  font-weight: 400;
  letter-spacing: 1px;
}
.btn.btn-white:hover {
  color: #0083ba;
}

.form-group .bootstrap-select > .dropdown-toggle {
  position: relative;
  height: 48px;
  font-size: 0.9375rem;
  color: #5d5d5d;
  background-color: #fff;
  outline: none !important;
  border-radius: 50px;
  border: solid 1px #d2d2d2;
  padding: 0px;
  padding-left: 1.6875rem;
  padding-right: 1.25rem;
}
.form-group .bootstrap-select > .dropdown-toggle .filter-option-inner-inner {
  color: #005e86;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}
.form-group .bootstrap-select > .dropdown-toggle:after {
  border: 0;
  background: url(../images/icons.png) -74px 0px no-repeat;
  width: 15px;
  height: 10px;
  position: absolute;
  right: 15px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  margin-top: 0px;
}

.radio {
  margin: 0;
  padding: 0;
  padding-bottom: 0.9375rem;
}
.radio label {
  padding-left: 25px;
  margin: 0;
  cursor: pointer;
}
.radio label:not(:last-child) {
  margin-right: 4.0625rem;
}
.radio input[type="radio"] {
  display: none;
}
.radio input[type="radio"] + span {
  display: inline-block;
  line-height: normal;
  position: relative;
  font-size: 0.875rem;
  color: #005e86;
  padding-left: 8px;
}
.radio input[type="radio"] + span img {
  vertical-align: text-top;
  margin-left: 0.1875rem;
}
.radio input[type="radio"] + span:after {
  content: "";
  width: 16px;
  height: 16px;
  background: #fff;
  border: 1px solid #878787;
  border-radius: 50px;
  position: absolute;
  top: 50%;
  left: -25px;
  transform: translateY(-50%);
}
.radio input[type="radio"]:checked + span:before {
  content: "";
  position: absolute;
  line-height: 1;
  background: #005e86;
  width: 8px;
  height: 8px;
  top: 7px;
  left: -21px;
  z-index: 1;
  border-radius: 50px;
}
.radio input[type="radio"]:checked + span:after {
  border-color: #005e86;
}

.checkbox {
  margin: 0;
  padding: 0;
  padding-bottom: 0.9375rem;
}
.checkbox label {
  padding-left: 25px;
  margin: 0;
  cursor: pointer;
}
.checkbox label:not(:last-child) {
  margin-right: 3.125rem;
}
.checkbox input[type="checkbox"] {
  display: none;
}
.checkbox input[type="checkbox"] + span {
  display: inline-block;
  line-height: normal;
  position: relative;
  font-size: 1rem;
  color: #606161;
  padding-left: 0px;
}
.checkbox input[type="checkbox"] + span img {
  vertical-align: text-top;
  margin-left: 0.1875rem;
}
.checkbox input[type="checkbox"] + span:after {
  content: "";
  width: 12px;
  height: 12px;
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 0;
  position: absolute;
  top: 2px;
  left: -25px;
}
.checkbox input[type="checkbox"]:checked + span:after {
  background: url(../images/icons.png) 0px -498px no-repeat #009cde;
  border-color: #009cde;
  border-radius: 2px;
}

.dropdown-toggle::after {
  color: #009cde;
}

.dropdown .dropdown-menu {
  border: 0;
  border-radius: 0;
  box-shadow: 0px 11px 13px -3px #cad0d7;
  margin-top: 0px;
  padding: 0;
}
.dropdown .dropdown-menu .dropdown-item:focus,
.dropdown .dropdown-menu .dropdown-item:hover {
  background: #f7dade;
  color: #af1f66;
}
.dropdown .dropdown-menu .dropdown-item:focus span.text,
.dropdown .dropdown-menu .dropdown-item:hover span.text {
  color: #af1f66;
}
.dropdown .dropdown-menu .dropdown-item {
  padding: 0.7rem 0.625rem;
  padding-left: 1.5625rem;
}
.dropdown .dropdown-menu .dropdown-item:not(:last-child) {
  border-bottom: 1px solid #f2f2f2;
}

.btn-file input[type="file"] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  cursor: pointer;
  display: block;
}

.bootstrap-select > select.mobile-device:focus + .dropdown-toggle,
.bootstrap-select .bootstrap-select .dropdown-toggle:focus {
  outline: none !important;
}

/*

	Basic, low level typography

*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: 400;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-top: 1em;
  line-height: 1;
}
.h1:first-child,
.h2:first-child,
.h3:first-child,
.h4:first-child,
.h5:first-child,
.h6:first-child {
  margin-top: 0;
}

h1 {
  font-size: 1.875rem;
}
@media screen and (min-width: ) {
  h1 {
    font-size: 2.25rem;
  }
}
@media screen and (min-width: ) {
  h1 {
    font-size: 2.625rem;
  }
}

h2 {
  font-size: 1.625rem;
}
@media screen and (min-width: ) {
  h2 {
    font-size: 1.875rem;
  }
}
@media screen and (min-width: ) {
  h2 {
    font-size: 2.25rem;
  }
}

h3 {
  font-size: 1.375rem;
}
@media screen and (min-width: ) {
  h3 {
    font-size: 1.625rem;
  }
}
@media screen and (min-width: ) {
  h3 {
    font-size: 1.875rem;
  }
}

h3 {
  color: #af1f66;
  font-size: 1.3125rem;
  font-family: "MetricMedium";
  margin: 0 0 1.5625rem 1.5625rem;
  letter-spacing: 1px;
}

h4 {
  color: #af1f66;
  font-size: 1.0625rem;
  font-family: "MetricMedium";
  letter-spacing: 1px;
  padding-top: 45px;
  margin: 0 0 0.75rem 0;
  position: relative;
}

h5 {
  font-size: 1.1875rem;
  color: #5e3c30;
  font-family: "MetricMedium";
  margin-bottom: 0.9375rem;
}

h6 {
  font-size: 0.9375rem;
  margin-bottom: 1.875rem;
  color: #005e86;
  line-height: 1.5;
}

p {
  font-size: 1.0625rem;
  color: #383843;
  margin-bottom: 8px !important;
  line-height: 1;
}

p,
ul,
ol,
.blockquote,
.button-wrapper,
.media,
.table-wrapper {
  margin-bottom: 1em;
}
p:last-child,
ul:last-child,
ol:last-child,
.blockquote:last-child,
.button-wrapper:last-child,
.media:last-child,
.table-wrapper:last-child {
  margin-bottom: 0;
}

ol,
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

b,
strong {
  font-weight: 700;
}

small {
  font-size: 80%;
}

@keyframes spinAround {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media screen and (min-width: 1200px) {
  .container {
    max-width: 1230px;
  }
}

/*---

Self-contained content, with support for a caption:

```
<div style="max-width: 35em">
	<figure>
		<div class="placeholder">
			<img src="//placehold.it/1600x900" alt="Always specify alt text">
		</div>

		<figcaption>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, facilis, sed non dolore excepturi beatae veritatis corporis cumque tempora quo harum voluptatem et, suscipit similique nisi necessitatibus perferendis dolores consectetur.</figcaption>
	</figure>
</div>
```

*/
figure img {
  margin-left: auto;
  margin-right: auto;
}

figcaption {
  margin: 0.5em auto 0;
  max-width: 30em;
  font-style: italic;
  text-align: center;
}

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

input,
select,
textarea {
  appearance: none;
  background-clip: border-box;
  margin: 0;
  outline: 0;
  text-align: left;
  vertical-align: top;
  width: 100%;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  height: auto;
}

input[type="checkbox"] {
  appearance: checkbox;
}

input[type="radio"] {
  appearance: radio;
}

textarea,
select[size],
select[multiple] {
  height: auto;
}

form {
  margin-bottom: 0;
}

.form-group {
  margin-bottom: 2.8125rem;
  position: relative;
}

.control-label {
  color: #a1a1a1;
  font-size: 0.875rem;
  display: inline-block;
  position: absolute;
  z-index: 1;
  top: -8px;
  left: 40px;
  background: #fff;
  padding: 0 10px;
  margin: 0;
}
.control-label span {
  color: #78a4d6;
  font-size: 0.875rem;
}
@media screen and (max-width: 991px) {
  .control-label {
    top: -7px;
  }
}

.form-control {
  position: relative;
  height: 48px;
  font-size: 0.9375rem;
  color: #3a3b3b;
  background-color: white;
  outline: none;
  padding: 0px;
  padding-left: 1.6875rem;
  padding-right: 1.25rem;
  outline: none;
  border-radius: 50px;
  border: solid 1px #d2d2d2;
  -webkit-appearance: none;
}
.form-control.active {
  outline: none;
  box-shadow: none;
  border-radius: 0;
}
.form-control::placeholder {
  color: #005e86;
}
.form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: #009cde;
}
.form-control:read-only {
  background: #fff;
}

.subject .form-control {
  border: 0;
  border-radius: 0;
  padding-left: 0;
  padding-top: 0;
  color: #005e86;
  border-bottom: 1px solid #7ba30c;
  height: auto;
  padding-top: 0.9375rem;
  padding-bottom: 0.5rem;
}
.subject .form-control:placeholder {
  color: #005e86;
}

.subject .control-label {
  left: 0;
  padding: 0;
}

.datepicker .calendar-icon {
  position: absolute;
  background: #fff url(../images/icons.png) -92px -94px no-repeat;
  width: 17px;
  height: 17px;
  right: 2px;
  bottom: 8px;
}

textarea.form-control {
  resize: none;
  height: 8.75rem;
  padding-left: 1.6875rem;
  padding-top: 1.25rem;
  padding-right: 1.25rem;
  border-radius: 30px;
  line-height: 1.8;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background: #af1f66 !important;
  width: 2px;
}

.mCSB_scrollTools .mCSB_draggerRail {
  background: #adadad !important;
}

.slick-arrow {
  position: absolute;
  display: block;
  height: 20px;
  width: 30px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  padding: 0;
  border: none;
  outline: none !important;
  z-index: 9;
  width: 25px;
  height: 25px;
  top: -50px;
  right: 25px;
  left: auto;
}
.slick-arrow :focus {
  outline: none;
}
.slick-arrow:hover:before {
  background-position: -3px -65px;
}
.slick-arrow:hover.slick-prev:before {
  background-position: -4px -65px;
}
.slick-arrow:before {
  position: absolute;
  content: "";
  width: 20px;
  height: 10px;
  background: url(../images/icons.png) -3px -53px no-repeat;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.slick-arrow.slick-prev {
  right: 95px;
}
.slick-arrow.slick-prev:before {
  background-position: -4px -53px;
  transform: rotate(180deg) translate(-50%, 50%);
}
.slick-arrow.slick-disabled {
  pointer-events: none;
  opacity: 0;
}
.slick-arrow.slick-disabled:before {
  opacity: 0.2;
}

.inner-scroll {
  max-height: 270px;
}

.slick-instance.slider-loader:not(.slick-initialized) {
  height: 180px;
  overflow: hidden;
  position: relative;
}
.slick-instance.slider-loader:not(.slick-initialized):before {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: url(../images/svg/loader.svg) top left no-repeat;
  width: 70px;
  height: 70px;
}
.slick-instance.slider-loader:not(.slick-initialized) .slick-list {
  opacity: 0;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: #fff;
  color: #af1f66;
}

.abs-link {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9;
}

.bootstrap-select > .dropdown-toggle {
  padding: 0 1.5625rem;
  padding-top: 6px;
  height: 54px;
  border-radius: 23px;
  outline: none;
  position: relative;
  box-shadow: 0px 21px 17px rgba(217, 197, 202, 0.9);
}
.bootstrap-select > .dropdown-toggle:hover,
.bootstrap-select > .dropdown-toggle:focus {
  border: 0 !important;
  outline: none !important;
}
.bootstrap-select > .dropdown-toggle:after {
  position: absolute;
  content: "";
  border: 0;
  background: url(../images/icons.png) -69px -2px no-repeat;
  width: 23px;
  height: 20px;
  right: 35px;
  transition: 0.5s ease all;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner {
  color: #af1f66 !important;
  font-size: 20px !important;
  font-family: "MetricMedium";
}

.bootstrap-select.show .dropdown-toggle:after {
  transform: rotate(180deg);
}

.modal {
  text-align: center;
  padding: 0 !important;
}
.modal:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}
.modal .modal-dialog {
  width: 600px;
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  margin: 15px 0;
}
@media screen and (max-width: 600px) {
  .modal .modal-dialog {
    width: 95%;
  }
}
@media (min-width: 576px) {
  .modal .modal-dialog {
    max-width: 100%;
  }
}
.modal .modal-dialog .modal-content {
  border-radius: 0;
  box-shadow: none;
  border: none;
  width: inherit;
  height: inherit;
  margin: 0 auto;
  pointer-events: all;
  background: #fff;
  overflow: visible;
  border-radius: 23px;
  padding: 1.875rem;
}
.modal .modal-dialog .modal-content .popup-cross-icon {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  z-index: 1000;
  width: 21px;
  height: 20px;
  background: url(../images/icons.png) -95px -2px no-repeat;
  /* zoom: .9; */
  top: 24px;
  right: 15px;
}
.modal .modal-dialog .modal-content .popup-cross-icon i {
  color: #013c5b;
  font-size: 1.5rem;
  display: none;
}
.modal .modal-dialog .modal-content .popup-cross-icon:hover {
  opacity: 0.8;
}
.modal .modal-dialog .modal-content .modal-head {
  font-size: 1.75rem;
  color: #fff;
  font-weight: 600;
  background: transparent;
  opacity: 1;
  padding: 0.75rem 0;
  text-transform: capitalize;
  margin: 0;
}
.modal.large .modal-dialog {
  width: 945px;
}
@media screen and (max-width: 991px) {
  .modal.large .modal-dialog {
    width: 95%;
  }
}
.modal.medium .modal-dialog {
  width: 600px;
}
@media screen and (max-width: 768px) {
  .modal.medium .modal-dialog {
    width: 95%;
  }
}
.modal.small .modal-dialog {
  width: 395px;
}
@media screen and (max-width: 552px) {
  .modal.small .modal-dialog {
    width: 95%;
  }
}
.modal.small-modal .modal-dialog {
  width: 395px;
}
@media screen and (max-width: 552px) {
  .modal.small-modal .modal-dialog {
    width: 95%;
  }
}
.modal.custom-modal .modal-body {
  /*padding: 25px 30px 20px 30px;*/
  padding: 0;
  visibility: hidden;
  height: 595px;
  overflow: hidden;
}
.modal.custom-modal .modal-body.show {
  visibility: visible;
  height: auto;
  overflow: visible;
}

header {
  position: relative;
  z-index: 999;
  width: 100%;
  transition: all 0.5s ease;
  margin-bottom: 2rem;
}
header .header-wrapper {
  position: relative;
  padding: 0.9375rem 0;
}
header .header-wrapper:before {
  content: "";
  position: absolute;
  background: url(../images/bg-layer.png) right top no-repeat;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  z-index: -1;
}
header a {
  color: #fff;
  font-size: 1rem;
}
header ul {
  padding-right: 6rem;
}
header ul li:not(:last-child) {
  margin-right: 2.8125rem;
}

@media screen and (max-width: 767px) {
  header .header-wrapper:before {
    zoom: 0.7;
  }
  header ul {
    padding-right: 3.6rem;
  }
  header ul li:not(:last-child) {
    margin-right: 1.5rem;
  }
  header .logo img {
    max-width: 33%;
  }
}

@media screen and (max-width: 376px) {
  header ul li:not(:last-child) {
    margin-right: 1rem;
  }
}

footer {
  padding: 1.25rem 0;
  border-top: 2px solid #5e3c30;
}
footer ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
footer ul li:not(:last-child) {
  margin-right: 1.5625rem;
}
footer ul li a {
  width: 40px;
  height: 40px;
  background-color: #5e3c30;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
footer ul li a i {
  color: #fff;
}
footer ul li a:hover {
  background-color: #af1f66;
}
footer .copyright {
  font-family: "MetricMedium";
}

@media screen and (max-width: 767px) {
  footer {
    padding: 0.9375rem 0;
  }
  footer .d-flex {
    flex-direction: column-reverse;
  }
  footer .d-flex ul {
    margin-bottom: 1.25rem;
  }
}

@media screen and (max-width: 500px) {
  header .header-wrapper:before {
    display: none;
  }
  header a {
    color: #af1f66;
    white-space: nowrap;
  }
  header a:hover {
    color: #5e3c30;
  }
  header ul {
    padding-right: 1rem;
  }
}

.container {
  max-width: 985px;
  margin: auto;
  padding: 0 15px;
}

h4:before {
  position: absolute;
  content: "";
  background: url(../images/svg/concept-icon.svg) center center no-repeat;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
}

h4.vision:before {
  width: 34px;
  height: 32px;
  background: url(../images/svg/vision-icon.svg) center center no-repeat;
}

h4.mission:before {
  width: 34px;
  height: 36px;
  background: url(../images/icons.png) -31px 1px no-repeat;
}

h4.value:before {
  width: 34px;
  height: 32px;
  background: url(../images/svg/value-icon.svg) center center no-repeat;
}

.our-abilities .card {
  background: #fff;
  padding: 1.25rem 1.5625rem;
  border-radius: 20px;
  position: relative;
  margin-bottom: 45px;
  min-width: 232px;
  box-shadow: 0px 25px 21px -12px #d9c5ca;
  min-height: 160px;
}
.our-abilities .card span {
  position: absolute;
  width: 20px;
  height: 20px;
  background: url(../images/icons.png) -7px -4px no-repeat;
  right: 18px;
  top: 18px;
}
.our-abilities .card:hover span {
  background-position: -5px -25px;
}

.our-abilities p {
  color: #333333;
  font-size: 0.9375rem;
  opacity: 0.8;
  overflow: hidden;
  height: 29px;
}

.our-abilities .slick-slide {
  margin-right: 25px;
  margin-left: 0px;
}

.selling-by {
  margin-bottom: 4.0625rem;
}
.selling-by ul {
  margin-left: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: flex-start;
}
.selling-by ul li {
  text-align: center;
  margin-bottom: 0.8rem;
}
.selling-by ul li a {
  font-size: 1.0625rem;
  color: #7b7b7b;
}
.selling-by ul li:not(:last-child) {
  margin-right: 2.1875rem;
}
.selling-by ul li .icon {
  margin-bottom: 0.875rem;
  width: 80px;
  height: 80px;
  border-radius: 5px;
  box-shadow: 0 0 65px #d9c5ca;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.selling-by ul li .icon img {
  width: 100%;
}
.selling-by ul li .icon.ordering {
  background: #fff;
}
.selling-by ul li .icon.ordering img {
  max-width: 90%;
}
.selling-by ul li:hover a {
  color: #000000;
  font-family: "MetricMedium";
}
.selling-by .whatsapp {
  background: #fff;
  width: 80px;
  height: 80px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}
.selling-by .whatsapp i {
  color: #4fce5d;
  font-size: 55px;
}

.contact-us {
  margin-bottom: 3.125rem;
}
.contact-us form {
  margin-bottom: 3.4375rem;
  margin-left: 1.6875rem;
}
.contact-us .row {
  padding-left: 2.5rem;
  align-items: center;
}
.contact-us .our-address .inner {
  padding-top: 1.25rem;
}
.contact-us .map {
  height: 235px;
}
.contact-us .map img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  filter: grayscale(1);
  box-shadow: 0 0 27px #d9c5ca;
}

.modal.detail h4 {
  padding-left: 50px;
  padding-top: 0;
  font-size: 19px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.modal.detail h4:before {
  top: -10px;
  left: 0;
}

.modal.detail p {
  color: #1a1a1a;
  opacity: 0.8;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.toggle-filter {
  margin-bottom: 3.4375rem;
  margin-left: 1.6875rem;
  position: relative;
}
.toggle-filter .toggle-filter-btn {
  padding: 0 1.5625rem;
  height: 54px;
  border-radius: 23px;
  outline: none;
  position: relative;
  box-shadow: 0px 10px 17px rgba(217, 197, 202, 0.9);
  width: 100%;
  display: block;
  background: #fff;
  display: flex;
  align-items: center;
  color: #af1f66;
  font-size: 20px;
  font-family: "MetricMedium";
  padding-top: 5px;
}
.toggle-filter .toggle-filter-btn:after {
  position: absolute;
  content: "";
  border: 0;
  background: url(../images/icons.png) -69px -2px no-repeat;
  width: 23px;
  height: 20px;
  right: 35px;
  transition: 0.5s ease all;
  top: 50%;
  transform: translateY(-50%);
}
.toggle-filter ul {
  padding: 10px;
  background: #fff;
  margin-top: 5px;
  box-shadow: 0px 10px 17px rgba(217, 197, 202, 0.9);
  width: 100%;
  max-height: 200px;
  display: none;
}
.toggle-filter ul li {
  padding: 5px 0px;
}
.toggle-filter ul li a {
  font-family: "MetricMedium";
  font-size: 17px;
}
.toggle-filter ul li a:hover,
.toggle-filter ul li a:focus,
.toggle-filter ul li a.active {
  color: #af1f66 !important;
  background: #fff !important;
}

@media screen and (max-width: 991px) {
  .our-abilities .slick-slide {
    margin-right: 10px;
    margin-left: 10px;
  }
  .slick-arrow {
    top: -40px;
  }
}

@media screen and (max-width: 767px) {
  h3 {
    margin-left: 0;
    margin-bottom: 0.9375rem;
  }
  .our-abilities .card {
    min-width: 100%;
    min-height: 150px;
    height: 150px;
  }
  .contact-us {
    margin-bottom: 1.5625rem;
  }
  .contact-us .our-address {
    margin-bottom: 1.5625rem;
  }
  .contact-us .row {
    padding-left: 0;
  }
  .contact-us form {
    margin-left: 0;
  }
  .selling-by {
    margin-bottom: 2rem;
  }
  .selling-by ul {
    margin-left: 0;
  }
  .selling-by ul li:not(:last-child) {
    margin-right: 1.6rem;
  }
  .selling-by ul li .icon {
    margin: auto auto 0.7rem auto;
  }
}

@media screen and (max-width: 575px) {
  .selling-by ul li {
    width: 30%;
  }
  .selling-by ul li:not(:last-child) {
    margin-right: 0;
    margin-bottom: 1.25rem;
  }
  .bootstrap-select > .dropdown-toggle:after {
    right: 15px;
    zoom: 0.9;
  }
}

@media screen and (max-width: 414px) {
  .selling-by ul li {
    width: 50%;
  }
}

.show-mobile {
  display: none;
}
@media screen and (max-width: 767px) {
  .hide-mobile {
    display: none;
  }
  .show-mobile {
    display: flex;
  }
}

.logo img {
  max-width: 220px;
}
.header-wrapper .logo {
  width: 50%;
}
@media screen and (max-width: 550px) {
  header .logo img {
    max-width: 45%;
  }
}
@media screen and (max-width: 450px) {
  header .logo img {
    max-width: 60%;
  }
}
/*# sourceMappingURL=main.css.map */