$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

$side-nav-width: 200px;
$top-nav-height: 100px;
$side-nav-padding-large: 10px;
$side-nav-padding-small: 30px;
$nav-breakpoint: 900px;


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

@mixin nav-small {
  @media screen and (max-width: $nav-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 {
  overflow-x: hidden;
}

//Hide/show div on mobile

.mobile-hide {
	display: initial;

	@include nav-small {
  	display: none;
	}
}

.mobile-show {
	display: none;

	@include nav-small {
  	display: block;
	}
}

.mobile-grow {
  @include nav-small {
		width:100%;
	}
}

.hide {
  display: none;
}

.show  {
  display: block;
}