html {
  position: relative;
  min-height: 100%;
}
body{
	/*background: url( 'img/flowlines2white-grey.jpg' ) no-repeat center center fixed;*/
	background-color: #363636;
	color: #c0c0c0;
	font-size: 14px;
	/*margin: 10px;*/
	/* padding for bootstrap nav bar */
	padding-bottom: 30px;
	padding-top: 70px;
	/* margin bottom for bootstrap sticky footer */
	margin-bottom: 15px;
	height:100%;
}
.clearall {
	clear:both;
}
.right {
	text-align: right;
}
.left {
	text-align: left;
}
.center {
	text-align: center;
}
.italic {
	font-style: italic;
}
.block {
	background-color:rgba(0,0,0,0.7);
	padding-top: 15px;
	padding-bottom: 15px;
}
.border-whiteround {
	border: 2px solid white;
	border-radius: 15px;
}
.border-transround {
	border: 2px solid transparent;
	border-radius: 15px;
}
.navbar-brand img {
	height:32px; 
	float:left; 
	margin-top:-5px; 
	margin-right:5px;
}

.hideme {
	display: none;
}

.fullpage .row li .text, .fullpage .row ul .text {
	font-size: 80%;
}

.fullpage .row li .text-contact {
	font-size: 15px;
	color: #c0c0c0;
}

.small {
	font-size: 85%;
}

.fwidth {
	width: 100%;
}

.fwidth90 {
	width: 90%;
}
h1 {
	margin:0;
	font-size: 48px;
}

h2 {
	margin:0;
	font-size: 32px;
}

#itbusol {
	margin:0;
	font-size: 30px;
}

h3 {
	margin:0;
	font-size: 26px;
}

header > h1 {
	text-align:center;
	margin-top: 70px;
}
header > h2 {
	text-align:center;
	margin-top: 10px;
}

.row div h2 {
	margin-top: 15px;
	margin-bottom: 15px;
	font-size: 6.5mm;
}

body > footer {
	/*
	position: absolute;
	bottom: 0;
	margin-bottom: 2px;
	*/
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 15px;
	font-size: 10px;
	color: #808080;
	padding-left: 10px;
}

img.design2budget-logo, img.cubic-zebra-logo {
	height: 40px;
	display:inline-block;
	margin:0;
	padding:0;
}
img.cubic-zebra-logo {
	height: 30px;
}
a.bondroid-logo {
	display: block;
}
div.bondroid-logo {
}
img.bondroid-logo {
	width: 107px;
	float:left;
	display: inline;

}
span.bondroid-logo {
	display: block;
	min-height: 140px;
	height: 140px;
	width: 100%;
	vertical-align: middle;
	margin-left: 140px;
}

h1.design2budget-logo, h2.design2budget-logo, h2.cubic-zebra-logo {
	height: 30px;
	font-size: 20px;
	display:inline-block;
	/*width: 140px;*/
	margin:0;
	padding:0;
}

.btn-default {
  text-shadow: 0 1px 0 #fff;
  background-image: -webkit-linear-gradient(top, #fff 0%, #ACCDE2 100%);
  background-image:      -o-linear-gradient(top, #fff 0%, #ACCDE2 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ACCDE2));
  background-image:         linear-gradient(to bottom, #fff 0%, #ACCDE2 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffACCDE2', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-repeat: repeat-x;
  border-color: #dbdbdb;
  border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus {
  background-color: #ACCDE2;
  background-position: 0 -15px;
}
.btn-default:active,
.btn-default.active {
  background-color: #ACCDE2;
  border-color: #dbdbdb;
}


.btn-dark {
  text-shadow: 0 1px 0 #fff;
  background-image: -webkit-linear-gradient(top, #fff 0%, #3f3D32 100%);
  background-image:      -o-linear-gradient(top, #fff 0%, #3f3D32 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#3f3D32));
  background-image:         linear-gradient(to bottom, #fff 0%, #3f3D32 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#101010ff', endColorstr='#3f3D32E2', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-repeat: repeat-x;
  border-color: #dbdbdb;
  border-color: #ccc;
}
.btn-dark:hover,
.btn-dark:focus {
  background-color: #3f3D32;
  background-position: 0 -15px;
}
.btn-dark:active,
.btn-dark.active {
  background-color: #3f3D32;
  border-color: #dbdbdb;
}

/* got from https://html5devgal.wordpress.com/2013/05/29/vertically-and-horizontally-center-with-twitter-bootstrap-responsive/ */
/*html, body{height:100%; margin:0;padding:0}*/
 
.container-fluid{
  height:100%;
  display:table;
  width: 100%;
  padding: 0;
}
 
.row-fluid {height: 100%; display:table-cell; }

.row-vmiddle {
	vertical-align: middle;
}

.centering {
  float:none;
  margin:0 auto;
}

.pcontent {
	margin-left: 10px;
}

.pcontent > section {
	margin-left: 15px;
	margin-bottom: 30px;
}

.pcontent > h1, .pcontent > h2, .pcontent > h3, .pcontent > p {
	margin-bottom: 15px;
}

div.support {
	width:430px;
	min-width:430px;
}

.support .btn label {
	min-width:35mm;
}

.support .btn input, .support .btn textarea {
	width: 240px;
}

.floatright {
	float:right;
}

.floatleft {
	float:left;
}

.inlineblock {
	display: inline-block;
}

.btn input[type='text'], .btn input[type='email'], .btn textarea {
	color: black;
}

/*
**==== FULLPAGE ====
*/

body.fullpage {
	padding-top: 50px;
}

body > section, body > section.fullpage {
	padding-left: 30px;
	padding-right: 30px;
	margin-top: 10px;
	background-color: #eff3f5;
	text-align: center;
}

body > section.fullpage {
	background-color: transparent;
	color: #eff3f5;
	margin-top: 0;
	padding-top: 10px;
	padding-left: 0;
	padding-right: 0;
	min-height: 500px;
}

#m2.fullpage {
	padding-left: 30px;
	padding-right: 30px;
}
h2.fullpage {
	font-size: 9mm;
}

p.fullpage {
	font-size: 5mm;
	line-height: 1.5;
	margin-bottom: 20px;
}
.spacetop {
	margin-top: 50px;
}
.spaceleft {
	margin-left: 50px;
}

p.bigger, section.fullpage ul, section.fullpage li {
	font-size: 6mm;
}

.features .text {
	margin-top: 20px;
	margin-left: 40px;
	font-size: 5mm;
	font-weight: 200;
}

.textnorm {
	font-size: 20px;
	font-weight: 300;
}

section.fullpage li {
	margin-top:10px;
}

section.fullpage ul {
	list-style: none;
}
section.fullpage ul li:before {
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0); 
	content: "\f055"; 
	font-size: 170%; /* or whatever */
	padding-right: 10px;
}
section.fullpage ul li.fa-check:before {
	content: "\f00c"; 
}
section.fullpage ul li.fa-times:before {
	content: "\f00d"; 
}
section.fullpage ul li.none:before {
	content: ""; 
	padding-right: 0;
}
section.fullpage ul li.col1:before {
	color: #09afdf;
}

section.fullpage ul li.col2:before {
	color: #097fdf;
}

section.fullpage ul li.col3:before {
	color: #09df7f;
}
section.fullpage ul li.col4:before {
	color: #df397f;
}
section.fullpage  .colordrk ul li.col1:before {
	color: #393f4f;
}

ul.normfontsize li {
	font-size:80%;
}

.col1 .headline, .color1b {
	color: #198fdf;
}

.col2 .headline, .color2b {
	color: #494faf;
}
.col3 .headline, .color3 {
	color: #09af5f;
}
.col4 .headline, .color4 {
	color: #af095f;
}

.color1, section.cubiczebra-title-smartphone ul li.col1:before {
	color: #e8f8ef;
}
.color2, section.cubiczebra-title-smartphone ul li.col2:before {
	color: #dce3f6;
}
section.cubiczebra-title-wuerfel ul li.col1:before {
	color: #e8f8ef;
}

.colordrk {
	color: rgb(57, 65, 74);
}
.colordark {
	color: rgb( 37, 55, 84) ;
}

.nocolor {
	color: inherit;
}
.bgcolordarktrans {
	background-color:rgba(0,0,0,0.5);
}
.bgcolordarktrans.darker {
	background-color:rgba(0,0,0,0.8);
}
/*
http://www.cssmatic.com/gradient-generator#%27\-moz\-linear\-gradient\%28left\%2C\%20rgba\%2818\%2C38\%2C0\%2C0\.52\%29\%200\%25\%2C\%20rgba\%2822\%2C48\%2C0\%2C0\.88\%29\%20100\%25\%29\%3B%27
*/
.bgcolorgreengrad {
	background: rgba(18,38,0,0.52);
	background: -moz-linear-gradient(left, rgba(18,38,0,0.52) 0%, rgba(22,48,0,0.88) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(18,38,0,0.52)), color-stop(100%, rgba(22,48,0,0.88)));
	background: -webkit-linear-gradient(left, rgba(18,38,0,0.52) 0%, rgba(22,48,0,0.88) 100%);
	background: -o-linear-gradient(left, rgba(18,38,0,0.52) 0%, rgba(22,48,0,0.88) 100%);
	background: -ms-linear-gradient(left, rgba(18,38,0,0.52) 0%, rgba(22,48,0,0.88) 100%);
	background: linear-gradient(to right, rgba(18,38,0,0.52) 0%, rgba(22,48,0,0.88) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#122600', endColorstr='#163000', GradientType=1 );
}

.bgcolorvioletgrad {
	background: rgba(86,82,112,0.65);
	background: -moz-linear-gradient(left, rgba(86,82,112,0.65) 0%, rgba(66,65,125,0.58) 23%, rgba(62,45,140,0.5) 51%, rgba(10,3,33,0.36) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(86,82,112,0.65)), color-stop(23%, rgba(66,65,125,0.58)), color-stop(51%, rgba(62,45,140,0.5)), color-stop(100%, rgba(10,3,33,0.36)));
	background: -webkit-linear-gradient(left, rgba(86,82,112,0.65) 0%, rgba(66,65,125,0.58) 23%, rgba(62,45,140,0.5) 51%, rgba(10,3,33,0.36) 100%);
	background: -o-linear-gradient(left, rgba(86,82,112,0.65) 0%, rgba(66,65,125,0.58) 23%, rgba(62,45,140,0.5) 51%, rgba(10,3,33,0.36) 100%);
	background: -ms-linear-gradient(left, rgba(86,82,112,0.65) 0%, rgba(66,65,125,0.58) 23%, rgba(62,45,140,0.5) 51%, rgba(10,3,33,0.36) 100%);
	background: linear-gradient(to right, rgba(86,82,112,0.65) 0%, rgba(66,65,125,0.58) 23%, rgba(62,45,140,0.5) 51%, rgba(10,3,33,0.36) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565270', endColorstr='#0a0321', GradientType=1 );
}

.bgcolorgreygrad {
	background: rgba(226,226,226,0.7);
	background: -moz-linear-gradient(left, rgba(226,226,226,0.7) 0%, rgba(219,219,219,0.62) 23%, rgba(209,209,209,0.53) 51%, rgba(254,254,254,0.36) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(226,226,226,0.7)), color-stop(23%, rgba(219,219,219,0.62)), color-stop(51%, rgba(209,209,209,0.53)), color-stop(100%, rgba(254,254,254,0.36)));
	background: -webkit-linear-gradient(left, rgba(226,226,226,0.7) 0%, rgba(219,219,219,0.62) 23%, rgba(209,209,209,0.53) 51%, rgba(254,254,254,0.36) 100%);
	background: -o-linear-gradient(left, rgba(226,226,226,0.7) 0%, rgba(219,219,219,0.62) 23%, rgba(209,209,209,0.53) 51%, rgba(254,254,254,0.36) 100%);
	background: -ms-linear-gradient(left, rgba(226,226,226,0.7) 0%, rgba(219,219,219,0.62) 23%, rgba(209,209,209,0.53) 51%, rgba(254,254,254,0.36) 100%);
	background: linear-gradient(to right, rgba(226,226,226,0.7) 0%, rgba(219,219,219,0.62) 23%, rgba(209,209,209,0.53) 51%, rgba(254,254,254,0.36) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=1 );
}

.bgcolorredgrad {
	background: rgba(239,197,202,0.79);
	background: -moz-linear-gradient(left, rgba(239,197,202,0.79) 0%, rgba(210,75,90,0.7) 19%, rgba(186,39,55,0.45) 70%, rgba(241,142,153,0.3) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(239,197,202,0.79)), color-stop(19%, rgba(210,75,90,0.7)), color-stop(70%, rgba(186,39,55,0.45)), color-stop(100%, rgba(241,142,153,0.3)));
	background: -webkit-linear-gradient(left, rgba(239,197,202,0.79) 0%, rgba(210,75,90,0.7) 19%, rgba(186,39,55,0.45) 70%, rgba(241,142,153,0.3) 100%);
	background: -o-linear-gradient(left, rgba(239,197,202,0.79) 0%, rgba(210,75,90,0.7) 19%, rgba(186,39,55,0.45) 70%, rgba(241,142,153,0.3) 100%);
	background: -ms-linear-gradient(left, rgba(239,197,202,0.79) 0%, rgba(210,75,90,0.7) 19%, rgba(186,39,55,0.45) 70%, rgba(241,142,153,0.3) 100%);
	background: linear-gradient(to right, rgba(239,197,202,0.79) 0%, rgba(210,75,90,0.7) 19%, rgba(186,39,55,0.45) 70%, rgba(241,142,153,0.3) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efc5ca', endColorstr='#f18e99', GradientType=1 );
}
.bgcoloryellow {
background: rgba(222,215,199,0.78);
background: -moz-linear-gradient(left, rgba(222,215,199,0.78) 0%, rgba(241,231,103,0.9) 99%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(222,215,199,0.78)), color-stop(99%, rgba(241,231,103,0.9)));
background: -webkit-linear-gradient(left, rgba(222,215,199,0.78) 0%, rgba(241,231,103,0.9) 99%);
background: -o-linear-gradient(left, rgba(222,215,199,0.78) 0%, rgba(241,231,103,0.9) 99%);
background: -ms-linear-gradient(left, rgba(222,215,199,0.78) 0%, rgba(241,231,103,0.9) 99%);
background: linear-gradient(to right, rgba(222,215,199,0.78) 0%, rgba(241,231,103,0.9) 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ded7c7', endColorstr='#f1e767', GradientType=1 );
}

.bgcolorvioletgrad .col1 .nocolor {
	color: #e8f8ef;
}
.bgcolorvioletgrad .color1b {
	color: white;
}
.bgcolorvioletgrad .col2 .headline {
	color: #b9bff0;
}
.bgcolorvioletgrad .col3 .headline {
	color: #09df7f;
}
.bgcolordarktrans .col3 .headline {
	color: #09df7f;
}
.bgcolorredgrad .col2 .headline {
	color: #242173;
}
section.fullpage .pagehead {
	background-color: #09afdf;
	color: white;
	min-height: 100px;
	font-size: 7mm;
	text-align: right;
	padding-top: 15px;
	padding-bottom: 15px;
}


body > section.cubiczebra-title-smartphone  h1, body > section.cubiczebra-title-smartphone  h2  {
	display: inline-block;
	float:right;
	text-align: right;
	min-width: 285px;
}

body > section.cubiczebra-title-smartphone  h2 {
	border-top: 1px solid #d0d0d0;
	color: #efefef;
}

body > section.cubiczebra-title-smartphone  h1 {
	color: white;
	font-size: 55px;
}

body > section.cubiczebra-title {
	background-color:  rgba(150,140,139,0.7); 
	background-size: cover;
	background-repeat: no-repeat;
}

/*
section.fullpage h1.right:after, section.fullpage h2.right:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
*/
body > section.cubiczebra-title-smartphone {
	/*background-color:  linear-gradient(to bottom right, rgba(150,140,139,0.7), rgba(100,90,89,0.7) ); */
	/*background-color:  linear-gradient(to bottom right, red, blue ); */
	background-color:  rgba(150,140,139,0.7); 
	/*background-image: url('./img/cubic-zebra_it-business-solutions_title1a.jpg');*/
	background-image: url('./img/cubic-zebra_it-business-solutions_title1b2.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}
body > section.cubiczebra-title-design2budget {
	background-color:  rgba(52,55,69,0.7); 
	background-image: url('./img/design2budget-Angebote-Rechnungen-auf-Tablet-fuer-Elektriker-und-Handwerk.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}
body > section.cubiczebra-title-offercube {
	background-color:  rgba(52,55,69,0.7); 
	background-image: url('./img/cubic-zebra_offer-cube_carpenter_white-crop.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}
body > section.cubiczebra-title-cashcube {
	background-color:  rgba(52,55,69,0.7); 
	background-image: url('./img/cubic-zebra_offer-cube_example_tailor.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}

body > section.cubiczebra-title-consulting {
	background-color:  rgba(86,96,83,0.7); 
	background-image: url('./img/cubic-zebra_it-business-solutions_title2a.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}
body > section.cubiczebra-title-softwaresolutions {
	background-color:  rgba(86,96,83,0.7); 
	background-image: url('./img/cubic-zebra_it-business-solutions_title3a.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}
body > section.cubiczebra-title-massgeschneidert {
	background-color:  rgba(86,96,83,0.7); 
	background-image: url('./img/cubic-zebra_massgeschneiderte_it_loesungen.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	/*color: #4c4c4c;*/
}
body > section.cubiczebra-title-hosting {
	background-color:  rgba(70,137,115,0.7); 
	background-image: url('./img/cubic-zebra_it-business-solutions_title4a.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}
body > section.cubiczebra-title-qtagme {
	background-color:  rgba(86,96,83,0.7); 
	background-image: url('./img/qtagme-example-gewinnspiel-1.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}
body > section.cubiczebra-title-wuerfel {
	background-color: #eff3f5;
	background-image: url('./img/cubic-zebra_offer-cube_wuerfel-big-k.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	color: rgb( 77, 85, 104) ;
}
section.cubiczebra-title-wuerfel h2.fullpage, h1.cubiczebra-title-wuerfel, h2.cubiczebra-title-wuerfel {
	color: white;
}


body > section.cubiczebra-title-referenzen-kastner-dronia {
	background-color:  rgba(70,137,115,0.7); 
	background-image: url('./img/referenzen/offer-cube4johanna-soeren-k.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}
img.cubiczebra-title-referenzen-person {
	width: 100%;
	border-radius: 50%;
	border: 1px solid white;
}
body > section.cubiczebra-title-referenzen-mindconsole-camera {
	background-color:  rgba(70,137,115,0.7); 
	background-image: url('./img/referenzen/offer-cube4mindconsole-camera-k.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}


.darkbox a:hover :not(.btn), a.darkbox:hover {
	color: #539ac7;
}

section.cubiczebra-title-design2budget .pagehead {
	background-color:rgba(0,0,0,0.8);
}
section.title-bondroid {
	background-color:  rgba(70,137,115,0.7); 
	background-image: url('./img/bondroid-banner_wood.jpg');
}

body > section.cubic-zebra_cash-cube_tobacco {
	background-image: url('./img/cubic-zebra_cash-cube_tobacco2-crop.jpg');
}

body > section.cubic-zebra_cash-cube_bondrucker {
	background-image: url('./img/cash-cube_bondrucker.jpg');
}

body > section.cubic-zebra_cash-cube-handy_blue {
	background-image: url('./img/cubic-zebra_cash-cube-handy_blue_crop2.jpg');
}
body > section.cubic-zebra_offer-cube_mobile_cropblue_wide {
	background-image: url('./img/cubic-zebra_offer-cube_mobile_cropblue_wide.jpg');
}

body > section.cubic-zebra_offer-cube_handy_cropblue_left_wide {
	background-image: url('./img/cubic-zebra_offer-cube_handy_cropblue_left_wide.jpg');
}
body > section.cubic-zebra_contact_mobile-blue {
	background-image: url('./img/cubic-zebra_contact_mobile-blue-1920.jpg');
}
body > section.cubic-zebra_agreements-wide {
	background-image: url('./img/cubic-zebra_agreements-wide.jpg');
	color: rgb( 77, 85, 104) ;
}
/*
** contents for fullpagers offer-cube
*/

body > section.design2budget-mang_mobile_blue-wide {
	background-image: url('./img/design2budget-mang_mobile_blue-wide.jpg');
	background-color:  #0e1444; 
}

body > section.cubic-zebra_offer-cube_warengruppen_tablet_blue-wide  {
	background-image: url('./img/cubic-zebra_offer-cube_warengruppen_tablet_blue-wide.jpg');
	background-color:  #0e1444; 
}

body > section.cubic-zebra_offer-cube_warengruppen_tablet_blue-wide .headline  {
	color: white;
	/*font-weight: bold;*/
}
body > section.cash-cube-mang_white-tablet_pay-wide  {
	background-image: url('./img/cash-cube-mang_white-tablet_pay-wide.jpg');
	background-color:  #670806; 
}

body > section.cubic-zebra_offer-cube_example_woodwork {
	background-image: url('./img/cubic-zebra_offer-cube_example_woodwork.jpg');
	background-color:  #b0aeaf; 
}
body > section.cubic-zebra_offer-cube_mobilephone_ordermanagement-wide {
	background-image: url('./img/cubic-zebra_offer-cube_mobilephone_ordermanagement-wide.jpg');
	background-color:  #670806; 
}




body > section.dark1 {
	background-color: #20202a;
}

body > section.blue {
	background-color: blue;
}

body > section.green {
	background-color: green;
}

body > section.grey {
	background-color: #eff3f5;
	color: rgb( 77, 85, 104) ;
}
.tcol4grey {
	color: rgb( 77, 85, 104) ;
}
.tcol4grey a {
	color: rgb( 37, 55, 64) ;
}

body > section.darkblue {
	background-color: #0c1341;
}


/*
** Modal
*/
.modal-content {
	color: #393930;
}

/*
** from design2budget.at
*/
.btn-group .btn, .input-group .btn {
    -moz-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    background-color: #fff;
    border-color: #ccc;
    color: #333;
}
.input-group .btn:hover {
    background-color: #00FF44;
    transition: all 0.2s ease-in-out 0s;
}
.input-group input {
	margin-bottom: 5px;
}

.modal-body .input-group {
	display: block;
}

.fbox .input-group input, 
.modal-body .input-group input, .modal-body .input-group textarea {
	width:90%;
}

.btn-group button.active {
	background-color: #00FF44;
}


.cpointer {
	cursor: pointer;
}

.cerror {
    background-color: #ff7f7f;
}

.cblue {
    background-color: #097fdf;
}

.fbox:hover .cbluehover, .cbluehover:hover {
    background-color: #39bfff;
}

.cgreen {
    background-color: #44cc44;
	color: white;
}

.fbox:hover .cgreenhover, .cgreenhover:hover {
    background-color: #00FF44;
}

.pricelist {
	font-size: 16px;
}
.pricelist thead tr th {
	padding-bottom: 10px;
}
.pricelist tr td, .pricelist tr th {
	padding-left: 5px; 
	padding-right: 5px; 
}
.pricelist tr:nth-child(2n) td {
    padding-bottom: 20px;
}
.pricelist tr:nth-child(2n+1) td {
    background-color: #ebeff1;
}

.row .screenshot-mang {
	margin-top: 20px;
	width:420px; 
	-webkit-box-shadow: 10px 10px 28px 0px rgba(0,0,0,0.75); 
	-moz-box-shadow: 10px 10px 28px 0px rgba(0,0,0,0.75); 
	box-shadow: 10px 10px 28px 0px rgba(0,0,0,0.75);
}
@media (max-width: 380px) {
	.row .screenshot-mang {
		width:280px; 
	}
}
/*
@media (min-width: 991px) {
	.row .screenshot-mang {
		width:420px; 
	}
}
*/
.spw-imgmodalview img {
	width: 100%;
}
@media (min-width: 1281px) {
	.spw-imgmodalview img {
		width: 70%;
	}
}

.spw-imgmodalview {
	width: 100%;
	text-align: center;
}

.spw-imgmodalview .modal-dialog {
	width: 100%;
}

.spw-imgmodalview .modal-header {
	width: 100%;
}

/*
**================================================================================
** FEATURE LIST
**================================================================================
*/

.quadra h3 {
	padding: 10px 4px;
	font-weight: 100;
}
ul.quadra {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
li.quadra {
	height: 32%;
	border: 1px solid white;
	min-width: 220px;
	/*
		width: 32%;
		width: 150px;
		height: 150px;
		display: inline-block;
	*/
	padding: 0 10px;
	color: #E58100;
	/*background: #FFD96C;*/
	background-color: rgba( 255, 217, 108, 0.95 );
	text-align: center;
	flex: 1;
	margin-bottom: 2%;
	box-shadow: 0 4px 6px #aaa;
	/*
		margin: 0 3px 0 3px;
	*/
}
li.col1.quadra {
	background-color: rgba( 108, 217, 255, 0.95 );
	color: #3e3e3e;
	/* 
	background-color: rgba( 255, 217, 108, 0.95 );
	color: #E58100;
	*/
}
li.col2.quadra {
	background: #969ADE;
	color: #fff;
}
li.quadra.col3 .headline {
	color: #fff;
}
li.col3.quadra {
	background: #52C68E;
	color: #006D39;
}
.quadra p {
	margin: 0 1px 0 1px;
	white-space: nowrap;
}
li h2.headline {
	display: inline;
}
.text p {
	margin-top: 5px;
}

li.quadra {
    transition: transform .2s; /* Animation */
}

li.quadra:hover {
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

/*
**================================================================================
** PICTURES FLEX
**================================================================================
*/
div.pictures {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	flex-direction: row;
}
div.pictures img {
	text-align: center;
	flex: 1;
	min-width: 340px;
	width:100%;
	height:100%;
}
.features div.pictures {
	margin-left: 40px;
}
div.feature-section {
	margin-top: 20px;
}

div.feature-section a {
	font-weight: bold;
}

/*
** from qtag.me
*/
.onepager, .onepager-nomaxheight {
	width: 100%;
	background-color: black;
	padding-top: 30px;
	min-height: 600px;
	border-bottom: 5px solid #414160;
}
.onepager {
	height: 100%;
	max-height: 1080px;
}
.onepager-nomaxheight {
	padding-bottom: 30px;
}


/*
** @link http://www.holgerkoenemann.de/ein-vimeo-oder-youtube-video-responsive-einbinden/
Der Abstand nach unten von 56.25% entspricht dem Verhältnis von 16 zu 9 (9 / 16 (x 100) =56.25%). Der DIV Container hat also immer eine Höhe von 0px + 56.25% im Verhältnis zur Breite. Oder mit anderen Worten: Der Container ist immer im 16:9 Format, genauso wie das Video, das wiederum die Grösse des iFrames hat, welcher immer 100% der Höhe und Breite des umgebenden DIV Containers hat.
*/
.responsive-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.responsive-video {
	position: relative;
	padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}
.features .responsive-video {
	margin-left: 40px;
}

@media (max-width: 500px) {
	ul {
		padding-left: 0;
	}
	.features .text {
		margin-left: 0;
	}
	.features div.pictures {
		margin-left: 0;
	}
	.features .responsive-video {
		margin-left: 0;
	}
}

a.feature-link {
	color: inherit;
}