/* običajno besedilo */
div.ex2 {
    font: Calibri, Arial;
	float: left;
	line-height: 1.5;
	margin-left: 2vw;
	margin-right: 2vw;
	margin-top: 0px;
	padding-top: 0px;
}


/* h2 je tak zato, da je povzetek poravnan na zgornji rob */
#h2  {
	line-height: 1px;
	padding: -20px;
}


/*
uporaba: <div id="br"> 
namen: razmak med elementi menija
*/
#br { 
    box-sizing: content-box;    
    height: 7px;
}


.width10 {
    width: 10em;
}


.width30 {
    width: 30vw;
}


/* vertikalni meni */
.vertical-menu {
    font: bold 100% Arial;
	padding-top: 0px;
	/* padding: 20px; */
	text-align: center;
	margin-left: 1vw;
	margin-right: 1vw;
	margin-top: 1vw;
	vertical-align: top;
	/* margin-bottom: 2px; */
}

.vertical-menu  p {
    box-sizing: content-box;    
    height: 12px;
    padding: 10px;
	/* vertical-align: top; */
	margin-top: 0;
	/* border: 10px; */
}

.vertical-menu  br {
    box-sizing: content-box;    
    height: 2px;
    padding: 1px;
	/* vertical-align: top; */
	margin-top: 0;
	/* border: 10px; */
}

.vertical-menu a {
    background-color: #b3d5ff;
    color: black;
    display: block;
    padding: 12px;
    text-decoration: none;
	outline: none; /* zato da ni tankega okvirja okoli izbranega elementa */
}

.vertical-menu a:hover {
    background-color: #1a8cff;
    color: white;
	outline: none;
}

.vertical-menu a.active {
    background-color: #1a8cff;
	border: 1px solid blue;
    color: white;
	outline: none;
}




/* ikone za skok na vrh strani, na začetno stran, objavo na Facebooku in komentar */
.icon-bar {
    /* width: 100%; */
    background-color: white;
    overflow: auto;
}

.icon-bar a {
    border: none;
    color: #1a8cff;
    float: left;
    font-size: 2em;
    padding: 6px 0;
    text-align: center;
    width: 2em;
	outline: none; /* zato da ni tankega okvirja okoli izbranega elementa */
}

.icon-bar a:hover {
    background-color: #1a8cff;
    color: white;
	outline: none; /* zato da ni tankega okvirja okoli izbranega elementa */
}

* .active {
    background-color: #1a8cff; /* !important; */
	outline: none; /* zato da ni tankega okvirja okoli izbranega elementa */
} 





.horiz-menu {
    font: bold 100% Arial;
    width: 100%;
}

.horiz-menu a {
    background-color: #82caff;
    color: black;
    display: block;
    border: none;
    float: left; /* Float the buttons side by side */
    margin: 5px;
    padding: 12px;
    text-decoration: none;
}

.horiz-menu a:hover {
    background-color: #0000ff;
    color: #ffff00;
}

.horiz-menu a.active {
    background-color: #0000ff;;
    color: #ffff00;
}





.horiz-menu-icon {
    font: bold 100% Arial;
    width: 100%;
}

.horiz-menu-icon a {
    background-color: #ffffff;
    color: black;
    display: block;
    border: none;
    float: left; /* Float the buttons side by side */
    margin: 5px;
    padding: 12px;
    text-decoration: none;
}

.horiz-menu-icon a:hover {
    background-color: #0000ff;
    color: #ffff00;
}

.horiz-menu-icon a.active {
    background-color: #ffff00;
    color: #ffff00;
}










.btn-group a {
    background-color: #82caff;
    border: none;
    color: black;
    float: left; /* Float the buttons side by side */
    margin: 10px;
    padding: 10px 24px; /* Some padding */
	text-decoration: none;
}

/* Clear floats (clearfix hack) */
.btn-group:after {
    content: "";
    clear: both;
    /* display: table; */
}

/* Add a background color on hover */
.btn-group a:hover {
    background-color: #0000ff;
    color: #ffff00;
}

.btn-group a.active {
    background-color: #0000ff;
    color: #ffff00;
}


/* da se slike prilagodijo veikosti ekrana */
img {
  max-width: 100%;
  /* width: 100%; /* or max-width: 100%; */
  height: auto;
  display: block;
}