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

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

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

// Colors
$color-background		: #141414;
$color-text				: #999999;
$color-text-link		: #CCCCCC;
$color-text-link-hover	: #FFFFFF;
$color-icon				: #999999;
$color-icon-hover		: #FFFFFF;

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

// Images
$image-background		: url('../../images/background.jpg');

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

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

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

html {
	background-color: $color-background; 
}
body.page-template-page-fullsingle-me {
	height: 100vh;
	background-color: $color-background; 
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 45px;
	line-height: 60px;
	letter-spacing: -0.5px;
	color: $color-text;
	background-image: $image-background; 
	background-position: center center;
	background-size:cover;

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

	p { // used in bio
		margin-bottom: 28px;
		color: $color-text;

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

	}

}

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

.fs-me {
	padding: 10vh 10vw;
	overflow:hidden;
	position: absolute;
	z-index: 1000;

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

  	.me-content {
  		height: 80vh;
		display: flex;
  		flex-direction: column;

		@media (max-width: $bp-mobile ) {
			height: 90vh; // as padding now 5vh 5vw
		}	

	}

}

//-------------------------------------------------------------------------------
// Logo
//-------------------------------------------------------------------------------

.logo { 
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		align-self: left;
		animation: fadein 2s;

		@media (max-width: $bp-mobile ) {
			align-self: center;
		}

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

}

//-------------------------------------------------------------------------------
// Bio
//-------------------------------------------------------------------------------

.bio { 
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	animation: fadein 4s;
	letter-spacing: -1px;
	max-width: 66%;

	@media (max-width: $bp-tablet ) {
		max-width: none;
	}

	a {
		color: $color-text-link;
		transition: 1s;

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

	}

}

//-------------------------------------------------------------------------------
// Network
//-------------------------------------------------------------------------------

.network { 
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	animation: fadein 6s;
	margin-top: auto;

	ul {
		animation: fadein 6s;
		margin-top: auto; // sit at bottom of DIV

		li {
			display: inline-block;
			margin-right: 8px;

			a {
				display: inline-block;
				width: 30px;
				height: 30px; 
				cursor: pointer;

				//-------------------------------------------------------------------------------
				// SVG Icons - svgicons.sparkk.fr
				//-------------------------------------------------------------------------------

				.svg-icon {
					padding: 4px;
					width: 22px;
					height: 22px; 
					margin: 0;
					display: block;
				}

				.svg-icon path,
				.svg-icon polygon,
				.svg-icon rect {
					fill: $color-icon;
					transition: 1s;
				}

				.svg-icon circle {
					stroke: $color-icon;
					stroke-width: 1;
				}

			}

			a:hover {
				.svg-icon path,
				.svg-icon polygon,
				.svg-icon rect {
					fill: $color-icon-hover;
					transition: 0.1s;
				}

			}

		}

	}

}	

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

//	To edit this credit you can remove the CCA 3.0 license for only $5 here: https://onepagelove.com/me 
//	this really helps contribute towards us developing more templates and means the world to me!
//	Cheers, Rob (@robhope)

.credit {
	font-size: 12px; 
	line-height: 14px;	
	margin-bottom: 0;
	animation: fadein 8s;

	p.copyright {
		font-size: 12px; 
		line-height: 14px;
		font-weight: 400;
		opacity: 0.4;

		a { 
			color: $color-text;
		}

	}

}

//-------------------------------------------------------------------------------
// Videos 
//-------------------------------------------------------------------------------

body.page-template-page-fullsingle-me.me-video {
	background-image: none; 

	.me-video-container {
		overflow:hidden;
		position: absolute;
		z-index: 0;
		width: 100vw;
		height: 100vh;
	}

	video.video {
		object-fit      : cover;
		object-position : 50% 50%;
		width           : 100%;
		height          : 100%;
	} 

	// YouTube
	.video-wrap{
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
	}
	.video-container {
		position:relative;
		overflow:hidden;
		height: 56.25vw; 
		width: 100vw;
		@media (max-aspect-ratio:16/9) { 
			height: 100vh; 
			width: 177.7777777778vh; // this is for the ration 16:9
		}
	}
	.video-container iframe, 
	.video-container object, 
	.video-container embed { 
		position: absolute; 
		top: 0; 
		left: 0; 
		width: 100%; 
		height: 100%; 
	}

	// dark overlay, tweak the 0.6 if needed = 60% darkness
	.fs-me {
		background-color: rgba(0,0,0,0.6); 
	}
}