/* ***
*
* CCS for www.kaffeebike.de
* 
*
*
* ***
*/



@font-face {
    font-family: 'RobotoLight';
    src: url('../fonts/Roboto-Light-webfont.eot');
    src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Light-webfont.woff') format('woff'),
         url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'RobotoRegular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*
@font-face {
    font-family: 'RobotoBold';
    src: url('../fonts/Roboto-Bold-webfont.eot');
    src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: normal;
    font-style: normal;
}
*/




body {
	/* background-image: url(../img/00_all/bg_site_fullHd_3.jpg); */
	background: url(../img/00_all/kaffeebike_bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-attachment: fixed;
	font-family: 'RobotoLight', Arial, Helvetica, sans-serif;
/*	font-size: 1em;
	line-height:1.6em;*/
	color:#000;
	background-position: center top;
}
html,
body { height: 100%; }

body {
  display: table;
  margin:0;
  padding:0;
  width: 100%;
}

.page-row {
  display: table-row;
}

.page-row-expanded { height: 100%; }
.hide {
	display: block;
}



/* ************* */
/* ************* */
/*   Globals    */

.full {
	width: 100%;
	/* background-color:#333; */
}
.fullImg,
.fullImgSta {
	width: 100%;
	height: auto;
}

.floatLe {
	float:left;	
}
.floatRi {
	float:right;	
}
.clearfix {
	clear:both;
	display:block;
	height:0px;
	line-height:0px;
}
.imgFull {
	width:100%;
	height:auto;
}
.txtWhite {
	color:#fff;
}
.txtGrey {
	color:#585858;	
}
.txtRed {
	color:#BA0618;	
}
.trans {
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
}
.noTrans {
	filter:alpha(opacity=100);
	-moz-opacity:1.0;
	-khtml-opacity: 1.0;
	opacity: 1.0;
}
.noMrg {
	margin:0;
}
h1,
h2,
h4  {
    font-family: 'RobotoLight', Arial, Helvetica, sans-serif;
	font-weight:normal;
	font-size: 2em;
	line-height: 2em;
	color:#BA0618;
	margin:  0 ;
}
h2 {
	font-size: 1.5em;
	margin-top: 1.8em;
}
b,
strong,
.strong {
	 font-family: 'RobotoRegular', Arial, Helvetica, sans-serif;
	 font-weight:normal;
}
a {
	color:#BA0618;
	text-decoration:none;
}
a:Hover {
	text-decoration:underline;
}
#wrapCopy {
	color:#555;
}
.mrg10Ri {
	margin-right: 10px;	
}
.cntTop {
	background-color:#333333;
	color: #fff;	
	padding: 4px 40px;
	margin-bottom: 40px;
}
.DeN,
.EnN  {
	background: url(../img/00_all/ico_de_a.png) no-repeat;
	width: 20px;
	padding-left: 30px;	
	margin-right: 20px;	
}
.EnN  {
	background: url(../img/00_all/ico_en_a.png) no-repeat;
}
.DeNActi,
.EnNActi  {
	background: url(../img/00_all/ico_de_n.png) no-repeat;
	width: 20px;
	padding-left: 30px;	
	margin-right: 20px;	
	color: #666;	
}
.EnNActi {
	background: url(../img/00_all/ico_en_n.png) no-repeat;	
}
.intro,
.main {
	padding: 20px 20px 20px 40px;	
	margin-bottom: 40px;
	background:rgb(255,255,255);
    background: transparent\9;
    background:rgba(255,255,255,0.3);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF,endColorstr=#FFFFFF);
    zoom: 1;	
	background: rgba(255, 255, 255, 0.85); 
	width: 33%;
	font-size: 1.3em;	
	-moz-border-radius:0px 16px 16px 0px; /* Firefox */
	-webkit-border-radius:0px 16px 16px 0px; /* Chrome, Safari */
	-khtml-border-radius:0px 16px 16px 0px; /* Konqueror */
	border-radius:0px 16px 16px 0px; /* CSS3 */
	behavior:url(border-radius.htc); /* Internet Explorer */	
}
#cnt1,
.mainCnt {	
	display: block;
	width:33%;
	/*font-size: 1.1em;*/
	margin-bttom: 40px;	
}
.mehr,
.close1 {
	margin: 20px 0 0 0;	
	display: block;
	color: #ba0618;
	cursor: pointer;
}
.xsFont {
	font-size: 0.9em;	
}


.mehr:Hover {
	text-decoration: underline;
}
#placeHold {
	/*min-height: 400px; */
	display:block;	
}
.close1 {
	display:none;
}
.cntScl {
	float: right;	
}
#icoFb,
#icoPn {
	background: url(../img/00_all/icoFb_n.png) no-repeat;
	width: 40px;
	height: 40px;
	display: inline-block;
}
#icoPn {
	background: url(../img/00_all/icoPn_n.png) no-repeat;
}
#icoFb:Hover {
	background: url(../img/00_all/icoFb_h.png) no-repeat;
}
#icoPn:Hover {
	background: url(../img/00_all/icoPn_h.png) no-repeat;
}
#btLogo {
	float: right;
	margin: 0 40px 40px 0;	
	position: relative;

}


/* ************* */
/* ************* */
/*   Footer    */

.foot {
   /* position:absolute;*/
    bottom: 0;
    width: 100%;
    background-color: #333;
    height: auto;	
	padding: 40px 0;
	color: #fff;
	text-align: center;
	line-height: 1.8em;
}
.posRela {
    position:relative;	
}
#logoFoot {
	position: absolute;
	bottom: 60px;
	right: 60px;
	z-index:1;	
}
.trnFoo {
	display: inline-block;
	margin: 0 8px;	
}









@media only screen and (max-width : 1280px) {
	
.intro,
#cnt1,
.mainCnt  {
	width: 45%;	
}

#logoFoot {
    bottom: 0px;
    /*position: relative;*/
	margin: 40px 0 40px 80px;

}
	
}

@media only screen and (max-width : 960px) {
	
.intro,
#cnt1,
.mainCnt  {
	width: 55%;	
}

}

@media only screen and (max-width : 800px) {
	
.intro,
#cnt1,
.mainCnt  {
	width: 70%;	
}
#btLogo {
	float: none;
	clear:both;
	margin-left: 40px;
}
}

@media only screen and (max-width : 400px) {
	
.intro,
#cnt1,
.mainCnt  {
	width: 75%;	
}

}