@font-face {
	font-family: 'DarkMatter';
	src: url('../font/Pixilab.woff') format('woff');
}

body {
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	background-image:url('../images/backgrounds/VELVETBLEU.jpg');
    background-attachment: fixed;
}

#velvet {
	position:fixed;
	top:0;
	opacity:0.15;
	width:100%;
	height:100%;
	background-image:url('../images/backgrounds/VELVETROUGE.jpg');
}

#header {
	position:relative;
	background-color:rgb(17,8,87);
	color:white;
	font-size:120px;
	font-family: 'DarkMatter';
	text-align:center;
	margin:50px;
}
#menubox a {
    text-decoration: none;
}
#posts {
	margin:auto;
	width:80%;
	padding:15px;
	overflow: visible !important;
}
.post {
	position:relative;
}
.post .date{
	width:100%;
	font-family: 'DarkMatter';
	margin:0;
	margin-left:-10px;
	border-bottom:1px solid;
}
.postcont .post {
	padding:20px; 
	margin:20px; 
	background-color:white;
}
.postcont:nth-child(odd) .post{
	width:45%;
    float:left;
}
.postcont:nth-child(even) .post{
	margin-left:55%;
	width:45%;
}

.post h1,h2,h3,h4,h5,h6 {font-family: 'DarkMatter';}

#menubox {
	font-family: 'DarkMatter';
	position:fixed;
	top:20px;
	background-color:rgb(119,0,119);
	height:400px;
	width:250px;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

#menu .cache {
	position:fixed;
	background-color:rgba(0,0,0,0.4);
	height:100%;
	width:100%;
	top:0;
	left:0;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
#menu.close .cache {
	opacity:0;
	pointer-events:none;
}
#menu.open .cache {
	opacity:1;
}

#menu.close #menubox{ left:-150px; 
	box-shadow: 0px 0px 0px black;}
#menu.open #menubox{ left:0px; 
	box-shadow: 1px 1px 10px black;}

#menu span {
	position:absolute;
	float:right;
	cursor:pointer;
	margin:10px;
	right:0;
	top:0;
	width:90px;
	color:white;
	font-size:90px;
	text-align:center;
	word-break: break-all;
}
#menu span:hover {
	width:100px;
}

.link{
	position:relative;
	margin:25px;
	top:0px;
	cursor:pointer;
}
#soldat {margin-top:10px;}
#mandrill:hover{
    -webkit-animation: jump 0.2s ease-out infinite alternate;
    animation: jump 0.2s ease-out infinite alternate;
}
#soldat:hover{
    -webkit-animation: jump 0.5s ease-out infinite alternate;
    animation: jump 0.5s ease-out infinite alternate;
}

@-webkit-keyframes jump {
	0% {top:0px;}
	100% {top:-10px;}
}
@keyframes jump {
	0% {top:0px;}
	100% {top:-10px;}
}

#contact {
	position:fixed;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.4);
	top:0;
	left:0;
    -webkit-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}
#contact .cache {
	width:100%;
	height:100%;
	top:0;
	left:0;
}
/* CO */
#contact .content {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	background-color:white;
	box-shadow:0 0 10px white;
	padding:40px;
}
#contact .meno {
    /*-webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
	-webkit-column-gap: 40px;
    -moz-column-gap: 40px;
    column-gap: 40px;
    -webkit-column-rule: 1px solid lightblue;
    -moz-column-rule: 1px solid lightblue; 
    column-rule: 1px solid lightblue;*/
}

#contactbt {
	cursor:pointer;
	margin-left:25px;
	margin-top:0px;
	font-size:25px;
	color:white;
}
#contactbt:hover {margin-left:30px;}

#cvbt { text-decoration:none; }
#cvbt p{
	position:absolute;
	cursor:pointer;
	margin-left:25px;
	margin-top:-10px;
	font-size:25px;
	color:white;
}
#cvbt p:hover {margin-left:30px;}

.show {opacity:1;}
.hide {
	opacity:0;
	pointer-events:none;
}

.float-left{
	float:left;
	margin-right:10px;
}

.meno q {
	font-style:italic;
}

.meno a {
	border:none;
}

.meno a:link {
	color:DarkSalmon ;
}

.meno a:visited {
	color:DarkSalmon ;
}

.meno a:hover {
	/*cursor:pointer;*/
}


.meno [-tip] {
	position: relative;
	display:inline;
	border-bottom:1px dotted pink;
}
.meno [-tip]:hover {
	border:1px solid orange;
	margin:-1px;
	background-color:rgba(250,250,100,0.1);
	cursor:help;
}

.meno [-tip]::after {
	/* important */
	content:attr(-tip);
	font-size:13px;
	min-width:100px;
	position: absolute;
	bottom: 100%;
	left: 50%;
	opacity: 0;
	visibility:hidden;
	transition: opacity 0.3s;
	/* --------- */
	
	background-color: rgba(50,50,50,0.8);
	color: white;
	border-bottom:2px solid orange;
	border-radius: 10px;
	border-bottom-left-radius:0;
	border-top-right-radius:0;
	padding:3px 8px;
	
}
.meno [-tip]:hover::after {opacity:1;visibility:visible;}