//-------------------------------------------------------------------------------
// Font Import
//-------------------------------------------------------------------------------

@import url('https://fonts.googleapis.com/css?family=Roboto:500');

//-------------------------------------------------------------------------------
// Variables
//-------------------------------------------------------------------------------

// Colors
$color-background	: #141414;

// Breakpoints
$bp-smallish 		: 1200px;
$bp-tablet 			: 800px;
$bp-mobile 			: 500px;

//-------------------------------------------------------------------------------
// Fade In
//-------------------------------------------------------------------------------

@keyframes fadein {
    from { opacity: 0;}
    to   { opacity: 1;}
}

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

html {
	background-color: $color-background; 
}
body.page-template-page-fullsingle-me {
	background-color: $color-background; 
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 45px;
	line-height: 60px;
	letter-spacing: -0.5px;
	color: #999;

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

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

		.panel-row-style { // Need to include within layout cells on future Page Builder update
			background-image:url(https://s3.amazonaws.com/fullsingle/me-bg.jpg);
			background-position:center center;
			background-size:cover 
		} 

	}

	p {
		margin-bottom: 28px;
		color: #999;

		@media (max-width: $bp-tablet ) {
			font-size: 32px;
			line-height: 40px;
		}	

	}

	//-------------------------------------------------------------------------------
	// Sections
	//-------------------------------------------------------------------------------

	.fs-me {
		padding: 10vh 10vw;

		@media (max-width: $bp-mobile ) {
			padding: 5vh 5vw;
		}	

	  	.panel-grid-cell {
	  		height: 80vh;
			display: flex;
	  		flex-direction: column;

			@media (max-width: $bp-mobile ) {
				height: 90vh; // as padding now 5vh 5vw
			}	
		  	.so-panel:nth-child(1) { // .logo
				flex: 1 1 auto;
		  		display: flex;
		  		flex-direction: column;
		  		align-self: left;
		  		animation: fadein 2s;

				img {
					max-width: 165px;
					height: auto;
				}
			}

			.so-panel:nth-child(2) { // .bio
				flex: 1 1 auto;
		  		display: flex;
		  		flex-direction: column;
				justify-content: center;
				animation: fadein 4s;
				letter-spacing: -1px;

				a {
					color: #CCC;
					&:hover {
						color: #FFF;
					}
				}
			}

			.so-panel:nth-child(3) { // .network
				flex: 1 1 auto;
	  			display: flex;
	  			flex-direction: column;
	  			animation: fadein 6s;

	  			.network {
				    margin-top: auto;
	  			}

	  			.sow-social-media-button {
	  				padding: 0;
	  				margin: 0 16px 0 0;
	  				font-size: 22px;
	  				line-height: 22px;
	  				color: #999;
	  			}

	  			.sow-icon-fontawesome {
	  				color: #999;

	  				&:hover {
	  					color: #FFF;
	  				}

	  			}

			}

	  	}
		
	}

}