$red:#F44336;

@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);
$font:"Roboto",Helvetica,sans-serif;

@mixin transition($in) {
	transition:$in;
	-webkit-transition:$in;
	-moz-transition:$in;
	-o-transition:$in;
	-ms-transition:$in;
}
@mixin box-shadow($in) {
	box-shadow:$in;
	-webkit-box-shadow:$in;
	-moz-box-shadow:$in;
	-o-box-shadow:$in;
	-ms-box-shadow:$in;
}
@mixin transform($in) {
	transform:$in;
	-webkit-transform:$in;
	-moz-transform:$in;
	-o-transform:$in;
	-ms-transform:$in;
}
@mixin transform-style($in) {
	transform-style:$in;
	-webkit-transform-style:$in;
	-moz-transform-style:$in;
	-o-transform-style:$in;
	-ms-transform-style:$in;
}
@mixin perspective($in) {
	perspective:$in;
	-webkit-perspective:$in;
	-moz-perspective:$in;
	-o-perspective:$in;
	-ms-perspective:$in;
}
@mixin perspective-origin($in) {
	perspective-origin:$in;
	-webkit-perspective-origin:$in;
	-moz-perspective-origin:$in;
	-o-perspective-origin:$in;
	-ms-perspective-origin:$in;
}
@mixin transform-origin($in) {
	transform-origin:$in;
	-webkit-transform-origin:$in;
	-moz-transform-origin:$in;
	-o-transform-origin:$in;
	-ms-transform-origin:$in;
}

body {
	margin:0;
	padding:0;
	background-color:#222;
}
* {
	font-family:$font;
	color:#888;
	box-sizing:border-box;
}

a.red {
  color:$red;
  font-size:18px;
  text-align:center;
  display:block;
}

.toggle {
	border:none;
	outline:none;
	background-color:transparent;
	cursor:pointer;
	margin:30px;

	.bar {
		width:27px;
		margin:3px;
		height:3px;
		background-color:#888;
	}
}

nav {
	position:absolute;
	top:100px;
	left:0;
	width:100%;
	z-index:-1;

	@include transition(all 0.5s ease-in-out);

	ul {
		list-style-type:none;
		margin:0;
		padding:0;
		text-align:center;

		li {
			display:inline-block;
		}

		@for $i from 1 through 4 {
			li:nth-child(#{$i})>button {
				$d:$i/10;
				@include transition(all 0.2s cubic-bezier(0.5,1,0.5,1.5) #{$d}s);
			}
		}

		button {
			padding:10px;
			font-size:20px;
			outline:none;
			border:none;
			background-color:transparent;
			color:#fff;
			cursor:pointer;
			position:relative;
			background-color:#222;
			margin:3px;

			@include transform(translateY(-150px));
			@include box-shadow(0 5px 10px 2px rgba(0,0,0,0.6));

			&::after {
				position:absolute;
				content:" ";
				bottom:0;
				left:50%;
				width:0;
				height:3px;
				background-color:$red;
				@include transition(all 0.2s ease-in-out);
			}

			&:hover {
				&::after {
					width:100%;
					left:0;
				}
			}
		}
	}
}

.nav__move {
	z-index:10;

	button {
		@include transform(translateY(0px));
	}
}

main {
	position:absolute;
	width:100%;
	height:100%;
	@include transform-style(preserve-3d);
	@include perspective(500px);
	@include perspective-origin(50% 50%);
}

.content {
	position:absolute;
	width:100%;
	height:100%;
	overflow:auto;
	background-color:#fff;
	@include transform-origin(50% 50%);
	@include transition(all 0.8s ease-in-out);
	@include box-shadow(0 0 30px 10px rgba(0,0,0,0.5));
}

.content__move {
	@include transform(scale(0.8) translateY(50px) rotateX(10deg));
}

section {
	visibility:hidden;
	position:absolute;
	opacity:0;
	width:100%;
	
	@include transition(all 0.3s ease-in-out 0.3s);
	@include transform(translateY(100px));
}

.section__open {
	visibility:visible;
	opacity:1;
	@include transform(translateY(0px));
}

.section--title {
	font-size:28px;
	margin:40px;
	text-align:center;
}

.section--text {
	min-width:200px;
	max-width:800px;
	padding:20px;
	font-size:16px;
	margin:auto;


	&:first-letter {
		font-weight:bold;
		font-size:18px;
		display:inline-block;
		padding-left:30px;
	}
}


.card {
	width:250px;
	padding:50px 30px;
	margin:70px auto;
	background-color:#222;
	position:relative;
	@include box-shadow(0 0 5px 2px rgba(0,0,0,0.3));

	* {
		color:#fff;
	}
}

$w:80px;

.card--face {
	border-radius:50%;
	position:absolute;
	top:-$w/2;
	left:50%;
	margin-left:-$w/2;
	border-top:2px solid #fff;
	
	@include transition(all 0.2s ease-in-out);
	@include box-shadow(0 0 10px 1px rgba(0,0,0,0.3));
}

.card--name {
	font-size:25px;
	font-weight:900;
	margin:20px 0 30px;
	text-align:center;
}

.card--links {
	ul {
		list-style-type:none;
		padding:0;
		margin:0;

		li,a {
			display:block;
			text-align:center;
			width:100%;
			font-size:18px;
			text-decoration:none;
			padding:5px;
			@include transition(all 0.3s ease-in-out);

			&:hover {
				color:$red;
			}
		}
	}
}