/*
Theme Name: Jasper
Theme URI: http://www.jaschavanaalst.nl/
Version: 1.0
Author: Jascha van Aalst
Author URI: http://www.jaschavanaalst.nl/
Description: Jascha van Aalst's Portfolio Theme.
*/

@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);

html, body{
	font-family: 'PT Sans', sans-serif !important;
}

.menu-container{
	position: fixed;
	width: 400px;
	height: 200px;
	bottom: 0;
	left: calc(50% - 200px);
	z-index:100;
}

.circle{
	width:400px;
	height:200px;
	border-radius:200px 200px 0 0;
	overflow: hidden;
	/*background-color: grey;*/
	position: relative;
	/*bottom:-200px;*/
	bottom:0;
}

.circle.active{
	/*bottom:0;*/
}

.menu-btn.active{
	color:#292b2c;
	-webkit-box-shadow: rgba(0, 0, 0, 0.57) 0 0 10px 3px;
	-moz-box-shadow: rgba(0, 0, 0, 0.57) 0 0 10px 3px;
	box-shadow: rgba(0, 0, 0, 0.57) 0 0 10px 3px;
	background-color: white;
}

.menu-btn:hover{
	color:#292b2c;
	-webkit-box-shadow: rgba(0, 0, 0, 0.57) 0 5px 26px 3px;
	-moz-box-shadow: rgba(0, 0, 0, 0.57) 0 5px 26px 3px;
	box-shadow: rgba(0, 0, 0, 0.57) 0 5px 26px 3px;
	background-color: white;
}

.menu-item{
	transform: rotate(-10deg) skew(50deg);
	width: 400px;
	height: 400px;
	position: absolute;
	background-color: rgba(33, 33, 33, 0.8);
	bottom: 0;
	right: 200px;
	transform-origin: 100% 100%;
	border: 1px solid white;
	overflow:hidden;
	cursor:pointer;
}

.menu-item:hover{
	background-color: #86aab6;
}

.menu-btn{
	width: 200px;
	height: 100px;
	position: absolute;
	bottom: 0;
	left: 100px;
	border-radius: 100px 100px 0 0;
	text-align: center;
	padding-top: 50px;
	font-size: 20px;
	color:white;

	cursor:pointer;
	transition: all 0.5s;
}

.menu-item a{
	display: block;
	font-size: 1.18em;
	height: 14.5em;
	width: 14.5em;
	position: absolute;
	bottom: -5.25em;
	right: -5.25em;
	border-radius: 50%;
	text-decoration: none;
	color: #fff;
	padding-top: 2.8em;
	text-align: center;
	-webkit-transform: skew(-50deg) rotate(-74deg) scale(1);
	-ms-transform: skew(-50deg) rotate(-74deg) scale(1);
	-moz-transform: skew(-50deg) rotate(-74deg) scale(1);
	transform: skew(-50deg) rotate(-74deg) scale(1);
	-webkit-transition: opacity 0.3s, color 0.3s;
	-moz-transition: opacity 0.3s, color 0.3s;
	transition: opacity 0.3s, color 0.3s;
}

.jasper_slide {
	width: 100vw;
	height: 100vh !important;
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}

#post-content{
	max-height:100vh;
	overflow-y: scroll;
}

.sub-img{
	max-width:100%;
	margin: 20px 0;
}