/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 15.05.2015, 08:25:26
    Author     : digital art media nova GmbH
*/
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(/css/font-awesome.min.css);
@import url(/css/selectboxit.css);
/* ########## Resets ########## */
@charset "UTF-8"; body,html,h1,h2,h3,h4,h5,h6,p,ul,ol,li{padding:0;margin:0;}body,html{width:100%;height:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}a{outline:none !important;text-decoration:none;}ol,ul,li{list-style:none;}.clear{clear:both;line-height:0;font-size:0;height:0;width:0;overflow:hidden;visibility:hidden;display:block;}p{cursor:text;}b,strong{font-weight:bold;}img{-ms-interpolation-mode:bicubic;}li{display:list-item;}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}.clearfix{display:inline-block;}* html .clearfix{height:1%;}.clearfix{display:block;}

#ri-grid{margin-top:90px;}
.ri-grid{
	margin: auto;
	position: relative;
	height: auto;
}

.ri-grid ul {
	list-style: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Clear floats by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */

.ri-grid ul:before,
.ri-grid ul:after{
	content: '';
    display: table;
}

.ri-grid ul:after {
    clear: both;
}

.ri-grid ul {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
} 

.ri-grid ul li {
	-webkit-perspective: 400px;
	-moz-perspective: 400px;
	-o-perspective: 400px;
	-ms-perspective: 400px;
	perspective: 400px;	
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
	display: block;
	overflow: hidden;
	background: #000;
}

.ri-grid ul li a{
	display: block;
	outline: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #333;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

/* Grid wrapper sizes */
.ri-grid-size-1{
	width: 100%;
}
.ri-grid-size-2{
	width: 100%;
}
.ri-grid-size-3{
	width: 100%;
	margin-top: 0px;
}

/* Shadow style */

.ri-loading-image{
	display: none;
}

.ri-grid-loading .ri-loading-image{
	position: relative;
	width: 30px;
	height: 30px;
	left: 50%;
	margin: 100px 0 0 -15px;
	display: block;
}


/* ########## */
	#yesorfail{position:relative;display:inline-block;}
	#yesorfail input[type=submit]{width:250px;margin-right:30px;display:inline-block;cursor:pointer;}
	#yesorfail textarea{width:500px;padding:15px;height:100px;resize:vertical;max-height:200px;min-height:50px;margin-bottom:20px;background:#444;border:1px solid #555;color:#fff;}
	.user-details, .event-details{padding:40px 0;}
	.user-picture{float:left;padding-right:40px;}
	.backlink{border-bottom:1px solid #444;padding:0 0 10px 0;}
	.backlink a:before{content:'« ';}
	#newEvents{padding-top:50px;}
	.event-details h3{color:#e51873;}


@media only screen and (max-width: 780px){
	#yesorfail textarea{width:100%;box-sizing:border-box;}
	#yesorfail input[type=submit]{width:100%;}
	#yesorfail input[type=submit]:first-child{margin-right:36%;}
	.user-picture{float:none;padding:0 0 30px 0;}
}

#newUserBox ul li{display:inline-block;width:10vw;padding:15px;box-sizing:border-box;}
#newUserBox ul li div{width:9vw;height:9vw;background-position:center !important;background-size:cover !important;text-align:center;border-radius:500px;overflow:hidden;border:1px solid #777;position:relative;}
#newUserBox ul li div a{position:absolute;bottom:0;background:rgba(0,0,0,0.7);left:0;text-align:center;right:0;padding:10px 0;}
#newUserBox ul li div a:hover{color:#fff;}

.templates{display:inline-block;margin-left:-20px;display:none;}
.templates.visible{display:inline-block;}
.templates li{cursor:pointer;}
.templates li:hover{color:#aaa;}
.templates li span{display:none;}
.templates-icon{display:inline-block;padding:4px 10px;color:#ccc;background:#999;cursor:pointer;position:absolute;top:1px;right:-20px;}

 /* ---- reset ---- */ 
 body{ margin:0; font:normal 75% Arial, Helvetica, sans-serif; }
 canvas{ display: block; vertical-align: bottom; } 
 /* ---- particles.js container ---- */ 
 #particles-js{ position:fixed; left: 0; right: 0; bottom: 0; top: 0;background-color: #FFF; background-image: url(http://2hot2pay.digital-art.de/images/01.jpg); 
 background-repeat: no-repeat; background-size: cover; background-position: 25% 25%; } 
 /* ---- stats.js ---- */ 
 .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } 
 .js-count-particles{ font-size: 1.1em; } 
 #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; }
  #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } 
 .count-particles{ border-radius: 0 0 3px 3px; }
 #overlay{
 	
    position: fixed;
    z-index: 2;
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
 	background: rgba(0,0,0,0.5) ;
 }

 #stats{
 	display: none;
 }

#root{position:relative;z-index:999;text-align:center;color:#eee; width: 100%;font-family: "Montserrat",sans-serif;}

#root h1{
	background: url(http://2hot2pay.digital-art.de/images/2hot2pay-signet.png) no-repeat center center;
/*	width: 184px;*/
	height: 180px;
	margin: 20px 0 10px 0;
	text-indent: -9999px;
}

#root .bodytext{
	margin: 10px;
}

.tx-powermail{
	width: 50%;
	margin: 0 auto;
}

.tx-powermail h3{
	text-transform: uppercase;
	font-size: 25px;
	color: #e51873;
	margin: 10px 0 30px 0;
}

.tx-powermail fieldset{
	border: none;
	margin-top: 20px;
}

.powermail_input, .powermail_field{
	/*INPUT-Fields*/
    float: left;
    width: 65%;
    
    background: #fff none repeat scroll 0 0;
    border: 1px solid #dadada;
    box-sizing: border-box;
    color: #767676;
    font-size: 16px;
    height: 45px;
    margin: 5px 0;
    padding: 5px;

}

.parsley-error{
	background-color: #E51873;
}
.parsley-errors-list{
	clear: both;
}

label{
	float: left;
    line-height: 45px;
    text-align: left;
    width: 30%;
	font-size: 15px;
/*	display: block;*/
}
.powermail_input[type="checkbox"], .register powermail_input[type="radio"] {width: 20px;margin:0;}
.powermail_input .register select {width: 30%;float: left;}
.powermail_submit{
	margin-left: 30%;
    background: #e51873 none repeat scroll 0 0;
    border: 0 none;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
}

legend{
	text-transform: uppercase;
	color: #e51873;
	font-size: 20px;
}
.selectboxit-container span, .selectboxit-container .selectboxit-options a {height: 45px; line-height: 50px;}

.powermail_fieldwrap{
	clear: both;
}

#powermail_fieldwrap_18 powermail_check_outer {
	position: relative;
	
}

#powermail_fieldwrap_18 fieldset{
	margin-top: 10px;
}

#powermail_fieldwrap_18 legend{
	display: none;
}

#powermail_fieldwrap_18 .powermail_check_inner_1 label{
	width: 80%;
	margin: 0 0 0 50px;
	line-height: 1.4;
	
}#powermail_field_marker #unter18{
	width: 65%;
	float: right;
	text-align: left;
}
#powermail_field_marker{
	display: block;
}
#powermail_fieldwrap_18 input{
	float: left;
}
#powermail_fieldwrap_20{
	text-align: left;
	margin-left: 80px;
	margin-bottom: 20px;
}
#powermail_fieldwrap_20 a,a{
	color: #E51873;
}
#powermail_fieldwrap_20 a:hover{
	text-decoration: underline;
}
#agb{
	margin: 0 auto;
	text-align: left;
	width: 50%;
	line-height: 170%;
	padding: 20px 5%;
	box-sizing: border-box;
}
#root #agb  h1{
	margin-top: 0;
}

#root #agb .bodytext:last-child{
	margin-bottom: 0;
}

#agb {
	background-color: #151515;
}
#agb ol li{
	list-style-type: decimal;
}
#agb a{
	color: #E51873;
}
#agb ol li{
	margin: 0 0 5px 40px;
}

#agb h2{
	text-transform: uppercase;
	margin: 60px 0 10px 0;
	
}
.powermail_fieldset_4 legend{
	display: none;
}
#powermail_fieldwrap_18{
	padding-left: 29.05%;
}
#powermail_fieldwrap_20{
	padding-left: 29.05%;
}
@media only screen and (max-width: 1050px){
	.tx-powermail{
		width: 100%;
	}
	#agb{
		width: 100%;
	}
/*	#powermail_field_marker #unter18 {
		text-indent: 0;
		padding-left: 30%;
	}*/
	#powermail_fieldwrap_18 {

		width: 66%;
	}
}
@media only screen and (max-width: 600px){
#powermail_fieldwrap_18 {
    padding-left: 0;
	width: 100%;
}
#powermail_fieldwrap_20{
	padding-left: 0;
}
}
@media only screen and (max-width: 500px){
	label{
		display: block;
		float: none;
		width: 100%;
	}
	
	.powermail_input, .powermail_field{
		width: 100%;
	}
/*	#particles-js{
		display: none;
	}*/
	body{background-color: #151515;}
	
	.powermail_submit{
		margin-left: 0;
		width: 100%;
	}

	#powermail_fieldwrap_20{
		margin-left: 60px;
	}
}