@import url("../fonts/stylesheet.css");
@import url('https://fonts.googleapis.com/css?family=Lora');
/*-----------------------------------------------------------------------------
VARIABLES
-------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------
Colours
-------------------------------------------------------------------------------*/
$dark: #231F20;
$light: rgba(255,255,255, 0.6);

/*-----------------------------------------------------------------------------
Fonts
-------------------------------------------------------------------------------*/
$title-font:'bask';
$body-font:'Lora';

/*-----------------------------------------------------------------------------
Layout
-------------------------------------------------------------------------------*/
//$hd-height: calc(100% - 50px);
$hd-height: 30%;

/*-----------------------------------------------------------------------------
Breakpoints
-------------------------------------------------------------------------------*/
$phone: 300px;
$lrgphone: 550px;
$tablet: 750px;
$desktop: 1075px;

/*-----------------------------------------------------------------------------
Borders
-------------------------------------------------------------------------------*/



/*-----------------------------------------------------------------------------
Subheading
-------------------------------------------------------------------------------*/

//stuff


/*-----------------------------------------------------------------------------
MIXINS
-------------------------------------------------------------------------------*/

@mixin auto-bg($url) {
	background-image:$url;
	background-size: cover;
  background-position: 50% 50%;
  background-repeat:no-repeat;
	
}

@mixin bg-image($url, $size, $pos, $repeat) {
	background-image:$url;
	background-size:$size;
	background-position:$pos;
	background-repeat:$repeat;
	
}


@mixin media($size){
    @media screen and(min-width:$size) {
      @content;
    }
}

@mixin auto-layout($top, $bottom, $left, $right) {
	position:absolute;
	top:$top;
	left:$left;
	right:$right;
	bottom:$bottom;
}

@mixin r-pin($pin) {
	position:absolute;
	top:$pin;
	left:$pin;
	right:$pin;
	bottom:$pin;
	
}

@mixin hz-flex {
	display:flex;
  flex-direction:row;
}

@mixin vt-flex {
	display:flex;
  flex-direction:column;
}