//-------------------------------------------------------------------------------
// Content
//-------------------------------------------------------------------------------

body.page-template-page-fullsingle-split {
	background-color: $color-background; 
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 21px;
	line-height: 33px;
	letter-spacing: -0.2px;
	color: $color-text;
	animation: fadein 2s;

	//-------------------------------------------------------------------------------
	// Site Origin Page Builder Global Styles
	//-------------------------------------------------------------------------------

	.panel-grid {
		margin-bottom: 0 !important; // reset
	}

	p {
		color: $color-text;

	}

	ul {

		li {
			list-style: none;
			padding-left: 0;
			margin-left: 0;
		}
	}

	.panel-row-style {
		padding: 0;
		margin: 0;
	}

}

//-------------------------------------------------------------------------------
// Columns
//-------------------------------------------------------------------------------

.fs-split { 
	width: 100vw;
	height: 100vh;
	display: flex;

	@media (max-width: $bp-tablet ) {
		height: auto;
		flex-wrap: wrap;
	}	

	.split-image {
		// width: 50%; from HTML version but Page Builder adds this
		height: 100vh;
		background-image: $image-background;
		background-position:center center;
		background-size:cover;

		@media (max-width: $bp-tablet ) {
			height: 80vh;
			width: 100%;
		}	

	}

	.split-content {
		// width: 50%; from HTML version but Page Builder adds this
		min-height: 100vh;
		display: flex;
		align-items: center;
  		justify-content: center;
  		overflow: auto;

		@media (max-width: $bp-tablet ) {
			width: 100%;
			height: auto;
		}	

		div:first-child { // this is .split-content-vertically-center on HTML version of Split
			padding: 80px;
			max-width: 640px;
			margin-top: auto;
  			margin-bottom: auto;

			@media (max-width: $bp-smallish ) {
				padding: 60px;
			}

			@media (max-width: $bp-tablet ) {
				padding: 40px;
			}	

			div { // hacks for divs within this div
				padding: 0;
			}

		}

	}

}

//-------------------------------------------------------------------------------
// Content
//-------------------------------------------------------------------------------

//-------------------------------------------------------------------------------
// Intro Text
//-------------------------------------------------------------------------------

.split-intro {
	font-weight: 600;
	font-size: 64px; 
	line-height: 80px;
	letter-spacing: -2px;

	div div p { // bit of a hack I know ;P
		color: $color-tagline;
		margin-bottom: 40px;
	}

	h3 {
		font-weight: 400;
		text-transform: uppercase;
		font-size: 16px; 
		line-height: 16px;
		margin-bottom: 40px;
		letter-spacing: 0.4px;
		color: $color-name;
	}

}

//-------------------------------------------------------------------------------
// Biography
//-------------------------------------------------------------------------------

.split-bio {
	padding: 40px 0 4px 0;
	font-family: 'Lora', serif;

	@media (max-width: $bp-smallish ) {
		padding: 30px 0;
	}

	@media (max-width: $bp-tablet ) {
		padding: 20px 0;
	}	

	p {
		color: $color-text;
		margin-bottom: 40px;
	}

	a {
		color: $color-link;
		transition-duration: 0.5s;
		border-bottom: 1px dotted $color-link;

		&:hover {
			color: $color-link-hover;
			transition-duration: 0.1s;
			border-bottom: 1px dotted $color-link-hover;
		}

	}			

}

//-------------------------------------------------------------------------------
// Lists
//-------------------------------------------------------------------------------

.split-lists {
	padding: 60px 0 40px 0;

	@media (max-width: $bp-smallish ) {
		padding: 40px 0;
	}

	@media (max-width: $bp-tablet ) {
		padding: 40px 0 20px 0;
	}	

	h3 {
		font-weight: 400;
		text-transform: uppercase;
		font-size: 11px;
		line-height: 11px;
		margin-bottom: 31px;
		color: $color-text;
		letter-spacing: 2px;
		opacity: 0.5;
	}

	ul {
		margin-right: 10px;
		margin-bottom: 40px;

		li {
			font-size: 16px;
			line-height: 16px;	
			margin-bottom: 12px;
			
			a {
				color: $color-link;
				transition-duration: 0.5s;

				&:hover {
					color: $color-link-hover;
					transition-duration: 0.1s;
				}

			}
			
		}

	}

}

//-------------------------------------------------------------------------------
// Credit
//-------------------------------------------------------------------------------

.split-credit {
	opacity: 0.4;

	p {
		font-size: 12px; 
		line-height: 14px;

		a { 
			color: $color-text;
		}

	}

}