/****************************************************************************
	VEGEFARMŽ
	CSS-Optimum
	
	2014-04-09
*****************************************************************************/


/*---------------------------------------------------------------------------
	HACK 02: #header image fade in <# START #>
-----------------------------------------------------------------------------*/

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}
 
.fade-in.one {
	-webkit-animation-delay: 0.2s;
	-moz-animation-delay: 0.2s;
	animation-delay: 0.2s;
}


/*---------------------------------------------------------------------------
	HACK 03: #sticker <# START #>
-----------------------------------------------------------------------------*/
   
.stick{
	position:fixed;
	top:500px;
	right:0px;
	height:50px;
	width:100px;
	background:#000000;
	border-radius: 10px 0px 0px 10px;
	box-shadow: 2px 3px 5px #888;
	z-index:9999;
}

.sticker{
	/* background-color:transparent; */
	background-color: #99CC00;
	position: fixed;
	right: 0px;
	top: 110px;
	width:59px;
	height:94px;
	float:right;
	display: block;
	z-index:0;
}

.sticker a{
	background-color:transparent;
	/*
	background-image:url('/pics/auszeichnungen/Co2_neutral_Button_Startseite.png');
	*/
	background-repeat:no-repeat;
	background-attachment: scroll;
	position: fixed;
	top: 100px;
	right: 0px;
	width:59px;
	height:94px;
	float:right;
	display: block;
}

.share_box{
	position:fixed;
	width:50px;
	top:10%;
	left:10%;
	border:3px solid #a1a1a1;
	background:#FFF;
	padding:15px;
	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
/*					
<div class="share_box" id="top-bar">
    	<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="paulund_">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    	
    	<!-- Place this tag where you want the +1 button to render -->
	<g:plusone size="tall"></g:plusone>		
	<!-- Place this tag after the last plusone tag -->
	     <script type="text/javascript">
	(function() {
	     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
	     po.src = 'https://apis.google.com/js/plusone.js';
	     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
	})();
	</script>
								
        <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
*/

/*---------------------------------------------------------------------------
	HACK 03: #sticker <# START #>
-----------------------------------------------------------------------------*/
#res-col p:first-of-type {font-weight:600;}
#res-col p,dd {text-align: justify;}


@media all and (max-width: 900px) and (min-width: 600px) {
#res-col p,dd  {
  -webkit-column-count: 2; /* Saf3, Chrome*/
  -webkit-column-gap: 4%; /* Saf3, Chrome*/
  -moz-column-count: 2; /* FF3.5+ */
  -moz-column-gap: 4%; /* FF3.5+ */
  column-count: 2; /* Opera 11+*/
  column-gap: 4%; /* Opera 11+*/
  }
}

@media all and (min-width: 900px) {
#res-col p:first-of-type  {
  -webkit-column-count: 2;
  -webkit-column-gap: 3%; /* Saf3, Chrome*/
  -moz-column-count: 2;   
  -moz-column-gap: 3%; /* FF3.5+ */
  column-count: 2;        
  column-gap: 3%; /* Opera 11+*/
  }
   #res-col p ,dd {
  -webkit-column-count: 3;
  -webkit-column-gap: 1%; /* Saf3, Chrome*/
  -moz-column-count: 3;   
  -moz-column-gap: 1%; /* FF3.5+ */
  column-count: 3;        
  column-gap: 1%; /* Opera 11+*/
  }
}
/*---------------------------------------------------------------------------
	
-----------------------------------------------------------------------------*/
#logo h1{font-family: 'Days One'; font-size: 6em; color:#92a503;}
#caption{font-family: 'Ubuntu'; font-size: 3em; word-wrap:break-word; color:#92a503;}
#sub-caption{font-family: 'Ubuntu'; font-size: 2.5em; word-wrap:break-word; background-color: rgba(255,255,255, .4)}


#logo-lettering.text{font-family: 'Days One';font-size: 1.5em; color:#92a503;}

p { color: black;}
.modal {
margin-top: 2em;
}

/*---------------------------------------------------------------------------
	
-----------------------------------------------------------------------------*/
.bubble 
{
position: relative;
display:inline-block;
max-width:auto;
min-height:15em;
padding: 15px;
background: #FFFFFF;
border: #FFFFFF solid 4px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
/*
.bubble:after 
{
content: "";
position: absolute;
bottom: -15px;
left: 60%;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}
*/
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 30px 0 30px 30px;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
right: -32px;
top: 60%;
}
/*
.bubble:before 
{
content: "";
position: absolute;
bottom: -19.5px;
left: calc(60% - 3px) ;
border-style: solid;
border-width: 18px 18px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 0;
}
*/

.bubble2 
{
position: relative;
display:inline-block;
max-width:auto;
min-height:10em;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 20px;
padding-right: 20px;
margin-top: 15px;
background: #FFFFFF;
border: #FFFFFF solid 4px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.bubble2:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 30px 30px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
bottom: -32px;
left: 60%;
}

.carousel-inner{
  width:100%;
  text-align: left;
  font-size: 1.1em;
margin-top: -15px;
/*  height: 700px; */
}

#carousel1 .nav a small {
    display: block;
}
#carousel1 .nav {
    background: #eee;
}
.nav-justified > li > a {
    border-radius: 0px;
}

.nav-pills > li  {
    text-align: left;
	font-size: 1.1em;
}
.nav-pills > li.active a {
    background-color: #7F7F7F;
}
.nav-pills > li[data-slide-to="0"].active a {
    background-color: #7F7F7F;
}
.nav-pills > li[data-slide-to="1"].active a {
    background-color: #7F7F7F;
}
.nav-pills > li[data-slide-to="2"].active a {
    background-color: #7F7F7F;
}
.nav-pills > li[data-slide-to="3"].active a {
    background-color: #7F7F7F;
}
.nav-pills > li[data-slide-to="4"].active a {
    background-color: #7F7F7F;
}
.nav-pills > li[data-slide-to="5"].active a {
    background-color: #7F7F7F;
}
.nav-pills > li[data-slide-to="6"].active a {
    background-color: #7F7F7F;
}

.dropdown .dropdown-menu > li > a {
    text-align: left;
	font-size: 1.1em;
	white-space: pre-wrap;
	overflow:hidden;
}
.dropdown  {
	 overflow-x:hidden;
	 min-height:10em;

}
.dropdown .dropdown-menu {
	 overflow-x:hidden;
	 top: 50px;
}

/*
.nav-pills > .active::after {
content: "";
position: absolute;
bottom: 5px;
left: -30px;
border-width: 15px 30px 15px 0;
border-style: solid;
border-color: transparent #007bff transparent transparent;
display: block;
width: 0;
height: 0;


}


.item {
background-color:red;
}*/


/****************************************************
*	VFRAM DROPDOWN MENU v.0.2.
*****************************************************/
/*
.dmenu {
	font-family: Arial, Helvetica, sans-serif;
	/* 
	font-family: federation;
	*/
/*
	font-size: 12px;
	white-space: normal;
	width: 100%;
	height: 34px;
    background-color: #ECD3E1;
	border-top: 1px #B16FA5 solid;
	border-bottom: 1px #B16FA5 solid;
}
.dmenu > a{
	padding: 5px 5px 5px 5px;
}
.dmenu > ul, li, li > a {
	text-decoration: none;
	list-style: none;
	color: #B16FA5;	
	margin: 0;
	padding: 0;
	display: block;
}
.dmenu > ul > li {
	width: 120px;
	height: auto;
	background-color: #ECD3E1;
	border-right: 1px #B16FA5 dotted;
	border-bottom: 1px #B16FA5 solid;
	display: block;
	position: relative;
	float: left;
}
.dmenu > li > ul { 
	border-left: 1px #B16FA5 dotted;
	left: -1px;
	display: none;
}
.dmenu > li:hover, a:hover  { 
	color: #FFFFFF;
	background: #D9A5C6;
}
.dmenu > li:hover > ul {
/* or show as block
#menu li:hover ul {
*/
/*
	border-top: 1px #B16FA5 solid;
	display: block; 
	position: absolute;
}
.dmenu > li:hover > ul > li:hover > ul { 
	left: 100%;
	top: -1px;
}
.dmenu > a img {
	padding: 10px 5px 10px 10px;
	border:none
}
*/
a {
	color:#92a503;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}