$color_dark: #283C4C;
$color_gray: #606568;
$color_white: white;
$color_purple: #926BE7;
$color_shadow: rgba(98,90,242,0.1);
$color_dark_shadow: rgba(98,90,242,0.25);
$color_blue: #eaf8f9;

//fonts

$heading-font: 'Muli','HelveticaNeue', 'Helvetica Neue', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
$main-font: 'Muli','HelveticaNeue', 'Helvetica Neue', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;

//margins

$percent_lg: 12%;
$percent_md: 125px;
$percent_sm: 45px;
$percent_xs: 16px;

//mixins

$nav-breakpoint: 1024px;
$mobile-breakpoint: 768px;
$mobile-tiny-breakpoint: 640px;

@mixin nav-large {
  @media screen and (min-width: #{$nav-breakpoint}) {
    @content;
  }
}

@mixin nav-small {
  @media screen and (max-width: $nav-breakpoint) {
    @content;
  }
}

@mixin mobile {
  @media screen and (max-width: $mobile-breakpoint) {
    @content;
  }
}

@mixin mobile-tiny {
  @media screen and (max-width: $mobile-tiny-breakpoint) {
    @content;
  }
}

//shared styles

%uppercase {
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 0.1em;
}

%transition {
	-moz-transition: ease-in-out all .5s;
	-webkit-transition: ease-in-out all .5s;
	transition: ease-in-out all .5s;
  -o-transition: ease-in-out all .5s;
}

body, html {
  overflow-x: hidden;
}

//Hide/show div on mobile

.mobile-hide {
	display: inline-block;

	@include mobile {
  	display: none !important;
	}
}

.mobile-show {
	display: none;

	@include mobile {
  	display: block !important;
	}
}

.mobile-12 {
	display: initial;

	@include mobile {
  	width: 100% !important;
	}
}

.mobile-row {
  @include mobile {
		display: block !important;
    margin-bottom: $percent_sm;
	}
}

.mobile-row-btn {
  @include mobile-tiny {
		display: block !important;

    .button {
      margin-left: 0;
    }
	}
}

.hide {
  display: none;
}

.show  {
  display: block;
}