/*
Created from Athanasios Kountourgiotis
*/
body{
    font-family: 'Source Sans Pro',sans-serif;
	font-size: 18px;
	font-weight: 200;
	line-height: 30px;
	line-height: 46px;
	
}

#header{
position:fixed; 
top:0px;
background: url("https://cdn3.iconfinder.com/static/70cc853fb9ce81512c7178138efee065/assets/img/pro/promotion_bar_background.png")
 no-repeat scroll left top / cover #e44525;
width:100%; 
height:50px; 
left:0px;
}
.sub1{
	position:relative;
	font-family: "League Gothic","Bebas Neue","Arial Narrow",Arial,sans-serif;
	font-style: normal;
	font-weight: normal;
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
	text-align:center;
	border-bottom: 1px solid whiteSmoke;
	font-size: 46px;
	font-weight: 200;
	line-height: 30px;
	line-height: 46px;
	padding: 15px 3px;
}
.sub1 a{
	position:relative;
	font-family: "League Gothic","Bebas Neue","Arial Narrow",Arial,sans-serif;
	font-style: normal;
	font-weight: normal;
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
	font-size: 16px;
	font-weight: 200;
	line-height: 30px;
	line-height: 46px;
	padding: 15px 3px;
}
.sub1 img{
	position:relative;
	z-index:1;
}
#form{
	position:relative; 
	top:40px;
	width:100%; 
	height:400px; 
	left:0px;

}
form{
	position:relative;
	font-family: "League Gothic","Bebas Neue","Arial Narrow",Arial,sans-serif;
	
}
form label{
position:relative;
left:-90px;
top:5px;
 }

form input[type=text]{
	width:265px;
	height:50px;
	-moz-border-radius:10px;
	-webkit-border-radius: 10px; 
	-khtml-border-radius: 10px; 
	border-radius: 10px;
	box-shadow: 0 0 0 4px #55575c;
	
}

form input[type=text],
textarea{
	box-shadow: 0 0 0 4px rgba(155, 0, 0, 0.3);
	background-color: #cacafc !important;
	opacity: 8.0 !important;
    color: red !important;
	font-size:32px;
	text-align:center;
	margin:5px;
	font-family:LCD  !important;
    font-weight:bold !important;
	
}
form input[type=text],
textarea{
	-webkit-appearance:none;
	-moz-appearance:none;
}
form div{
	margin:0 0 0.8em 0;
}
form textarea{
	width:350px;
	height:100px;
	
}
label{
color:grey;
}
form select{
	width:265px;
	height:50px;
	-moz-border-radius:10px;
	-webkit-border-radius: 10px; 
	-khtml-border-radius: 10px; 
	border-radius: 10px;
	box-shadow: 0 0 0 4px rgba(155, 0, 0, 0.3);
	border:1px solid ####;
    	

}	
form input[type=submit]{
    height:55px;
	width:265px;
	font-size:16px;
	border:4px solid #ddd;
	background: rgb(225, 234, 235);
	background: -moz-repeating-linear-gradient(-45deg, 
	rgb(248, 247, 247) , 
	rgb(248, 247, 247) 15px, 
	rgb(225, 234, 235) 15px, 
	rgb(225, 234, 235) 30px, 
	rgb(247, 247, 247) 30px
	);
	background: -webkit-repeating-linear-gradient(-45deg, 
	rgb(247, 247, 247) , 
	rgb(247, 247, 247) 15px, 
	rgb(225, 234, 235) 15px, 
	rgb(225, 234, 235) 30px, 
	rgb(247, 247, 247) 30px
	);
	background: -o-repeating-linear-gradient(-45deg, 
	rgb(247, 247, 247) , 
	rgb(247, 247, 247) 15px, 
	rgb(225, 234, 235) 15px, 
	rgb(225, 234, 235) 30px, 
	rgb(247, 247, 247) 30px
	);
	background: repeating-linear-gradient(-45deg, 
	rgb(247, 247, 247) , 
	rgb(247, 247, 247) 15px, 
	rgb(225, 234, 235) 15px, 
	rgb(225, 234, 235) 30px, 
	rgb(247, 247, 247) 30px
	);
	color:#767676;
	padding: 5px;
	top:110px;
	left:350px;
	margin:10px;
	cursor: pointer;
	-moz-border-radius:10px; /* Firefox */
	-webkit-border-radius: 10px; /* Safari, Chrome */
	-khtml-border-radius: 10px; /* KHTML */
	border-radius: 10px; /* CSS3 */	
	box-shadow: 0 0 0 4px #55575c;
	-webkit-animation: animate-bg 5s linear infinite;
	-moz-animation: animate-bg 5s linear infinite;
	
}
.fieldset{
	position:relative;
	#background: #f7f0f3;
	width:100%;
	height:auto;
	left:0px;
}
.bottom{
	position:relative;
	background: #55575c;
	-moz-border-radius:10px; /* Firefox */
	-webkit-border-radius: 10px; /* Safari, Chrome */
	-khtml-border-radius: 10px; /* KHTML */
	border-radius: 10px; /* CSS3 */	
}
/*animated button*/
*, *:after, *:before {
    box-sizing: border-box;
}
*, *:after, *:before {
    box-sizing: border-box;
}
.dummy{
	border-top:1px solid grey;
	background:grey;
	color:white;
}

legend{
	color:grey;
}
.error2{
	position:fixed;
	width:100%;
	top:60px;
	height:auto;
	text-align:center;
	font-size:42px;
	color:grey;
	background:#fff 50%;
	box-shadow: 1px 5px 5px #888888;
	padding:10px 10px 10px 0%;
	z-index:200;
	#border:1px solid #f5aca6;
	z-index:2;
	-webkit-animation:myfirst 1s; /* Chrome, Safari, Opera */
	animation:myfirst 1s;
}
/* Standard syntax */
@-webkit-keyframes myfirst {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes myfirst {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
header{
	position:fixed;
	top:0px;
	left:0px;
	background:white;
	width:100%;
	height:60px;
	z-index:2;
	box-shadow: 1px 5px 5px #888888;
}
header img{
	position:fixed;
	top:-5px;
}
.message
{
		-webkit-background-size: 40px 40px;
		-moz-background-size: 40px 40px;
		background-size: 40px 40px;			
		background-image: -webkit-gradient(linear, left top, right bottom,
								color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
								color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
								color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
								to(transparent));
		background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
							transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
							transparent 75%, transparent);
		background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
							transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
							transparent 75%, transparent);
		background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
							transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
							transparent 75%, transparent);
		background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
							transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
							transparent 75%, transparent);
		background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
							transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
							transparent 75%, transparent);
								
		 -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
		 -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);		
		 box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
		 width: 100%;
		 border: 1px solid;
		 color: #fff;
		 top:60px;
		 padding: 15px;
		 left:0px;
		 position: fixed;
		 _position: absolute;
		 text-shadow: 0 1px 0 rgba(0,0,0,.5);
		 -webkit-animation: animate-bg 5s linear infinite;
		 -moz-animation: animate-bg 5s linear infinite;
		 z-index:200;
}

.info
{
		 background-color: #4ea5cd;
		 border-color: #3b8eb5;
}

.error
{
		 background-color: #de4343;
		 border-color: #c43d3d;
}
		 
.warning
{
		 background-color: #eaaf51;
		 border-color: #d99a36;
		 text-align:center;
}

.success
{
		 background-color: #61b832;
		 border-color: #55a12c;
		 text-align:center;
		 font-size:18px;
}

.message h3
{
		 margin: 0 0 5px 0;													 
}

.message p
{
		 margin: 0;													 
}

@-webkit-keyframes animate-bg
{
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
}


@-moz-keyframes animate-bg 
{
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
}


#trigger-list
{
		 text-align: center;
		 margin: 100px 0;
		 padding: 0;
}

#trigger-list li
{
		 display: inline-block;
		 *display: inline;
		 zoom: 1;
}

#trigger-list .trigger
{
		 display: inline-block;
		 background: #ddd;
		 border: 1px solid #777;
		 padding: 10px 20px;
		 margin: 0 5px;
		 font: bold 12px Arial, Helvetica;
		 text-decoration: none;
		 color: #333;
		 -moz-border-radius: 3px;
		 -webkit-border-radius: 3px;
		 border-radius: 3px;
}

#trigger-list .trigger:hover
{
		background: #f5f5f5;
}

/*--------------------------------------*/

.centered
{
		 text-align: center;
}

.twitter-follow-button
{
		 position: relative;
		 top: 7px;
}
.bottom_bar{
    left:0px;
	bottom:0px;
	text-align:center;
    position:relative;
	width:100%;
	border-top:1px solid grey;
	background:grey;
	color:white;
}
.head_bar img{
	position:absolute;
	right:20px;
	top:7px;
}
.right_menu{
	right:0px;
	width:72px;
	height:72px;

}

.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}
.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 400px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
}
.close {
	background: #606061;
	color: #FFFFFF;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

/*----------------------------------*/
.form2{
	position:relative; 
	top:-40px;
	width:100%; 
	height:400px; 
	left:0px;

}
.form2{
	position:relative;
	font-family: "League Gothic","Bebas Neue","Arial Narrow",Arial,sans-serif;
	
}
.form2 label{
position:relative;
left:-50px;
top:0px;
 }

.form2 input[type=text]{
	width:265px;
	height:50px;
	-moz-border-radius:10px;
	-webkit-border-radius: 10px; 
	-khtml-border-radius: 10px; 
	border-radius: 10px;
	box-shadow: 0 0 0 4px #55575c;
	
}

.form2 input[type=text],
textarea{
	box-shadow: 0 0 0 4px rgba(155, 0, 0, 0.3);
	background-color: #cacafc !important;
	opacity: 8.0 !important;
    color: red !important;
	font-size:32px;
	text-align:center;
	
	font-family:LCD  !important;
    font-weight:bold !important;
	
}
.form2 input[type=text],
textarea{
	-webkit-appearance:none;
	-moz-appearance:none;
}
.form2 div{
	margin:0 0 0.8em 0;
}
.form2 textarea{
	width:350px;
	height:100px;
	
}
label{
color:grey;
}
.form2 select{
	width:265px;
	height:40px;
	-moz-border-radius:10px;
	-webkit-border-radius: 10px; 
	-khtml-border-radius: 10px; 
	border-radius: 10px;
	box-shadow: 0 0 0 4px rgba(155, 0, 0, 0.3);
	border:1px solid ####;
    	

}	
.form2 input[type=submit]{
    height:55px;
	width:265px;
	font-size:16px;
	border:4px solid #ddd;
	background: rgb(225, 234, 235);
	background: -moz-repeating-linear-gradient(-45deg, 
	rgb(248, 247, 247) , 
	rgb(248, 247, 247) 15px, 
	rgb(225, 234, 235) 15px, 
	rgb(225, 234, 235) 30px, 
	rgb(247, 247, 247) 30px
	);
	background: -webkit-repeating-linear-gradient(-45deg, 
	rgb(247, 247, 247) , 
	rgb(247, 247, 247) 15px, 
	rgb(225, 234, 235) 15px, 
	rgb(225, 234, 235) 30px, 
	rgb(247, 247, 247) 30px
	);
	background: -o-repeating-linear-gradient(-45deg, 
	rgb(247, 247, 247) , 
	rgb(247, 247, 247) 15px, 
	rgb(225, 234, 235) 15px, 
	rgb(225, 234, 235) 30px, 
	rgb(247, 247, 247) 30px
	);
	background: repeating-linear-gradient(-45deg, 
	rgb(247, 247, 247) , 
	rgb(247, 247, 247) 15px, 
	rgb(225, 234, 235) 15px, 
	rgb(225, 234, 235) 30px, 
	rgb(247, 247, 247) 30px
	);
	color:#767676;
	padding: 5px;
	top:90px;
	left:350px;
	margin:10px;
	cursor: pointer;
	-moz-border-radius:10px; /* Firefox */
	-webkit-border-radius: 10px; /* Safari, Chrome */
	-khtml-border-radius: 10px; /* KHTML */
	border-radius: 10px; /* CSS3 */	
	box-shadow: 0 0 0 4px #55575c;
	-webkit-animation: animate-bg 5s linear infinite;
	-moz-animation: animate-bg 5s linear infinite;
	
}
