// Colours
$color:rgb(200,0,50);




/* =Nav
-------------------------------------------------------------- */
#nav-trigger {
	display:none;
	text-align:center;
	span {
		display:inline-block;
		padding:10px 30px;
		background-color:$color;
		color:rgb(255,255,255);
		cursor:pointer;
		text-transform: uppercase;
		&:after {
			display:inline-block;
			margin-left:10px;
			width:20px;
			height:10px;
			content:"";
			border-left:solid 10px transparent;
			border-top:solid 10px #fff;
			border-right:solid 10px transparent;
		}
		&:hover {
			background-color:darken($color, 5%);
		}
		&.open:after {
			border-left:solid 10px transparent;
			border-top:none;
			border-bottom:solid 10px #fff;
			border-right:solid 10px transparent;
		}
	}
}
nav {
	margin-bottom:30px;
}
nav#nav-main {
	background-color:$color;
	padding:10px 0;
	ul {
		list-style-type:none;
		margin:0;
		padding:0;
		text-align:center;
	}
	li {
		display:inline-block;
		border-right:solid 1px darken($color, 10%);
		padding:0 5px;
		&:last-child {
			border-right:none;
		}
	}
	a {
		display:block;
		color:rgb(255,255,255);
		padding:10px 30px;
		&:hover {
			background-color:darken($color, 5%);
			color:#fff;
		}
	}
}
nav#nav-mobile {
	position:relative;
	display:none;
	ul {
		display:none;
		list-style-type:none;
		position:absolute;
        left:0;
        right:0;
        margin-left:auto;
        margin-right:auto;
		text-align:center;
		background-color:$color;
	}
	li {
		display:block;
		padding:5px 0;
		margin:0 5px;
		border-bottom:solid 1px darken($color, 10%);
		&:last-child {
			border-bottom:none;
		}
	}
	a {
		display:block;
		color:rgb(255,255,255);
		padding:10px 30px;
		&:hover {
			background-color:darken($color, 5%);
			color:#fff;
		}
	}
}



/* =Sections
-------------------------------------------------------------- */
section {
	
}
section h1 {
	margin-bottom:10px;
}
section p {
	margin-bottom:30px;
	&:last-child {
		margin-bottom: 0;
	}
}




/* =Media Queries
-------------------------------------------------------------- */
@media all and (max-width: 900px) {
	
	#nav-trigger {
		display:block;
	}
	nav#nav-main {
		display:none;
	}
	nav#nav-mobile {
		display: block;
	}

}