@CHARSET "ISO-8859-1";
@font-face {
    font-family: Shakle;
    src: url('font/Electro_Shackle.otf') format('opentype');
}
@font-face {
    font-family: SourceSansProLight;
    src: url('font/SourceSansPro-Light.ttf') format('truetype');
}
@font-face {
    font-family: SourceSansProRegular;
    src: url('font/SourceSansPro-Regular.ttf') format('truetype');
}
@font-face{
	font-family: FifeSymbol;
    src: url('font/fife.Dings.ttf') format('truetype');
}

*{
	margin: 0px;
	font-family: "SourceSansProLight";
	font-size: 20px;
	color: #000000;
}
html, body{
	height: 100%;
}
input, button, textarea { /* Firefox, Opera, Chrome */
    background: transparent;
	border: 1px solid #000;
}
:focus{ /*Safari*/
	outline: 0;
}
h1{
	margin: 20px 30% 20px 30%;
	font-weight: lighter;
	font-size: 40px;
}
h2{
	margin: 20px 30% 20px 30%;
	font-weight: lighter;
	font-size: 23px;
}
h3{
	text-align: left;
	margin: 20px 0px 20px 0px;
	font-weight: normal;
	font-size: 20px;
	color: #787878;
}
hr{
	width: 50%;
	margin: 20px auto;
	background: linear-gradient(to right, transparent, #777777, transparent);
	border: none;
	height: 1px;
}
a, a:hover, a:visited{
	color: white;
	text-decoration: none;
	color: #000000;
}
form>div{
	text-align: left;
	margin-top: 10px;
	margin-right: 10px;
}
form>div.float{
	float: left;
}
label{
	text-align: left;
	padding-right: 20px;
	visibility: hidden;
	font-size: 18px;
}
input{
	display: block;
	width: 100px;
	border-bottom: 1px solid #787878;
	border-right: 0;
	border-left: 0;
	border-top: 0;
	border-radius: 2px;
	margin-top: 0px;
	padding: 5px;
	background-color: transparent;/*#EEEEEE; rgba(0, 0, 0, 0.0); */
	transition: all 0.3s;
}
input:focus{
	background-color: #DDDDDD;	
	box-shadow: 0px 1px 10px #787878;
	border-bottom: 1px solid #e74c3c;
}
input.long{
	width: 300px;
}
select{
	display: block;
	border-bottom:  1px solid #787878;
	border-right: 0;
	border-left: 0;
	border-top: 0;
	border-radius: 2px;
	padding: 5px;
	background-color: rgba(0, 0, 0, 0.0);
	transition: all 0.3s;
}


/*--------------
COMMINGSOON
--------------*/
.commingsoon_bg{
	background: linear-gradient(#111111, #000000);
	min-height: 100%;
	min-width: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
}
.commingsoon_logo{
	background-image: url('media/logo_510_210.png');
	background-position: center;
	background-repeat: no-repeat;
	height: 210px;
	width: 510px;
	position: absolute;
	top: 50%;
	left: 50%;	
	margin-left: -255px;
	margin-top: -105px;
}
#btnCommingSoon{
	position: absolute;
	top: 70%;
	margin: 0 auto;
}
#candy{
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 10px;
}
.candy{
	height: 15px;
	position: relative;
	width: 14.25%;
	float: left;
}
.turquoise{background-color: #1abc9c;}
.emerald{background-color: #2ecc71;}
.peterriver{background-color: #3498db;}
.amethyst{background-color: #9b59b6;}
.wetasphalt{background-color: #34495e;}
.greensea{background-color: #16a085;}
.nephritis{background-color: #27ae60;}
.belizehole{background-color: #2980b9;}
.wisteria{background-color: #8e44ad;}
.midnightblue{background-color: #2c3e50;}
.sunflower{background-color: #f1c40f;}
.carrot{background-color: #e67e22;}
.alizarin{background-color: #e74c3c;}
.clouds{background-color: #ecf0f1;}
.concrete{background-color: #95a5a6;}
.orange{background-color: #f39c12;}
.pumpkin{background-color: #d35400;}
.pomegranate{background-color: #c0392b;}
.silver{background-color: #bdc3c7;}
.asbestos{background-color: #7f8c8d;}









.link{
	color: #3498db;
	transition: all 0.4s;
	cursor: pointer;
}
.link:hover{
	color: #2980b9;
}


.fife{
	font-family: "Shakle";
}
.symbol{
	font-family: "FifeSymbol";
}

.article_left{
	width: 75%;
	margin: auto;
}
.article_left img{
	float: left;
	height: 240px;
	width: 400px;
}
.article_left p{
	min-height: 240px;
	text-align: justify;
	padding-left: 420px;
}

.article_right{
	width: 75%;
	margin: auto;
}
.article_right img{
	height: 240px;
	width: 400px;
}
.article_right p{
	float: right;
	min-height: 240px;
	text-align: justify;
	padding-right: 420px;
}

.text{
	float: right;
	border: 1px solid black;
	max-width: 25%;
	min-width: 25%;
	width: 25%;
	text-align: justify;
}


/*--------------
HEADERNAVIGATION
--------------*/
.headernavi{
	position: fixed;
	width: 100%;
	background-color: rgba(17, 17, 17, 1)/* #111111 */;
	z-index: 99;
	box-shadow: 0px 1px 20px #787878;
}
.headernavi>a{
	float: left;
	text-decoration: none;
	color: #787878;
	font-size: 25px;
	font-family: "SourceSansProLight";
	padding: 8px 30px 8px 30px; /*top right bottom left*/
	transition: all 0.25s;
}
.headernavi>a:hover{
	color: #FFFFFF;	
	background-color: rgba(51, 51, 51, 1) /* #333333 */;
	border-bottom: 5px solid #333333;
}
.headernavi>a.account{
	font-family: "FifeSymbol";
	padding-top: 10px;
	right: 0px;
}
.headernavi>a.loggedin{
	font-family: "FifeSymbol";
	padding-top: 10px;
	right: 0px;
	color: rgba(231, 76, 60, 1.0);
}
.headernavi .fife{
	float: left;
	text-decoration: none;
	color: #787878;
	font-size: 26px;
	font-weight: lighter;
	font-family: "Shakle";
	padding: 8px 30px 8px 30px; /*top right bottom left*/
	transition: all 0.25s;
}
.headernavi .active_blue{
	color: #FFFFFF;
	background-color: #333333;
	border-bottom: 5px solid #3498db;
}
.dropmenu{
	padding: 10px;
	color: #FFFFFF;
	display: none;
	position: fixed;
	top: 45px;
	right: 10px;
	/* min-height: 200px;
	min-width: 200px; */
	background-color:  rgba(17, 17, 17, 1);
	border-radius: 5px;
	box-shadow: 0px 1px 20px #787878;
}
.dropmenu>div{
	color: #FFFFFF;
}

.ss1{background-image: url("media/bannerA.jpg");}
.ss2{background-image: url("media/banner2.jpg");}
.ss3{background-image: url("media/banner3.jpg");}
.ss4{background-image: url("media/banner4.jpg");}
.ss5{background-image: url("media/banner5.jpg");}

.section{
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	z-index: 0;
}
.subsection{
	min-height: 80%;
	background-color: #EEEEEE;
	box-shadow: 0px 0.5px 100px #777777;
	padding-bottom: 300px;
}
.contentwrapper{
	font-family: "SourceSansProLight";
	width: 100%;
	height: 100%;
	text-align: center;	
	padding-top: 100px;
}

.box{
	display: inline-block;
	width: 250px;
	min-width: 250px;
	max-width: 250px;
	height: 250px;
	min-height: 250px;
	max-height: 250px;
	border-radius: 2px;
	box-shadow: 0 1px 4px 0 rgba(0,0,0,0.4);
	margin: 5px 5px 5px 5px;
	position: relative; /*damit .box>div innerhalb box ist*/
}
.box>img{
	size: 250px;
	border-radius: 2px;
	opacity: 0.75;
	transition: all 0.5s;
}
.box>img:hover{
	opacity: 1.0;
}
.box>div{
	border-radius: 2px;
	background-color: rgba(52, 152, 219, 0.75);
	
	color: #FFFFFF;
	width: 100%;
	height: 125px;
	position: absolute;/*damit .box>div innerhalb box ist*/
	bottom: 0;/*damit .box>div innerhalb box ist*/
	display: none;
}
.box_small{
	display: inline-block;
	width: 150px;
	min-width: 150px;
	max-width: 150px;
	height: 50px;
	min-height: 50px;
	max-height: 50px;
	border-radius: 2px;
	box-shadow: 0 1px 4px 0 rgba(0,0,0,0.4);
	margin: 5px 5px 5px 5px;
	position: relative; /*damit .box>div innerhalb box ist*/
}
.box_small>img{
	width: 150px;
	border-radius: 2px;
	opacity: 0.75;
	transition: all 0.5s;
	vertical-align: middle;
}
.box_small>img:hover{
	opacity: 1.0;
}
.box_small>div{
	border-radius: 2px;
	background-color: rgba(52, 152, 219, 0.75);
	color: #FFFFFF;
	width: 100%;
	height: 125px;
	position: absolute;/*damit .box>div innerhalb box ist*/
	bottom: 0;/*damit .box>div innerhalb box ist*/
	display: none;
}

/*----
Wizard
----*/
.wizard_wrapper{
	width: 75%;
	height: 350px;
	margin: 20px auto;
	/* background-color: rgba(0, 0, 255, 0.2); */
	position: relative;
}
.wizard_navi{
	width: 100%;
	list-style-type: none;
	/* background-color: rgba(255, 0, 0, 0.2); */
	padding: 10px 0px 10px 0px;
}
.wizard_navi li{
	font-family: "FifeSymbol";
	font-size: 40px;
	display: inline;
	cursor: pointer;
	padding: 8px;
	margin-bottom: 20px;
	border-radius: 80px;	
}
.step{
	width: auto;
	vertical-align: bottom;
	position: relative;
	height: 100%;
}
.left_area{
	width: 80%;
	height: inherit;
	float: left;
}
.right_area{
	width: 20%;
	height: inherit;
	position: absolute;
	right: 0;
}


.stepnavi{
	position: absolute;
	bottom: 0px;
	width: 100%;
}
.left_navi{
	position: absolute;
	left: 0;
}
.right_navi{
	position: absolute;
	right: 0px;
}
.left{
	margin-left: 20px;
	position: absolute;
	left: 0px;
}
.bottom{
	position: absolute;
	bottom: 0px;
}

/*---------
COSTS BLOCK
---------*/
.costsummary{
	width: 180px;
	position: absolute;
	right: 0;
	top: 0;
	text-align: right;
}
.costsummary .costtotal{
	font-family: "SourceSansProRegular";
	font-size: 24px;
	font-weight: bold;
	border-bottom: 1px solid black;
	width: inherit;
	text-align: right;
}
.cost_position{
}
.position_desc{
	font-size: 14px;	
	float: left;
}
.position_cost{
	font-size: 14px;	
	text-align: right;
}


/*---------
color picker
---------*/
#colorpalette{
	margin: 0 auto;
	position: absolute;
	left: 300px;
}
.colorbutton{
	width: 40px;
	height: 40px;
	border-radius: 10px;
	cursor: pointer;
	float: left;
	margin-right: 3px;
}
/*red*/
.colorbutton.red {
	background-color: rgba(231, 76, 60, 0.5);
	transition: all 0.25s;
}
.colorbutton.red:hover {
	background-color: rgba(231, 76, 60, 1.0);
}
.colorbutton.red.selected{
	background-color: rgba(231, 76, 60, 1.0);
	background-image: url("asset/tick_white_22.png");
	background-position: center;
	background-repeat: no-repeat;
}

/*blue*/
.colorbutton.lightblue {
	background-color: rgba(52, 152, 219, 0.5);
	transition: all 0.25s;
}
.colorbutton.lightblue:hover {
	background-color: rgba(52, 152, 219, 1.0);
}
.colorbutton.lightblue.selected{
	background-color: rgba(52, 152, 219, 1.0);
	background-image: url("asset/tick_white_22.png");
	background-position: center;
	background-repeat: no-repeat;
}

/*yellow*/
.colorbutton.yellow {
	background-color: rgba(241, 196, 15, 0.5);
	transition: all 0.25s;
}
.colorbutton.yellow:hover {
	background-color: rgba(241, 196, 15, 1.0);
}
.colorbutton.yellow.selected{
	background-color: rgba(241, 196, 15, 1.0);
	background-image: url("asset/tick_white_22.png");
	background-position: center;
	background-repeat: no-repeat;
}

/*silver*/
.colorbutton.gray {
	background-color: rgba(189, 195, 199, 0.5);
	transition: all 0.25s;
}
.colorbutton.gray:hover {
	background-color: rgba(189, 195, 199, 1.0);
}
.colorbutton.gray.selected{
	background-color: rgba(189, 195, 199, 1.0);
	background-image: url("asset/tick_white_22.png");
	background-position: center;
	background-repeat: no-repeat;
}
/*green*/
.colorbutton.green {
	background-color: rgba(46, 204, 113, 0.5);
	transition: all 0.25s;
}
.colorbutton.green:hover {
	background-color: rgba(46, 204, 113, 1.0);
}
.colorbutton.green.selected{
	background-color: rgba(46, 204, 113, 1.0);
	background-image: url("asset/tick_white_22.png");
	background-position: center;
	background-repeat: no-repeat;
}
.colorbutton.black {
	background-color: rgba(0, 0, 0, 0.5);
	transition: all 0.25s;
}
.colorbutton.black:hover {
	background-color: rgba(0, 0, 0, 1.0);
}
.colorbutton.black.selected{
	background-color: rgba(0, 0, 0, 1.0);
	background-image: url("asset/tick_white_22.png");
	background-position: center;
	background-repeat: no-repeat;
}




/*-----
Buttons
-----*/
button.eyecatcher{
	text-decoration: none;
	font-size: 25px;
	padding: 10px 25px 10px 25px;
	border-width: 1px;
	border-style: solid;
	border-radius: 8px;	
	cursor: pointer;	
	transition: all 0.255s;
	position: relative;
}
/*white*/
button.eyecatcher.white{
	color: #FFFFFF;
	background-color: transparent;
	border-color: #FFFFFF;
}
button.eyecatcher.white:hover{
	color: #000000;
	background-color: #FFFFFF;
	border-color: transparent;
}
/*black*/
button.eyecatcher.black{
	color: #000000;
	background-color: transparent;
	border-color: #000000;
}
button.eyecatcher.black:hover{
	color: #FFFFFF;
	background-color: #000000;
	border-color: transparent;
}
/*blue*/
button.eyecatcher.blue{
	color: #2980b9;
	background-color: transparent;
	border-color: #2980b9;
}
button.eyecatcher.blue:hover{
	color: #FFFFFF;
	background-color: #2980b9;
	border-color: transparent;
}


button.fill{
	text-decoration: none;
	padding: 8px 20px 8px 20px;
	border-width: 1px;
	border-style: solid;
	border-radius: 8px;	
	cursor: pointer;	
	transition: all 0.255s;
	color: #000000;
}
button span{
	font-family: "FifeSymbol";
	font-size: 13px;
	color: #FFFFFF;
}

button.blue{
	color: #FFFFFF;
	background-color: #3498db;
	border-color: #3498db;
}
button.blue:hover{
	color: #FFFFFF;
	background-color: #2980b9;
	border-color: #2980b9;
}
button.red{
	color: #FFFFFF;
	background-color: #e74c3c;
	border-color: #e74c3c;
}
button.red:hover{
	color: #FFFFFF;
	background-color: #c0392b;
	border-color: #c0392b;
}
button.green{
	color: #FFFFFF;
	background-color: #27ae60;
	border-color: #27ae60;
}
button.green:hover{
	color: #FFFFFF;
	background-color: #2ecc71;
	border-color: #2ecc71;
}
button.purple{
	color: #FFFFFF;
	background-color: #8e44ad;
	border-color: #8e44ad;
}
button.purple:hover{
	color: #FFFFFF;
	background-color: #9b59b6;
	border-color: #9b59b6;
}

.overlay{
	display: none;
	min-width: 100%/*300px*/;
	min-height: 100%/*200px*/;
	background-color: rgba(0, 0, 0, 0.75);
	position: fixed;	
	color: white;
	top: 0;
	left: 0;
}
.overlay>div{
	background-color: rgba(238, 238, 238, 1);
	box-shadow: 0px 1px 10px #787878;
	border-radius: 5px;
	position: absolute;	
	color: white;
	top: 50%;
	left: 50%;
	padding: 20px 20px 20px 20px;
	margin: 0 auto 0 auto;
}
.message{
	display: none;
	font-size: 16px;
	border-radius: 3px;
	padding: 8px 5px 8px 5px;
	color: #FFFFFF;
}
.nok{
	background-color: rgba(231, 76, 60, 0.8);
}
.ok{
	background-color: rgba(39, 174, 96, 0.8);
}
.info{
	background-color: rgba(52, 152, 219, 0.8);
}





/*--------------------------------------*/






/*BACKEND*/
/*--------------
NAVIGATION
--------------*/
.tabnavi{
	position: fixed;
	width: 100%;
	z-index: 0;
	margin: 10px
}
.tabnavi>a{
	float: left;
	text-decoration: none;
	color: #787878;
	font-size: 20px;
	font-family: "SourceSansProLight";
	margin: 0px;
	padding: 8px 30px 8px 30px; /*top right bottom left*/
	/* transition: all 0.25s; */
}
.tabnavi>a.idle{
	color: #787878;
	border-top: 0px;
	border-right: 0px;
	border-bottom: 1px solid #DDDDDD;
	border-left: 0px;
	background-color: rgba(0, 0, 0, 0.01);
}
.tabnavi .active{
	color: #000000;
	background-color: #FFFFFF;
	border-top: 1px solid #DDDDDD;
	border-right: 1px solid #DDDDDD;
	border-bottom: 1px solid #FFFFFF;
	border-left: 1px solid #DDDDDD;
	
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;asdasd
}
.sectionwrapper{
	margin: 50px 0 0 0;
	padding: 20px 20px 0 20px;
	border-top: 1px solid #DDDDDD;
	z-index: 99;
}
.tableinput{
	border: 0;
	background-color: transparent;
	width: 90%;
}


/*TABLE*/
.table{
	width: 100%;	
	margin: 0;
}
.col-header{
	padding: 5px 0px 2px 0px;
	border-bottom: #777777 1px solid;
	font-size: 18px;
	height: 100%;
}
.col-body{
	padding: 5px 0px 5px 0px;
	border-bottom: #DDDDDD 1px solid;
	font-size: 18px;
	height: 100%;
	text-align: left;
	vertical-align: top;
}
.col-100{width: 100%;max-width: 100%;}
.col-090{width: 90%;max-width: 90%;}
.col-080{width: 80%;max-width: 80%;}
.col-070{width: 70%;max-width: 70%;}
.col-060{width: 60%;max-width: 60%;}
.col-050{width: 50%;max-width: 50%;}
.col-040{width: 40%;max-width: 40%;}
.col-030{width: 30%;max-width: 30%;}
.col-020{width: 20%;max-width: 20%;}
.col-010{width: 10%;max-width: 10%;}
.col-005{width: 5%;max-width: 5%;}