// Open Sans font import
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700)

// Variables
$font-family: "Open Sans", Helvetica, Arial, sans-serif

// Colours
$primary: #71C3A4
$grey: #BDC4D0
$text-dark: #555
$background-dark: #2F3032

// helper class
.pt-20
	padding-top: 20px

.pt-50
	padding-top: 50px

.pv-50
	padding-top: 50px
	padding-bottom: 50px

// Mixins
=absolute($top, $left, $right, $bottom)
	position: absolute
	top: $top
	left: $left
	right: $right
	bottom: $bottom

=translate($x,$y)
	-webkit-transform: translate($x,$y)
	-webkit-transform: translate3d($x,$y,0)
	-ms-transform: translate($x,$y)
	-ms-transform: translate3d($x,$y,0)
	transform: translate($x,$y)
	transform: translate3d($x,$y,0)


// Typography

*
	font-family: $font-family

html
	height: 100%
	font-size: 16px

.section-header
	margin-bottom: 30px
	font:
		size: 1.5rem
		weight: 300
	text:
		align: center
	letter-spacing: 0.04rem

.section-sub-header
	position: relative
	margin-bottom: 30px
	font:
		size: 1rem
		weight: 600
	text:
		align: center
		// transform: uppercase
	letter-spacing: 0.04rem	

	&:before
		content: ''
		display: block
		+absolute(50%,50%,null,null)
		width: 40%
		height: 1px
		// box-shadow: inset 0 0 -2px #71C3A4
		+translate(-50%,-50%)
		background: #71C3A4
		// border-bottom: 6px solid #71C3A4

	.sub-header__text
		position: relative
		display: inline-block
		padding: 0 15px
		background: white

// base
body
	position: relative
	min-height: 100vh
	padding-top: 70px
	background: 
		image: linear-gradient(top, #336666, #99ffcc)
		attachment: fixed	

// styles
.navbar
	height: 70px
	margin: 0
	color: $text-dark
	background: white
	border-radius: 0

	&.shadow
		box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16)

	.navbar-brand
		position: relative
		height: 70px
		padding: 25px 15px 25px 50px
		font:
			size: 1.25rem
			weight: 300
		letter-spacing: 0.04rem
		color: #61AA94
	
		svg.brand-icon
			+absolute(50%,0,null,null)
			width: 40px
			height: 40px
			+translate(0,-50%)
			
			path
				fill: #61AA94
			
	
	.navbar-nav
		position: relative
	
		> li
			position: relative
			width: 130px
	
			> a
				padding: 25px 15px
				text:
					align: center
					transform: uppercase
				letter-spacing: 1px
				color: $text-dark
		
				&:hover, &:focus
					background: white
		
			// Moving Line Style
			&:last-of-type:after
				content: ''
				display: block
				+absolute(null,0,0,0)
				height: 4px
				background: $primary
				+translate(-300%,0)
				transition: transform 0.2s ease-in, opacity 0.2s ease-in
				opacity: 0
			
			// Active class applied by scrollspy
			&.active
				
				// Moving the line by sibling selector
				&:first-of-type
					~ :last-of-type:after
						+translate(-300%,0)
						opacity: 1
		
				&:nth-of-type(2)
					~ :last-of-type:after
						+translate(-200%,0)
						opacity: 1
		
				&:nth-of-type(3)
					~ :last-of-type:after
						+translate(-100%,0)
						opacity: 1
		
				&:last-of-type:after
					+translate(0,0)
					opacity: 1
		
				> a
					color: $primary
					background: white

.hero
	position: relative
	height: 300px
	margin-bottom: 4px
	padding-top: 80px
	color: white
	background:
		image: url('https://images.unsplash.com/photo-1446071103084-c257b5f70672?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1920&h=2907&q=80')
		color: white
		size: cover
		position: center center
	
	.overlay
		+absolute(0,0,0,0)
		background: linear-gradient(180deg,rgba(0,0,0,.7) 0,transparent 30%,transparent 70%,rgba(0,0,0,.7))
	
.banner
	margin-bottom: 4px
	padding: 50px 15px
	background: white

	&.full-width
		min-height: 500px
		padding: 0

.content
	// applies padding to content children of banners
	&:not(:first-of-type)
		padding: 50px 0 0 0

	p
		margin-bottom: 25px
		font:
			size: 0.875rem
		text-align: center
		color: $text-dark
		letter-spacing: 0.04rem
	
	.help-list
		margin: 0
		padding: 20px 0
		list-style: none
	
		li
			margin-bottom: 12px
			font:
				size: 1rem
			text:
				align: center
			letter-spacing: 0.04rem
			color: $text-dark

.profile
	position: relative
	padding-top: 10px
	margin-bottom: 30px
	letter-spacing: 0.04rem

// Rounded images of original pictures
.profile-image
	position: relative
	margin: 10px auto 20px auto
	width: 125px
	height: 125px
	border-radius: 100%
	overflow: hidden		
	
	@media screen and (min-width: 769px)
		margin: 10px 15px 0 auto

	// Pseudo element contains picture as background to allow custom placement
	&:before
		content: ''
		display: block
		+absolute(-10px,-12px,null,null)
		width: 150px
		height: 197.25px
		background:
			size: cover
			position: center center
	
	// Ana's image
	&.image-ana
		&:before
			background:
				image: url(https://www.centralcoastpp.com.au/pictures/ana_lopes.png)
	
	// Belindas image	
	&.image-belinda
		&:before
			background:
				image: url(https://www.centralcoastpp.com.au/pictures/belinda_preston.png)		
		
	// shrinks to avatar size 50px x 50px	
	&.avatar
		width: 50px
		height: 50px
		margin: 0 auto 10px

		&:before
			+absolute(-3px,-4px,null,null)
			width: 60px
			height: 78.9px

.profile-name
	font:
		size: 1rem
		weight: 400
	text-align: center
	color: $text-dark

	@media screen and (min-width: 769px)
		text-align: left

.profile-position
	margin-bottom: 15px
	font:
		size: 0.875rem
		weight: 400
	text-align: center
	color: $grey

	@media screen and (min-width: 769px)
		text-align: left

.profile-contacts
	padding-top: 25px
	text-align: center

	@media screen and (min-width: 769px)
		text-align: left
	
.profile-description
	// margin-bottom: 15px
	font:
		size: 0.875rem
	color: $text-dark
	text-align: center

	@media screen and (min-width: 769px)
		text-align: left

.profile-link
	display: block
	margin: 0 auto
	padding: 8px 0
	color: $primary
	text-align: center
	outline: none !important

	@media screen and (min-width: 769px)
		margin: 0 auto 0 0

	&:hover
		color: darken($primary, 10%)

	&:focus
		color: darken($primary, 10%)
	
.map
	height: 500px
	background: 
		image: url('https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap')
		size: cover
		position: center center
	
.contact-info
	display: inline-block
	position: relative
	margin-bottom: 20px
	padding-left: 30px
	line-height: 1rem
	vertical-align: middle
	letter-spacing: 0.04rem
	
	i
		display: block
		+absolute(50%,0,null,null)
		+translate(0,-50%)
	
	.contact-info__text
		display: inline-block
		font:
			size: 1rem	
		line-height: 1rem
	
	// small variant
	&.contact-small
		i
			color: #757575
	
		.contact-info__text
			margin-right: 12px
			font:
				size: 0.8375rem
			color: #757575
	
.contact-link
	text:
		align: center
		decoration: underline
	letter-spacing: 1px
	color: $primary

footer
	padding: 50px 15px
	background: $background-dark

	.footer-header
		margin-bottom: 30px
		font:
			size: 1rem
		letter-spacing: 1px
		color: white
	
	p
		margin-bottom: 25px
		font:
			size: 0.875rem
		text-align: center
		color: rgba(255,255,255,0.7)
		letter-spacing: 0.04rem
	
.modal
	.modal-body
		max-height: 500px
		padding: 25px
		overflow: auto
	
	.profile-image
		position: relative
		margin: 10px auto 20px auto
		width: 125px
		height: 125px
		border-radius: 100%
		overflow: hidden		

		// Pseudo element contains picture as background to allow custom placement
		&:before
			content: ''
			display: block
			+absolute(-10px,-12px,null,null)
			width: 150px
			height: 197.25px
			background:
				size: cover
				position: center center
		
	.profile-name
		margin-bottom: 5px
		font:
			size: 1rem
			weight: 400
		text-align: center
		color: $text-dark

	.profile-position
		margin-bottom: 15px
		font:
			size: 0.875rem
			weight: 400
		text-align: center
		color: $grey
	
	p
		margin-bottom: 25px
		font:
			size: 0.875rem
		color: $text-dark
		letter-spacing: 0.04rem