@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin-ext);
/*@import url(https://fonts.googleapis.com/css?family=Open+Sans:400&subset=latin-ext);*/
/* SEKCIJE :
BASIC TAG STYLE
BTTNs
CONTAINER
IMG
LIST
LOADER
ELEMENTI PREDLOŠKA
ELEMENTI IZBORNIKA
SREDI
TIPOGRAFIJA
UTILITY
*/
/* */
/* BASIC TAGS style */
BODY,
HTML {
background-color: #fff;
height : 100%;
margin : 0;
padding : 0;
width : 100%;
}
/* */
/* */
/* */
/* */
/* */
/* BOX */
.box {
border-radius: 4px;
display: flex;
}
.box--flip {
flex-wrap: wrap;
}
.box--h {
flex-direction: column;
}
.box__el { /* 50%-50% */
flex : 9999 1 auto;
overflow: hidden;
padding : 14px;
}
.box__el_perc-40 {
flex: 1 1 40%;
}
.box__el_perc-30 {
flex: 1 1 30%;
}
.box__el_perc-20 {
flex: 1 1 20%;
}
.box__el_perc-10 {
flex: 1 1 10%;
}
/**/
/* CARD */
/* HYDRO */
.card-hydro {
}
.card-hydro__el-left {
max-width:20%;
min-width:240px;
overflow:hidden;
}
.card-hydro__el-right {
min-width:300px;
margin: 24px 0 0 0;
}
/* burek sir, ali trenurno u zinjavom CSSu nema boljeg načina za
centrirat nakon wrapa ako i kad se pojavi pa promijeniti */
@media only screen and ( max-width: 600px ) {
.card-hydro__el-right .card-hydro__head-sec,
.card-hydro__el-left {
text-align: center;
}
.card-hydro__el-left {
max-width: 100%;
}
.card-hydro__el-right {
margin: 0 auto;
}
.card-hydro__el-right .list-kv {
margin: 0 auto;
}
}
/**/
.card-hydro__head-sec {
margin: 0 0 12px 0;
}
/**/
/**/
/* */
/* */
.icon-err{
}
/* */
/* */
/* IMG */
.img-kvazi {
background-origin : content-box;
background-position: top center;
background-repeat : no-repeat;
background-size : contain;
}
.img-kvazi__size-setter { /* img tag je potreban da odredi dimenziju */
visibility: hidden;
}
/**/
/* */
/* */
/* LIST KEY-VALUE Horisontal - fluid and all keys of same width */
.list-kv {
display: table;
}
.list-kv__el {
display: table-row;
}
.list-kv__key {
display: table-cell;
}
.list-kv__val {
display: table-cell;
padding: 0 0 0 14px;
}
/* end DL-H */
/* */
/* */
.loader-circle { /* PREBACITI U RELATIVNE JEDINICE */
margin: auto;
border: 7px solid #EAF0F6;
border-radius: 50%;
border-top: 7px solid #069;
width: 10px;
height: 10px;
animation: spinner 1.5s linear infinite;
}
@keyframes spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* */
/* */
@keyframes zaglavlje_opacity {
from {
opacity: 0.95;
}
to {
opacity: 1;
}
}
/* element zaglavlja od vrh stranice do horizontalnog izbornika */
#zaglavlje {
/*background-image: -webkit-linear-gradient(top, #fff, transparent);*/
background: -moz-linear-gradient(bottom, #ddd, #fff);
background: -webkit-linear-gradient(bottom, #ddd, #fff);
border-bottom: #ccc;
margin: 0px;
/*opacity: 0.9;*/
position: fixed;
top: 0px;
width: 100%;
z-index: 100;
}
#vrh {
position: absolute;
width: 1000px;
margin: auto auto;
}
#zaglavlje,
#vrh {
height: 70px;
transition: height 1s;
}
HEADER.smanjeno #zaglavlje,
HEADER.smanjeno #vrh {
height: 40px;
opacity: 1;
animation-name: zaglavlje_opacity;
animation-duration: 1s;
}
/* DIV sa logo-ovima FSB i UNIZG i nazivom FSB */
#zaglavlje-logo {
position:absolute;
float:left;
display:flex;
justify-content: left;
margin-top: 10px;
transition: all 1s;
}
HEADER.smanjeno #zaglavlje-logo {
margin-top: 0px;
}
IMG.fsbLogo {
width: 140px;
height: 49px;
transition: all 1s;
}
HEADER.smanjeno IMG.fsbLogo {
width: 94px;
height: 33px;
margin-top: 5px;
}
IMG[src*=FSBlogo_christmas].fsbLogo {
width: 149px;
height: 58px;
transition: all 1s;
margin-top: -10px;
}
HEADER.smanjeno IMG[src*=FSBlogo_christmas].fsbLogo {
width: 85px;
height: 33px;
transition: all 1s;
margin-top: 0px;
}
.logo-separator {
width:1px;
height:50px;
margin: 0px 5px;
border-right: solid 1px #ccc;
transition: all 1s;
}
HEADER.smanjeno .logo-separator {
margin: auto 5px auto 51px;
height: 0px;
opacity: 0;
}
IMG[class*="unizg"] {
margin-top: 0px;
opacity: 1;
transition: all 1s;
}
header.smanjeno IMG[class*="unizg"] {
margin-top: -17px;
opacity: 0;
}
/* izbornik sa precacima na vrhu zaglavlja (gore-desno) */
#zaglavlje-quick-links {
position:relative;
float: right;
color: #3d80ab; /* #069 */
font-size: 0.8rem;
padding: 2px 8px 4px 12px;
border-bottom: solid 1px #e2e2e2;
border-left: solid 1px #e2e2e2;
border-radius: 0px 0px 0px 3px;
background-color: #f2f2f2;
margin-bottom: -30px;
transition: all 1s;
transition-delay: 0.2s;
}
#zaglavlje-quick-links SPAN {
height: 0.3rem;
border-left: solid 1px #d2d2d2;
margin: 0px 8px;
}
HEADER.smanjeno #zaglavlje-quick-links {
margin-top: -27px;
}
/* zastavica sa FSB UPISI / FSB100 skroz desno */
.fsbupisiflag {
position:absolute;
display:flex;
justify-content:center;
align-items: center;
/*flex-direction: column;*/
padding-top:0px;
margin-left:1030px;
width:100px;
height:145px;
background-image: linear-gradient(to top, #03446E, #09c);
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 90%, 0 80%);
transition: all 1s;
}
HEADER.smanjeno .fsbupisiflag {
margin-top: -135px;
}
/*.fsb100flag {
position:absolute;
display:flex;
justify-content:center;
padding-top:25px;
margin-left:1030px;
width:100px;
height:120px;
background-image: linear-gradient(to top, #03446E, #09c);
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 90%, 0 80%);
transition: all 1s;
}*/
/* opcije odabira jezika, prijave i kontakta */
#zaglavlje-options {
position: relative;
float: right;
margin: 0px;
padding: 0px;
list-style-type: none;
margin-top: 42px;
transition: margin-top 1s;
}
HEADER.smanjeno #zaglavlje-options {
margin-top: 12px;
}
#zaglavlje-options li {
display:inline;
}
#zaglavlje-options li a:not(.language) {
float:left;
font-size:0.8rem;
font-weight: bold;
padding: 1px 5px;
height:22px;
min-width:100px;
vertical-align:top;
border-left:solid 1px #ccc;
}
#zaglavlje-options li a:not(.language):hover {
cursor:pointer;
color: #888;
border-left:solid 1px #069;
}
#zaglavlje-options li a.language {
float: left;
font-size: 0.8rem;
height: 26px;
color: #fff;
background: -webkit-linear-gradient(bottom, #069, #09c);
background: -moz-linear-gradient(bottom, #069, #09c);
/*background: #069;*/
padding: 1px 4px;
margin-right: 7px;
font-weight: bold;
}
#zaglavlje-options li a.language:hover {
color: #3d80ab; /* #069 */
background: -webkit-linear-gradient(bottom, #ccc, transparent);
background: -moz-linear-gradient(bottom, #ccc, transparent);
}
/* horizontalni izbornik ispod zaglavlja */
#zaglavlje_izbornik {
margin-top: 70px;
}
HEADER.smanjeno #zaglavlje_izbornik {
margin-top: 40px;
}
/* element koji odvaja sadrzaj (#tijelo) od vrha stranice */
#separator {
height: 100px;
}
/* elementi u kojima se ispisuju vertikalni izbornik i sadrzaj */
#tijelo {
width: 1000px;
margin: auto;
/*padding-top: 15px;
display: table;*/
}
#tijelo_sadrzaj {
position: relative;
float: left;
/*display: none;
font-size: 0.95rem;*/
}
/* element za ispis podnozja */
#podnozje {
display : flex;
align-items : center;
justify-content : center;
width : 100%;
min-height : 170px;
border-top : solid 1px #f2f2f2;
z-index: 100;
}
#podnozje_container {
display : flex;
justify-content: space-between;
width:1000px;
}
.podnozje_section {
/*width : 250px; */
min-width: 230px;
font-size : 0.8rem;
}
.logo-fsb-slova--w50 {
height : 50px;
width : 90px;
}
.logo-unizg--w50 {
height : 50px;
margin : 0 0 0 18px;
}
/* */
/* */
/* Standardni padajuci izbornik koji se koristi u korisnickom izborniku i horizontalnom izborniku starnica */
.balloon_tail{
position: relative;
width: 10px;
height: 10px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
top: -7px;
margin-left: 25px;
background: #f2f2f2;
border-left: solid 1px #ccc;
border-top: solid 1px #ccc;
z-index: -1;
}
.menu_opt_sel{
display:inline;
}
.menu_opt_sel:hover {
cursor: pointer;
}
.menu_opt, .submenu_opt{
top: 3px;
background: #f2f2f2;
border-left: solid 1px #ccc;
border-bottom: solid 1px #ccc;
border-right: solid 1px #ccc;
padding: 1px;
box-shadow: 0px 0px 3px #888;
display: none;
z-index: 1;
}
.fire_list{
font-size: 0.8rem;
margin-top: -10px;
}
.fire, .fire_red{
color: #000;
font-weight: normal;
padding: 5px;
text-decoration: none;
min-width: 150px;
}
.fire:hover{
color: #fff;
background: #069;
text-decoration: none;
cursor: pointer;
}
.fire_red:hover{
color: #fff;
background: #c00;
text-decoration: none;
cursor: pointer;
}
/* */
/*
/* PICTOGRAMS */
.picto--person {
background-image: url("../web/images/generic/person.svg");
}
/**/
/* */
/* */
BODY, HTML,
.fsb-txt, .fsb-txt-m, .txt-fsb {
color : #444;
font-size : 1rem;
font-family :'Open Sans';
line-height : 1.5;
font-weight : normal;
}
H1, .fsb-txt-xxxl {
color:#3d80ab;/* #069 */
font-size:1.35rem;
line-height : 1.25;
margin-block-start: 0px;
margin-block-end: 20px;
}
H2, .fsb-txt-xxl {
color:#000;
font-size : 1.15rem;
line-height : 1.2;
margin-block-start: 0px;
margin-block-end: 15px;
}
H3, .fsb-txt-xl {
color:#000;
font-size : 1.1rem;
line-height : 1.1;
margin-block-start: 0px;
margin-block-end: 10px;
}
/*H4, .fsb-txt-l {
font-size:1.05rem;
line-height : 1.15;
margin-block-start: 0px;
margin-block-end: 0px;
}
H5 {
color:#3d80ab; /* #069; */
font-size : 1.25rem;
line-height : 1.3;
}
H6 {
font-weight : normal;
}*/
SMALL,
.fsb-txt-s {
font-size : 0.85rem;
}
SUB,
SUP,
.fsb-txt-xs {
font-size : 0.7rem;
}
SUB,
SUP {
line-height : 0;
position : relative;
vertical-align : baseline;
}
A,
.fsb-txt--blue {
color: #3d80ab; /* #069; */
text-decoration : none;
}
A:hover {
color : #69c;
text-decoration : none;
}
.fsb-txt--grey {
color: #aaa;
}
.fsb-txt--white {
color: #fff;
}
B,
STRONG,
.fsb-bold {
font-weight: bolder;
}
/* */
/* */
.display-none{
display:none;
}
.fsb-box-info::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 2em;
color: #3d80ab; /* #069; */
content: "\f05a";
margin-right: 10px;
}
.visually-hidden { /* clip pattern */
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
/* */