/** Author: M. Kühn **/
/** Author URL: http://www.kuehn.tv **/

/** -------------------------------------------- NEU ---------------------------------- **/
html,body        {height:99%; margin:0px;}  /** muss sein **/
/** html { overflow: auto;} **/
/** -------------------------------------------- NEU ---------------------------------- **/

/** @import url(http://fonts.googleapis.com/css?family=Lato:400,900); **/  /** <-- Just for the demo, Yes I like pretty fonts... **/


/** -------- farbige Scrollbar fuer divscroll ----------- **/
.scrollbar::-webkit-scrollbar {
    width: 18px;
	}

/** Hintergrund-Track **/
.scrollbar::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 16px rgba(227, 226, 225, 0.9); 
	-moz-box-shadow: inset 0 0 16px rgba(227, 226, 225, 0.9); 
	box-shadow: inset 0 0 16px rgba(227, 226, 225, 0.9); 
	
    -webkit-border-radius: 10px;
	-moz-border-radius 10px;
    border-radius: 10px;
	
	/** zum Verkleinern des Hintergrundbalkens in Abhaengigkeit zum Track-width **/
		background: rgb(0,0,0);
		border: 6px solid transparent;
		background-clip: content-box;   /* this is important */
	}
/** Scroller **/
.scrollbar::-webkit-scrollbar-thumb {
     /* border: 1px solid grey; */
	 
	-webkit-border-radius: 10px;
	-moz-border-radius 10px;
    border-radius: 10px;
	
	/** background:url("http://www.topdesignmag.com/wp-content/uploads/2010/12/137.jpg"); **/
    background: rgba(227, 226, 225, 1); 	/* background: rgba(238, 223, 152, 1);  war background: rgba(246, 188, 96, 1);*/
	
    -webkit-box-shadow: inset 0 0 20px rgba(0,0,0,0.9);
	-moz-box-shadow: inset 0 0 20px rgba(0,0,0,0.9);
	box-shadow: inset 0 0 20px rgba(0,0,0,0.9);
	}
 
.scrollbar::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(246, 188, 96, 1); 
	}

.scrollbar::-webkit-scrollbar-corner {
	background: rgba(246, 188, 96, 1);
	border: 3px solid black;
	-webkit-border-radius: 10px;
	-moz-border-radius 10px;
    border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
	-moz-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
	box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
	}
/** -------- farbige Scrollbar fuer divscroll ----------- **/

.square {
    float:left;
    position: relative;
    width: 100%;
    padding-bottom: 7%; /** = width for a 1:1 aspect ratio **/
    margin:0%;	/** margin:1.66%; **/
    background-color:blue;	/** #e3e2e1; **/
    overflow:hidden;
	}

/** Der komplette Container des Logos **/
.content {
    position:absolute;
    height:90%; /** = 100% - 2*5% padding **/
    width:90%; /** = 100% - 2*5% padding **/
    padding: 5%;
	/**background-color:green;**/
	}

.table{
    display:table;
    width:100%;
    height:100%;
	}
.table-cell{
    display:table-cell;
    vertical-align:top;						/** vertical-align:middle; **/
	}
/**  For list **/
ul{
    text-align:left;
    margin:5% 0 0;
    padding:0;
    list-style-position:inside;
	}
li{
    margin: 0 0 0 5%;
    padding:0;
	}

/**  For responsive images **/
.content .rs{
    width:auto;
    height:auto;
    max-height:90%;
    max-width:100%;
	}
/**  For responsive images as background **/

.bg{
    float:left;
    position: relative;
    width: 100%;
    padding-bottom: 7%;  							/** = width for a 1:1 aspect ratio **/
    margin:0;	/** margin:1.66%; **/
    background-color:#e3e2e1;	/** #e3e2e1; **/
    overflow:hidden;
	background-image: url(../img/logo_7f1.png);
	background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;  /** you change this from "cover" to "contain" if you don't want the images to be cropped **/
	}
	
.bgimg{
    float:left;
    position: relative;
    width: 100%;
	/**height:60px;**/
    /** padding-bottom: 7%;  **/							/** = width for a 1:1 aspect ratio **/
    margin:0;	/** margin:1.66%; **/
    background-color:#ffffff;	/** #e3e2e1; **/
    overflow:hidden;
	background-image: url(../img/ro_5d.png);
	background-position:bottom center;
    background-repeat:no-repeat;
    background-size:contain;  /** you change this from "cover" to "contain" if you don't want the images to be cropped **/	
	}

.img1---{
    background-image: url(../img/logo_7d1.png);
	}


/**  following just for the demo **/
body {
    background:#ffffff;	/** background:#323534; **/
	}
p{
    margin:0;
    padding:0;
    text-align:left;
	}

.numbers{
    font-weight:900;
    font-size:100px;
	}

/** Links **/
a:link, a:visited {
	color: #000;
	background-color: white;	/** #e3e2e1; **/
	text-decoration: none;
		/**font-family:Arial, Times, sans-serif;**/
		/**font-size: 1.3rem;**/
	}
a:visited {
	color: #000;
	text-decoration: none;
	}
a:hover, a:active {
	color: #fff;
	text-decoration: none;
	background-color:#808080;
	}


/** Button nach oben **/
.obenbtn {
    background-color: #e3e2e1;
    color: black;
	padding-top:2px;
	padding-bottom:2px;
    /** padding: 10px 100px 10px 100px; **/		/** top, right, bottom, left **/
	width:99%;
    /** deaktiviert font-size: 1.3rem; **/
    cursor: pointer;
	border-top-left-radius: 10px;
    border-top-right-radius: 10px;
	border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; 
	}
.obenbtn:hover, .obenbtn:focus {
    background-color: #fff;
	}

/** ----- DropDownMenue ----- **/
.dropbtn, .dropbtn1, .dropbtn2, .dropbtn3, .dropbtn4 {
    background-color: white;
    color: red;
    padding: 4px 6px;	/** padding: 6px; **/
	margin: 5px 0px; 0px 0px;
	font-family: Garamont, Baskerville Old Face, Verdana, Tahoma, Arial, sans-serif;
	font-size: 1.1rem;
    cursor: pointer;
	border-top-left-radius: 6px;
    border-top-right-radius: 6px;
	border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
	}
.dropbtn:hover, .dropbtn:focus, .dropbtn1:hover, .dropbtn1:focus, .dropbtn2:hover, .dropbtn2:focus, .dropbtn3:hover, .dropbtn3:focus, dropbtn4:hover, .dropbtn4:focus, obenbtn:hover, .obenbtn:focus {
    background-color: white;
	}
.dropdown {
/** float: right; fuer rechtsbuendig **/
	position: relative;
		padding: 0px 6px 6px 0px;							/** Abstand des Menues zum Umfeld - top, right, bottom, left **/
    display: inline-block;
	}
.link {
/** float: right; fuer rechtsbuendig **/
	position: relative;
		padding: 0px 6px 6px 0px;							/** Abstand des Menues zum Umfeld - top, right, bottom, left **/
    display: inline-block;
	}
.dropdown-content, .dropdown-content1, .dropdown-content2, .dropdown-content3, .dropdown-content4 {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 200px;	/* breite der Links */
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
/** right: 0; fuer rechtsbuendig **/
    z-index: 1;
	font-size: 1.1rem;
	}
.dropdown-content a, .dropdown-content1 a, .dropdown-content2 a, .dropdown-content3 a, .dropdown-content4 a {
/**	  font-family: Arial;**/
	color: black;
    padding: 8px 16px;	/* hoehe der Links */
    text-decoration: none;
    display: block;
	text-align: left;
	}
.dropdown a:hover {
	background-color: #e3e2e1;
	}
.show {
	display: block;
	}