b  
body, html {
    height: 100%;
    margin: 0;}
.hero-image {

    background-color: grey;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin-bottom: 0px;
}

.req:after,label.required:after {
    content: "*";
    color: #ffb2ab;
    display: inline;
    margin-top:-5px;
}

.partners{

    background-color: #ececed;
    color:#b7b7bc;
    width: 100%;
    padding-bottom: 10px;
    padding-top: 10px;
    text-align: center;
}


.containerNav{
    max-width: 1600px!important;
}
.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: #47a8a2;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(71,168,162,0.255);
}
.ending{
    background: linear-gradient(90deg, rgba(12,53,55,1) 0%, rgba(20,144,146,1) 24%, rgba(20,148,150,1) 25%, rgba(20,148,150,1) 50%, rgba(20,148,150,0.43461134453781514) 83%, rgba(20,148,150,1) 100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin-bottom: 200px;
    margin-top: 100px;
    height:30px;
  
}
.column {
    float: left;
    width: 20%;
    padding: 10px;
}
@media screen and (max-width: 580px) {
    .column { 
        width: 33.33%;
        padding: 5px;
    }
    .galeria{
        max-width: 325px!important;
    }
}
@media screen and (max-width: 350px) {
    .column { 
        width: 50%;
        padding: 1px;
    }
    .galeria{
        max-width: 220px!important;
    }
}
.column img {
    opacity: 0.7; 
    cursor: pointer; 
}

.column img:hover {
    opacity: 1;
}
.galeria{
    margin:auto;
    background-color:white ;
    max-width:700px;
    -webkit-box-shadow: 0px 0px 7px 1px #86b3b4; box-shadow:inset 0px 0px 7px 1px #86b3b4;
}

.zoom {

    transition: transform .2s; 
}
@media screen and (max-width: 300px) {
    .lang-none{display:none};
}
.zoom:hover {
    transform: scale(1.2); 
}

.activClass{
    background-color:  #e5e5e5;
}
@media screen and (max-width: 1095px) {
    .navbar-brand {
        /* margin-right: 50px!important;*/
    }    
}  
@media screen and (max-width: 1035px) {
    .navbar-brand {
        margin-right: 10px!important;
    }    
}  
@media screen and (max-width: 900px) {
    .navbar-brand {
        margin-right: 5px!important;
    }    
}                  

.antiVis{display:block}
.vis { display: none;}
@media screen and (max-width: 1099px) {
    
    .vis{
        display: block;
        float:left;
    }
    .antiVis{display:none;}
    .navbar-brand {
        margin-right: 0!important;
    }
    .navbar-nav{align-items: unset!important;}
    .imgSize{width: 100px}
    .navImg{width: 100px}
}
@media screen and (max-width: 420px) {
    .imgSize{width: 80px}
}
@media screen and (max-width: 320px) {

    .navImg{width: 80px}
}
@media screen and (max-width: 400px) {
    .imgSize{display:none}
    .imgSizeCol{display:block!important;}
}
.school-tip {
    background-color:#e2e2e2!important;
    border-color: #e2e2e2!important;
    color: #666!important;
    font-weight: 600;
}   
@media (min-width: 1100px) {
   
    .navbar-expand-m {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-m .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-m .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-m .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-m .navbar-nav-scroll {
        overflow: visible;
    }
    .navbar-expand-m .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    .navbar-expand-m .navbar-toggler {
        display: none;
    }

} 
.visLoginCol{display:none;}
@media (max-width: 600px) {
    .visLogin {display:none;}
    .visLoginCol{display:block!important;}
}

@media (max-width: 1100px) {
    .navbar-collapse{width:100%;
    }
    .collapse.in{
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
    }
    .marginList{
        margin-left: 10px;
    }
}

.navbar{
    padding-top:0;
    padding-bottom: 0;
}
.navbar-nav{
    margin-top: 0;
}

.login-menu{
    padding-top: 12px;
}
.loginMenu button 
{
    background-color: #555555 !important;
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    border-radius: 17px; 
    padding: 2px 19px;
    border-color: #555
}
.loginMenu button:hover,
.loginMenu button:active, 
.loginMenu button:focus{
    background-color: #777  !important;    
}
.navbar-toggler:focus{
    box-shadow: none!important;
}   

.menuDrop{
    width: 209px; 
    border-color:#efefef;
    border-top:none;
    border-radius: 0px 0px 5px 5px;
}
.menuDrop span{
    margin-left: 13px;
}
.menuDropVin{
    text-align:start;
    width: 90px; 
    border-color:#efefef;
    border-top:none;
    border-radius: 0px 0px 5px 5px;
}
.menuDropVin .dropdown-item{padding:0;}

@media (max-width: 1200px) {
    .menuDropVin{width: 90px;} 
}
@media (max-width: 1199px) {
    .menuDropVin{width: 66px;} 
}
@media (max-width: 1100px) {
    .menuDropVin{margin-left: 71px; margin-top: -20px!important;} 
    .menuDrop{margin-top:4px!important}
}
@media (max-width: 1099px) {
    .navbar-nav li{text-align:start!important}
    .menuDropVin, .menuDropSutaz,.menuDrop{margin-left: 71px; margin-top: -20px!important;position:absolute!important;filter:drop-shadow(2px 4px 6px #555555);border-radius: unset;}   
    .dropdown-menu-history{position:absolute!important;border-radius: unset;}
}
@media (max-width: 370px) {
    .menuDropVin{margin-left: 20px; }   
}
.menuDropVin a{text-align:start!important}
.menuDropSutaz{
    min-width: 112px!important; max-width: 112px!important; 
    border-color:#efefef;
    border-top:none;
    border-radius: 0px 0px 5px 5px;
}
.menuDropSutaz .dropdown-item{padding:0;}
.menuDropSutaz span{
    margin-left: 13px;
}
@media (max-width: 1199px) {
    .menuDrop{
        width: 193px; 
    }    
    .menuDrop span{
        margin-left: 3px;
    }
}
@media (max-width: 991px) {
    .menuDrop{
        width: 193px; 
    }    
    .menuDrop span{
        margin-left: -5px;
    }
}
@media (max-width: 850px) {
    .menuDrop{       
        border-radius: 0;
        border:none;
        width: 100%;
    }    
    .menuDrop span{
        margin-left: 20px;
    }
}

.notification {
    background-size: contain;
    background-repeat: no-repeat;
    color:transparent;

    position: relative;
    display: inline-block;

}
.notification:hover {
    text-decoration: none;
}
.notification .badge {
    position: absolute;
    top: -2px;
    right: 3px;
    padding: 1px 3px;
    border-radius: 50%;
    background-color: red;
    color: white;
}

.menu{
    position: relative;
}
.menu .infobel{
    position: absolute;
    top: 50%;
    left: 0px;
    color:red;
    font-size:0.5em;
}
.ending{          
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin-bottom: 20px;
    margin-top: 100px;
    height:30px;
}
.opIcon{
    font-size: 18px;
    color:black;
}
.opIcon:active,.opIcon:focus, .opIcon:link, .opIcon:hover  {
    outline: none !important; 
    outline-offset: 0px !important;    
    border-color: transparent;   
    color:black;
}


.activ{color:lightgray!important}


.qtip-red{
    background-color: white!important;
    margin:auto;
}



.stav{
    margin-top:10px;
    display:none;
    color:gray;;
    font-size:0.8em;
}
.textARTa{
    color:#ff9185;
} 
/* modalne okno farebne*/
.infoNewArt{

    position: relative; 
    height: 100%;
    width: 100%;
    display: flex;
    border:none;
    box-shadow: inset 0px 0px 49px 12px #013049;
}
.infoNewArt::before {    
    content: "";
    background-size: cover;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.65;

}
.infoNewArt h2, .infoNewArt button {
    position: relative;
}
.infoNewArt .btn{

    border-color: #c9d5bf;
    border-style: outset; 
}
.infoNewArt .btn:hover{ 
    border-style: inset;
}
a:active, a:focus{
    outline: none !important; 
    outline-offset: 0px !important;    
    border-color: transparent;   
}
.btn-mprimary {
    padding: 10px 30px;
    color: #fff;
    background-color: #676767;
    border-color: #5a5a5a;
    min-width:85px;
}
.btn-mprimary:hover {
    background-color: #4d4d4d;
    color:white;
}
.btn-mdanger {
    padding: 10px 30px;
    color: white;
    background-color: #ff4f4f;
    border-color: #ff1414;
    min-width:85px;
}
.btn-mdanger:hover {
    background-color: #ff2727;
    color:white;
}
.btn-msecundary {
    min-width:85px;
    padding: 10px 30px;
    background-color: #EFEFEF;
}
.btn-mprimary:active, .btn-mprimary:focus,.btn-msecundary:active, .btn-msecundary:focus{
    outline: none !important; 
    outline-offset: 0px !important;    
    border-color: transparent;   
}
.my-infoModal{
    border:4px solid #308f93;  
    background-color: white;
}
.backMod{
    background-color: #8fc2c7; 
    width: 130px;
}
.backMod:hover{
    background-color: #83bac0; 
}
.ano{
    background-color: #d5ebcc; 
    width: 130px;
}
.ano:hover{
    background-color: #aae2ca; 
}
.nie{
    background-color: #ef9793;
    width: 130px;
}
.nie:hover{
    background-color: #d87774;
}
.funkcna{
    background-color: #fbdec2;
    width: 145px;
    padding-left: 5px;
    padding-right: 5px;
}
.funkcna:hover{
    background-color: #f1caa5;
}
.my-infoModal h2{
    color: #455a6f;
}
.btn-register{
    margin-top: -5px;
    width:auto;
    border:2px solid rgba(20, 148, 150,0.1);
    background-color:  white;
    padding-left: 10px!important;
    padding-right:10px!important;

}
.btn-register:hover{

    -webkit-box-shadow: inset 0px 0px 15px 5px rgba(20, 148, 150,0.2); 
    box-shadow: inset 0px 0px 10px 3px rgba(20, 148, 150,0.25);
}
button:active, button:focus, button:hover{
    outline: none !important; 
    outline-offset: 0px !important;    
    border-color: transparent;

}
.btn:checked + .btn:focus, .btn:active + .btn:focus, .btn:active:focus, .btn.active:focus, .show > .btn:focus {
    box-shadow: none;
}
.btn-check:focus + .btn, .btn:focus {   
    box-shadow: none;
}
.form-check-input:checked + .form-check-input:focus, .form-check-input:active + .form-check-input:focus, .form-check-input:active:focus, .form-check-input.active:focus, .show > .form-check-input:focus {
    box-shadow: none;
}
.form-check-input:focus + .form-check-input, .form-check-input:focus {   
    box-shadow: none;
    border-color: #676767; 
}
.form-check-input:checked {
    background-color: #676767; 
    border-color: #676767; 
    box-shadow: none;
}

/*kniha*/
.bookView .nadpis{
    font-size:1vw;
}
.bookView .text{
    font-size:0.8vw; 
}
.bookView .textDes{

    text-align: justify; 
    white-space: normal;   
}

.bookView{
    font-family: 'Open Sans';
}

/*cookies*/
@media (max-width: 767px){
    .cookie_window {
        width: 100%!important;
        max-height: 100%;
        overflow-y: auto;
    }
}
.cookie_window{
    position: relative;
    margin: 4% auto;
    top: 0px;
    min-height: 110px;
    width: 70%;
    padding: 24px 24px 24px 24px;
    outline: 0;
    border-radius: 4px;  
}
.absol_cookie{
    position: absolute;
    top:0px;
    left: 0px;
    height:100%;    
    width: 100%;    
    z-index: 10001;

}

#cookie-setings span{  
    font-size: 0.8em;
    border-top: 1px solid #F2f2f2; 
    display: block;
}
.cookie-setings .text{  
    font-size: 0.8em;
}
.cookie-setings  a{
    color: #f48a4f;
}

#cookie_head{
    margin-bottom: 20px

}
#full_win{
    position: absolute;
    top:0px;
    left: 0px;
    height:100%;    
    width: 100%;
    background-color: black;
    opacity: 0.8;
    z-index: 10000;

}

.cookie-buttons {
    text-align: right;
    padding: 20px 0px 0px 0px;
}
.cookiestab td, cookiestab th{
    text-align: left;
}

.autocomplete{
    position:relative;
    display:inline-block;
}
.autocomplete-items{
    filter: drop-shadow(0px 0px 3px #32a5a7);
    position:absolute;
    z-index: 99;
    left:0px;
    width:100%;
    top:35px;

}
.autocomplete-items div {
    text-align:start;
    padding:8px 13px;
    cursor: pointer;
    background-color: #fff;
    border-bottom:  1px solid #f0f1f3;
    border-top:none;
    border-left: 1px solid #c4c8d0;
    border-right: 1px solid #c4c8d0;
}
.autocomplete-items div:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom: 1px solid #c4c8d0;
}
.autocomplete-items div:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-top: 1px solid #c4c8d0;
}
.autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: #e2f6f6;
}
.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: #f7f7f7 !important; 
}
/*hodnotenie*/
@media (max-width: 767px){
    .raiting_window {
        width: 100%!important;
        max-height: 100%;
        overflow-y: auto;
    }

}
@media (max-width: 1200px){
    .raiting_window .close_button.close-lightbox{
        right:10px;
        font-size: 70px;  
    }
}
.raiting_window .close_button{
    top:-25px;
    right:50px;
    font-size: 70px;
}
.raiting_window{
    position: relative;
    margin: 0 auto;
    top: 0px;
    min-height: 110px;
    width: 100%;
    outline: 0;
    border:none;
    overflow-y: auto;
}
.absol_raiting{
    position: absolute;
    top:0px;
    left: 0px;
    height:100%;    
    width: 100%;    
    z-index: 1041;

}

#full_win_raiting{
    position: absolute;
    top:0px;
    left: 0px;
    height:100%;    
    width: 100%;
    background-color: white;   
    z-index: 1040;
    overflow-y: auto;
}

/*

* lightbox jquery plugin.
* created by mohamed faisal.
* url: https://www.facebook.com/Iam.MohammedFaisal

*/

.lightboxR {
    /*  height: 200px;
      width: 200px;
      float: left;
      margin: 10px;*/
}

.img-popup {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.9);
    text-align: center;
    display: none;
    z-index: 9999999;
    animation: pop-in;
    animation-duration: 0.5s;
    -webkit-animation: pop-in 0.5s;
    -moz-animation: pop-in 0.5s;
    -ms-animation: pop-in 0.5s;

}

.img-popup img {
    position: absolute;
    top: 50%;
    width: auto;
    /* max-height: 80vh;**/
    display: inline-block;
    transform: translate(-50%, -50%);
}

.close-lightbox {
    position: absolute;
    top: 0px;
    right: 3vw;
    width: 30px;
    height: 80px;
    font-size: 80px; 
    z-index: 99;
    cursor: pointer;
    text-shadow: 0px 0px 3px #ffffff;
}
@media (max-width: 600px){
    .close-lightbox {right:8vw} 
}
.array-lightbox-right:hover, .array-lightbox-left:hover, .close-lightbox:hover{
    color:#cdcdcd;
}
.array-lightbox-right {
    display:block;
    position: absolute;
    top: 50%;
    width: 30px;
    height: 80px;
    font-size: 80px;
    z-index: 99;
    cursor: pointer;
    font-weight: bold;
    text-shadow: 0px 0px 3px #ffffff;
    right:50px;
}
.array-lightbox-left {
    display:block;
    position: absolute;
    top: 50%;
    width: 30px;
    height: 80px;
    font-size: 80px;
    z-index: 99;
    cursor: pointer;
    font-weight: bold;
    text-shadow: 0px 0px 3px #ffffff;
    left:50px;
}
.lightboxfadeout{
    animation: fadeout;
    animation-duration: 0.2s;
    -webkit-animation: fadeout 0.2s;
    -moz-animation: fadeout 0.2s;
    -ms-animation: fadeout 0.2s;
}

@keyframes pop-in {
    0% {
        opacity: 0;
        transform: scale(0.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes pop-in {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.1);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes pop-in {
    0% {
        opacity: 0;
        -moz-transform: scale(0.1);
    }
    100% {
        opacity: 1;
        -moz-transform: scale(1);
    }
}


@keyframes fadeout {
    100% {
        opacity: 0;
        transform: scale(0.1);
    }
    0% {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes fadeout {
    100% {
        opacity: 0;
        -webkit-transform: scale(0.1);
    }
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes fadeout {
    100% {
        opacity: 0;
        -moz-transform: scale(0.1);
    }
    0% {
        opacity: 1;
        -moz-transform: scale(1);
    }
}
/*detail*/
@media (max-width: 767px){
    .detail_window {
        width: 100%!important;
        max-height: 100%;
        overflow-y: auto;
    }
}
@media (max-width: 1200px){
    .detail_window .close_button.close-lightbox{
        right:25px;
        font-size: 70px;  
    }
}
.detail_window .close_button{
    top:-10px;
    right:65px;
    font-size: 70px;
}
.detail_window{
    position: relative;
    margin: 0 auto;
    top: 0px;
    min-height: 100%;
    width: 100%;
    outline: 0;
    border:none;  
}
.absol_detail{
    position: absolute;
    top:0px;
    left: 0px;
    height:100%;    
    width: 100%;    
    z-index: 1050;

}

#full_win_detail{
    position: absolute;
    top:0px;
    left: 0px;
    height:100%;    
    width: 100%;
    background-color: white;
    z-index: 1049;
}
.modal-body {
    max-height: calc(100vh );
    overflow-y: auto;
}

#platno .noteInfo {      
    position:absolute;          
    margin-top:-8px;
    margin-left:-5px;
    z-index:92;
    left:0;
    cursor: pointer;
}

.bodiky {   
    cursor: pointer;
    position:absolute;                            
    z-index:92;
    right:0px;
    top:0px;
    background-repeat: no-repeat;
    background-size: cover;
    background: radial-gradient(circle at 65% 15%, #1dd8db 1px, #1bc7ca 3%, #149496 60%, #1bc7ca 100%);
    border-radius: 100px;
    border: solid white 2px;
}
.bodiky2 {   
    position:relative;
    cursor: pointer;
    margin-left:-20px;                            
    z-index:92;
    right:0px;
    top:0px;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #777; 
    border-radius: 100px;
    border: solid white 2px;
}
.bodiky:hover{
    background: radial-gradient(circle at 65% 15%, #1bc7ca 1px, #19b6b9 3%, #0d6162 60%, #19b6b9 100%);
    border: solid white 2px;
}
.bod {       
    position:absolute;                    
    z-index:92;          
    color: white;
    text-align: center;
    font-weight: bold;

}
.bod2 {       
    position:absolute!important;                       
    z-index:92;          
    color: white;
    text-align: center;
    font-weight: bold;
}


.boxB{

    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    position: relative;  
    background-image:linear-gradient(180deg, rgba(27,129,133,1) 0%, rgba(20,148,150,1) 15%, rgba(227,236,236,1) 89%, rgba(243,243,243,1) 100%);


} 
.boxiky{filter: drop-shadow(0px 0px 1px #1b8185);}
.box{   
    margin-top: -3px;
    padding: 10px;
    position:absolute;  
    left:0;
    overflow-y:auto;
    overflow-x:hidden;
    border-bottom: 4px solid #f2f2f2!important;
    border-left: 1px solid transparent!important;
    border-right: 1px solid transparent!important;
    border-top: 1px solid transparent!important;
    background-color: #f2f2f2!important;
    /*  margin-bottom:10px;
      background-image:linear-gradient(to bottom right,#66b6c0,#ececed,#ececed,white,#ececed,#66b6c0  ); */
    z-index:93;
    background-color: #f2f2f2!important;
    width: 100%;
}
.box-header{opacity: 0.7; height:60px }
.boxB{ height:65px }
#gallery, #galleryNo, #galleryYes { float: left; width: 100%; min-height: 12em; flex-wrap: wrap; display: flex !important;align-content: flex-start;}
.gallery.custom-state-active { background: #eee; }
.gallery li { float: left;  text-align: center; position:relative; cursor: grab;}
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
.gallery li a.ui-icon-zoomin { float: left; }
.gallery li img { width: 10%; cursor: grab;top: 0;bottom: 0;left:0;margin: auto;border:solid white 2px;}
/* .gallery li:hover{transform: scale(1.05);z-index: 999999}*/
.ui-widget-content a{

}

#platno .ikonky{
    display: inline-block;
    right:0;
    margin-top:-10px;
    cursor: pointer;
    position:absolute;
}

#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: white; z-index:9999; }

/*body*/
@media (max-width: 767px){
    .body_window {
        width: 100%!important;
        max-height: 100%;
        overflow-y: auto;
    }
    @media (max-width: 1200px){
        .body_window .close_button.close-lightbox{
            right:25px;
            font-size: 70px;  
        }
    }
}   
.body_window .close_button{
    top:-10px;
    right:65px;
    font-size: 70px;
}
.body_window{
    position: relative;
    margin: 0 auto;
    top: 0px;
    min-height: 100%;
    width: 100%;
    outline: 0;
    border:none;  
}
.absol_body{
    position: absolute;
    top:0px;
    left: 0px;
    height:100%;    
    width: 100%;    
    z-index: 1050;

}

#full_win_body{
    position: absolute;
    top:0px;
    left: 0px;
    height:100%;    
    width: 100%;
    background-color: white;
    z-index: 1049;
} 
.allPoints .card{
    border-color: #149496;
    cursor: move;
}
.allPoints .card-body {  
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;   
}
.triangle-top-left {
    width: 0;
    height: 0;
    position: absolute;
    opacity:1;
    top:0;
    left:0;
    border-top: 70px solid #149496;
    border-right: 70px solid transparent;
}
.trianglePoints {
    position: absolute;
    top:4px;
    left: 10px;
    font-size: 20px;
    color:white;
    font-weight: bold;
}
/* manager raiting*/
#noteArtRaiting{
    width: 50%;
    max-height: 80px;
    overflow: auto;
} 
@media screen and (max-width: 850px) {
    #noteArtRaiting{
        width: 90%;}
}
#noteArtRaiting::-webkit-scrollbar {
    width: 0.5em;
}
#noteArtRaiting::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
#noteArtRaiting::-webkit-scrollbar-thumb {
    background-color: #66b6c0;             
}   
#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
.sidenav {
    height: 100%;
    width: 0;
    margin-left:10%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #66b6c0;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 30px;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;

}
.close_button{
    float:right;
    margin-top:-30px;  
}
#managerDIV{
    position: relative;
    min-height: 96vh;
}
.panelControl{
    bottom:0;
    margin-top: 80px;
    width: 100%;
    text-align: center;
}
@media (max-width: 767px){
    .panelControl{ 
        width: 100%;
    }
}

.colB, .btn-group{
    width: 20%;
}
.colB button, .btn-group button{
    /*background-color: #66b6c0;*/
    background-color:#f4d3c0 ;
    height: 40px;
    font-weight: bold;
    border:solid 1px #efcebb;
}
.colB button:hover, .btn-group button:hover{
    background-color:#efcebb;  
    border:solid 1px#efcebb;
    transform: scale(1.02,1.02);
}
@media (max-width: 850px) {
    .colB{width:50%}
    .btn-groupB{width:100%}
}
@media (max-width: 350px) {
    .colB,.btn-groupB {width:100%}
}
.panelControl .dropdown-menu{
    min-width: 100px;
    max-width: 100px!important;  
    height: 200px;
    overflow-y: scroll;
    text-align: center!important;
}
.dropdown-menu-history{
    position:absolute;
    left:100%!important;
    top:5px!important;
    border:none!important;
}
.panelControl .btn-group span{
    background-color: #66b6c0;
    height: 40px;
    font-weight: bold; 
    cursor: default;

}
.panelControl button{color:white;height:40px;}
.panelControl button:hover{color:white; color:white;font-weight: bold;}
.panelControl li button:hover{
    background-color: #a1d7de!important;
}
.panelControl .dropdown-menu::-webkit-scrollbar {
    width: 0.5em;
}
.panelControl .dropdown-menu::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.panelControl .dropdown-menu::-webkit-scrollbar-thumb {
    background-color: #66b6c0;            
}    
.pas{
    height:20px; width:100%;background-repeat: no-repeat;background-size: cover;   
}      

.noPoint{
    width:150px;               
    border-radius: 5px;                                
    margin-top: 30px;    
    font-weight: bold;
}          
.noPoint.nie:hover{

}         
.noPoint.nie{background: linear-gradient(90deg, rgba(173,64,61,1) 0%, rgba(240,95,80,1) 61%, rgba(246,161,152,1) 100%);
             border:solid 1px rgba(245,212,209,1);
             color:white;

}
.noPoint.nie:hover {
    background: rgba(173,64,61,0.95); 
}
.noPoint.ano{background: linear-gradient(90deg,#2ae0e3  0%, #1bc7ca 22%, #149496 80%, #1b8185 100%);
             border:solid 1px rgba(213,235,204,1);
             color:white;
}
.noPoint.ano:hover {
    background:#1b8185;
}



.dot { 
    color:white;
    height: 35px;
    width: 35px;
    background: radial-gradient(circle at 65% 15%, #1dd8db 1px, #1bc7ca 3%, #149496 60%, #1bc7ca 100%);
    border-radius: 50%;
    display: inline-block;
}   

.dot:hover{background: radial-gradient(circle at 65% 15%, #1bc7ca 1px, #19b6b9 3%, #0d6162 60%, #19b6b9 100%); }    

/*nahlad*/
@media (max-width: 767px){
    .nahlad_window {
        width: 100%!important;
        max-height: 100%;
        overflow-y: auto;
    }
}
@media (max-width: 1200px){
    .nahlad_window .close_button.close-lightbox{
        right:25px;
        font-size: 70px;  
    }
}
.nahlad_window .close_button{
    top:-10px;
    right:65px;
    font-size: 70px;
}
.nahlad_window{
    position: relative;
    margin: 0 auto;
    top: 0px;
    min-height: 100%;
    width: 100%;
    outline: 0;
    border:none;  
}
.absol_nahlad{
    position: absolute;
    top:0px;
    left: 0px;
    height:100%;    
    width: 100%;    
    z-index: 1050;

}

#full_win_nahlad{
    position: absolute;
    top:0px;
    left: 0px;
    height:100%;    
    width: 100%;
    background-color: black;
    z-index: 1049;
}
.b-raiting{
    width:100%;
    background-color: #777;
    border-radius: 8px;
    border:1px solid #777;
    color:whitesmoke;
    text-align: center;
    padding: 0;
}
.b-raiting:hover{
    background-color:#5a5858;
    color:whitesmoke;
}
.topnav {
    overflow: hidden;

}
.topnav span {
    float: left;
    display: block;
    margin-top:10px;
    font-weight: bold;
    font-size: 1.3em;
}
.topnav button,.topnav a {
    float: right;
    display: block;
}

/*editorske*/
#helpBtn {
    display: block;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background: linear-gradient(90deg, rgba(212,65,63,1) 0%, rgba(250,146,85,1) 100%);
    border-top-left-radius: 50px;
    color: white;
    cursor: pointer;         
    border-radius: 10px;
    transition: width 2s;           
}

#helpBtn:hover{
    content:'nfo'; 
    width:95px; 
    background: linear-gradient(90deg, rgba(212,65,63,1) 0%, rgba(250,146,85,1) 100%);
    border-top-left-radius: 50px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 50px;
    border-top-right-radius: 15px;   
}
.tab{display:none;
     border:2px solid darkgray!important;   
     position:fixed;
     bottom: 50%;
     right: 20px;
     z-index: 9999;
     background-color: white;
     ; 
}
.tab:hover{cursor: all-scroll;}
.opI{opacity: 0.5;}
span.bi-clipboard, span.bi-clipboard-check{font-size: 3em;cursor: pointer;}

.b-menu{width:60px;margin-left: 10px;font-size: 1.8em}
@media (max-width: 445px){
    .b-menu{width:40px!important;margin-left: 5px!important;font-size: 1.4em!important}
}
@media (max-width: 531px){
    .b-menu{width:50px;margin-left: 7px;font-size: 1.6em}
}
/*galeria*/
@media (max-width: 767px){
    .galeria_window {
        width: 100%!important;
        max-height: 100%;
        overflow-y: auto;
    }
}
@media (max-width: 1200px){
    .galeria_window .close_button.close-lightbox{
        right:25px;
        font-size: 70px;  
    }
}
.galeria_window .close_button{
    top:-10px;
    right:65px;
    font-size: 70px;
}
.galeria_window{
    position: relative;
    margin: 0 auto;
    top: 0px;
    min-height: 100%;
    width: 100%;
    outline: 0;
    border:none; 
    background-color:#222222;
    z-index: 1001;
    box-sizing: border-box;

}
.absol_galeria{
    position: absolute;
    top:0px;
    left: 0px;
    height:100%;    
    width: 100%;    
    /* background-color: #222222; */
}
.absol_book{
    position: absolute;
    top:0px;
    left: 0px;
    height:100%;    
    width: 100%;    
    background-color: rgba(20,148,150,0.1); 
}
#full_win_galeria{
    position: absolute;
    top:0px;
    left: 0px;
    height:100%;    
    width: 100%;
    background-color: #222222;

}
#book_full{  position: absolute;
             top:0px;
             left: 0px;
             height:100%;    
             width: 100%;}
/*vyskakovaci mail*/
@media (max-width: 767px){
    .mail_window {
        width: 100%!important;
        max-height: 100%;
        overflow-y: auto;
    }
}
@media (max-width: 1200px){
    .galeria_mail .close_button.close-lightbox{
        right:25px;
        font-size: 70px;  
    }
}
.mail_window .close_button{
    top:-10px;
    right:65px;
    font-size: 70px;
}
.galeria_mail{
    position: relative;
    margin: 0 auto;
    top: 0px;
    min-height: 100%;
    width: 100%;
    outline: 0;
    border:none; 
    background-color:#222222;
    z-index: 1001;
    box-sizing: border-box;

}
.absol_mail{
    position: absolute;
    top:0px;
    left: 0px;
    height:60%;    
    width: 60%;    
    z-index:9999;
    /* background-color: #222222; */
}

#full_win_mail{
    position: absolute;
    top:0px;
    left: 0px;
    height:60%;    
    width: 60%;
    background-color: #222222;

}
/*pdfreader*/
@media (max-width: 767px){
    .pdf_window {
        width: 100%!important;
        max-height: 100%;
        overflow-y: auto;
    }
}
@media (max-width: 1200px){
    .pdf_window .close_button.close-lightbox{
        right:25px;
        font-size: 70px;  
    }
}
.pdf_window .close_button{
    top:-10px;
    right:65px;
    font-size: 70px;
}
.pdf_window{
    background-color: #333;
    position: relative;
    margin: 0 auto;
    top: 0px;
    min-height: 100%;
    width: 100%;
    outline: 0;
    border:none;  
}
.absol_pdf{
    position: absolute;
    top:0px;
    left: 0px;
    height:100%;    
    width: 100%;    
    z-index: 1050;

}

#pdf_content{
    position: absolute;
    top:0px;
    left: 0px;
    height:100%;    
    width: 100%;

    z-index: 1049;
}


.repare_window{
    background-color: whitesmoke;
    position: relative;
    margin: 0 auto;
    top: 100px;
    height: 300px;
    width: 500px;
    outline: 0;
    border:1px solid #c4c4c4; 
    border-radius: 5px;
}

.book_window{
    overflow: auto;
    background-color: white;
    position: relative;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    outline: 0;
    border:1px solid #c4c4c4; 
    border-radius: 5px;
}

/*profil sutaziaci*/
@media screen and(max-width: 500px), (max-height:500px){
    .vlavo,.vpravo{font-size: 5em!important;}
    .vpravo{right:45px!important}
    .vlavo{left:-10px!important}
    .navigacia_fotky .bi{font-size:1.5em!important;}
    
}
.vlavo,.vpravo,.x_but{display: block;                 
                      width: 30px;
                      height: 100px;
                      font-size: 6em;
                      position: absolute;
                      top: 0%;
                      cursor: pointer;
                      font-weight: bold;
                      text-shadow: 0px 0px 10px #ffffff;z-index:999;}   
.vlavo,.vpravo{z-index:999;}
.x_but{z-index:1000;}

#body_galeria{height:auto; width:100%;background-size: contain;background-position: center; background-repeat: no-repeat;left:0%;right:0%;}

.navigacia_fotky .bi{cursor: pointer;font-weight: bold;font-size: 2em;}

.activFoto{filter: none;}
.neactivFoto{filter: grayscale(1);}
span.x_but:hover,.vlavo:hover,.vpravo:hover,.neactivFoto:hover,.min:hover{ color: #FFFFFF;text-shadow: #FFF 0px 0px 5px, #FFF 0px 0px 10px, #FFF 0px 0px 15px, #9d9d9d 0px 0px 20px, #9d9d9d 0px 0px 30px, #9d9d9d 0px 0px 40px, #9d9d9d 0px 0px 50px, #9d9d9d 0px 0px 60px;}
.navigacia_fotky .page-link {border:none!important;background-color: transparent}

.card_pag{border:1px solid #b2b2b2;box-shadow: 0px 0px 10px 0px #FFFFFF;background-size: cover;background-position:center; background-repeat:no-repeat; width: 50px; height:50px; }
.page-item button{padding:0;}


img.profil {           
    max-width:450px;
}
@media screen and (max-width: 1300px){
    img.profil{border-width:6px 12px 18px 21px;     
    }
    .logoProfil img{width:15vw!important}
}
@media screen and (max-width: 1000px){
    img.profil{border-width:3px 6px 9px 11px;}
    .logoProfil img{width:18vw!important}
}
@media screen and (max-width: 768px){
    .posun{padding:50px 0px 30px 0px;     
    }
    #scroll-down-animation {
        top: 5%!important;
    } 
    .logoProfil{
        top:10px!important;
        left:2%!important;   
    }
    .logoProfil img{width:20vw!important;}
}
@media screen and (max-width: 550px){
    #scroll-down-animation {
        top: 2!important;
    } 

    h2{margin-top:60px;}
    .mouse {height:40px;}

}

.opis{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
}
.krivka{
    background:white;

    margin-top:30px;
    background-color:white;
}
.modal-body{padding:0;}
#scroll-down-animation {
    z-index: 999999;
    top: 8%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);

}
.mouse {
    margin: 0 auto;
    display: block;
    border-radius: 50px;
    border: 2px solid #222222;
    height: 60px;
    width: 30px;
    position: relative;
    outline: 2px solid white;
}
.move {
    position: absolute;
    background-color: #676767;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    left: 50%;
    transform: translateX(-50%);
    animation: move 2s linear infinite;
}

.move2 {

    position: absolute;
    color: #676767;
    left: 50%;
    transform: translateX(-50%);
    animation: move 2s linear infinite;
    display: flex;
    justify-content: center;
}
@keyframes move {
    0% {
        transform: translate(-50%,0px);
        opacity: 0;
    }
    50% {
        transform: translate(-50%,25px);
        opacity: 1;
    }
    100% {
        transform: translate(-50%,40px);
        opacity: 0;
    }
}
.logoProfil{
    position:absolute;top:80px;
    left:5%;   
}
.logoProfil img{width:10vw;}
.mcard-bodyP{background-size: contain;background-position: center;background-repeat: no-repeat;}
.hisCardP{position:relative;width:290px; height: 290px;  border: 5px solid white; outline: 1px solid #f0f0f0;cursor: zoom-in;}
.hisCardP:hover{         
    background: #666666; /* Black background with 0.5 opacity */
}
@keyframes facebook{
    from{color: #a1a1a1;background-color:#fafafa;border:solid 1px #efefef;}
    to{background-color: #3b5998;color:white;border:none}
}
@keyframes instagram{
    from{color: #a1a1a1;background-color:#fafafa;border:solid 1px #efefef;}
    to{background: radial-gradient(circle at 30% 110%, #ffdb8b 0%, #ee653d 25%, #d42e81 50%, #a237b6 75%, #3e5fbc 100%);color:white;border:none}
}

.soc_siete{
    list-style: none;
    margin-left: -50px;
}

.soc_siete .ins:hover{animation: instagram 2s ease ;}
.soc_siete .fac:hover{animation: facebook 2s ease ;}
.soc_siete .fac svg:hover{fill:white}
.soc_siete a{
    color: #a1a1a1;
    background-color:#fafafa;
    border:solid 1px #efefef;
    border-radius: 8px;
    padding:8px 5px;

}
.soc_siete a:hover{background-color:#efefef;color:grey;}
.soc_siete li{padding:12px;text-align:center;cursor:pointer}
@media (max-width: 1200px) {            
    .soc_siete{ justify-content: flex-start}
}
@media (max-width: 768px) {            
    .soc_siete{ margin-left: -50px;}
}

/* profil sutraziacich*/

.navigacia_fotky .bi{cursor: pointer;font-weight: bold;font-size: 2em;}

.activFoto{filter: none;}
.neactivFoto{filter: grayscale(1);}
span.x_but:hover,.vlavo:hover,.vpravo:hover,.neactivFoto:hover,.min:hover{ color: #FFFFFF;text-shadow: #FFF 0px 0px 5px, #FFF 0px 0px 10px, #FFF 0px 0px 15px, #9d9d9d 0px 0px 20px, #9d9d9d 0px 0px 30px, #9d9d9d 0px 0px 40px, #9d9d9d 0px 0px 50px, #9d9d9d 0px 0px 60px;}
.navigacia_fotky .page-link {border:none!important;background-color: transparent}

.card_pag{border:1px solid #b2b2b2;box-shadow: 0px 0px 10px 0px #FFFFFF;background-size: cover;background-position:center; background-repeat:no-repeat; width: 50px; height:50px; }
.page-item button{padding:0;}


img.profil { 

    max-width:450px;
}
@media screen and (max-width: 1300px){
    img.profil{border-width:6px 12px 18px 21px;     
    }
    .logoProfil img{width:15vw!important}
}
@media screen and (max-width: 1000px){
    img.profil{border-width:3px 6px 9px 11px;}
    .logoProfil img{width:18vw!important}
}
@media screen and (max-width: 768px){
    .posun{padding:50px 0px 30px 0px;     
    }
    #scroll-down-animation {
        top: 5%!important;
    } 
    .logoProfil{
        top:10px!important;
        left:2%!important;   
    }
    .logoProfil img{width:20vw!important;}
}
@media screen and (max-width: 550px){
    #scroll-down-animation {
        top: 2!important;
    } 

    h2{margin-top:60px;}
    .mouse {height:40px;}

}

.opis{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;

}
.krivka{
    background:white;

    margin-top:30px;
    background-color:white;
}
.modal-body{padding:0;}
.logoProfil img{width:10vw;}

@media screen and(max-width: 500px), (max-height:500px){
    #profil.vlavo,.vpravo{font-size: 5em!important;}
    #profil.vpravo{right:45px!important}
    #profil.vlavo{left:-10px!important}
    #profil.navigacia_fotky .bi{font-size:1.5em!important;}
}
#profil.vlavo,#profil.vpravo,#profil.x_but{
    display: block;                 
    width: 30px;
    height: 100px;
    font-size: 6em;
    position: absolute;
    top: 0%;
    cursor: pointer;
    font-weight: bold;
    text-shadow: 0px 0px 10px #ffffff;z-index:99999;}  
#body_galeriaP{height:auto; max-width:350px;width:100%;background-size: contain;background-position: center; background-repeat: no-repeat;left:0%;right:0%;}
.mcard-body{background-size: contain;background-position: center;background-repeat: no-repeat;}
.hisCard{position:relative; width:100%;height:18vw; max-width:380px; border: 5px solid white; outline: 1px solid white;cursor: zoom-in;box-shadow:  0px 0px 4px 1px rgba(20,148,150,0.4);}       
@media (max-width: 1399px){.hisCard {height:22.5vw}}
@media (max-width: 991px){.hisCard {height:34vw}}
@media (max-width: 767px){.hisCard {height:39vw}}
@media (max-width: 400px){.hisCard {height:75vw}}
@media (max-width: 580px){.card-text {display:none}}



.vyhodnotenie_img:hover{
    opacity:1;         
}
.vyh_a{display: flex;flex-direction: column;justify-content: space-around;position:relative; height:350px; min-width: 300px;align-items: flex-end}
.vyhodnotenie_img{opacity:0.8;filter: drop-shadow(2px 4px 6px black); margin-top:-20px; }
.nadpisImg{max-width:30vw;} 
.riadok_vyhodnotenie{
    height:350px;
    border-top: 1px solid #a1ccd2;         
}

.riadok_vyhodnotenie .autor:hover{font-weight: bold;}
.umiestnenieL{align-items: center;justify-content: space-around} 
.umiestnenieR{align-items: center;justify-content: space-around} 
@media (max-width: 700px) {  
    .umiestnenieR{align-items: flex-start;flex-direction: column;margin-left: 70px;} 
    .umiestnenieL{align-items: flex-end;flex-direction: column-reverse;margin-right: 70px;} 
    .riadok_vyhodnotenie{height:420px;}
    .vyh_a{height:420px;align-items: center}
    .nadpisImg{max-width:50vw;}
}
@media (max-width: 500px) {  
    .umiestnenieR{align-items: center;flex-direction: column;margin-left: 0px;} 
    .umiestnenieL{align-items: center;flex-direction: column-reverse;margin-right: 0px;} 
    .zoradDiela{align-items: center;}
    .nadpisImg{max-width:60vw;}
    .riadok_vyhodnotenie{width:90%}
}

.myProgress {
    width: 100%;
    -webkit-box-shadow: 5px 0px 8px 1px #DDDDDD; 
    box-shadow: 2px 0px 5px 1px #DDDDDD;
    display: flex;
}

.myBar {
    height: 50px;
    background: linear-gradient(90deg, rgba(162,204,210,0.2) 0%, rgba(162,204,210,1) 10%, rgba(249,143,131,1) 34%, rgba(249,143,131,1) 74%, rgba(65,87,107,0.8) 100%);
    text-align: end;
    line-height: 30px;
    color: black;
    font-weight: bold;
}
#infoRadenie{
    -webkit-box-shadow: 5px 5px 15px 5px #CACACA; 
    box-shadow: 5px 5px 15px 5px #CACACA;
    padding:16px;background-color:#fbad71;display:none; position:absolute; top:20%;width:90%;left:5%;text-align:center;padding-top:30px;padding-top: 30px
}
.miniart:hover{transform: scale(2)}
li{cursor: move;}
.samo{cursor:no-drop}
.hod{position:absolute; left:47%;border:1px outset #f98f83;border-radius: 25px;background: radial-gradient(circle, rgba(225,251,255,0.657) 10%, rgba(162,205,210,1) 100%);color: #40566b; font-size: 16px;width:34px;height:34px;text-align: center;margin-top:8px;
     -webkit-box-shadow: 0px 0px 5px 3px #BEE2E7; box-shadow: -1px -1px 5px 3px #BEE2E7;}
@media (max-width: 1000px){
    .vidNazov{display:none;}
}
@media (max-width: 500px){
    .vidMeno{display:none;}
    .minI{display:inline-block!important;}
    .nav_prof{left:-60px!important}
}
.hodBod{position:absolute;top:4px;}  
.winner{position:absolute;
        z-index: 1;
        background-repeat: no-repeat;
        font-size: 4em;
        color:transparent!important;
        background-size: contain; 
        margin-left: -15px;
        margin-top: -15px;
        transform: rotate(-10deg);
        filter: drop-shadow(2px 3px 4px #40566b);
}
.winner .text{font-size:0.5em;  transform: rotate(-40deg);  left: 50%;top: 32%; color:#40566b}   

.divAukcia{position:relative;height:120px;display:none;}
@media (max-width: 1300px){
    .centerAukcia {font-size: 1.5em!important;}
}
@media (max-width: 800px){
    .centerAukcia.cent {top: 0%!important;
                        -ms-transform: translate(-50%, 0%)!important;
                        transform: translate(-50%, 0%)!important;}
}
@media (max-width: 500px){
    .centerAukcia {font-size: 1em!important;}
    .centerAukcia.cent{ 
        top:25%!important;
    }
}
.centerAukcia {
    text-shadow: 0 0 2px #40566b;
    color:#a2ccd2;
    margin: 0;
    position: absolute;
    font-size: 2em;
}
.centerAukcia.cent{
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);}    
.centerAukcia.rig{
    bottom: 0;
    right: 0;
}

/*2022*/

/*Rozdelovnik*/
body, html {
    height: 100%;
    margin: 0;
}
.text-uvod-mobil{display:none;}
.bgUvod {
    color:white;  
    padding-top:100px;            
    background-position: center 0px;
    background-repeat: no-repeat, no-repeat;
    height: 100%;
    min-height: 700px;
    background-size:500px, cover;
}
.imgLogo{width:100%;}
.bgUvod .ban{
    border-left:1px solid white;padding-top:10px
}
.tx-nad{font-size: 4em;}
.smerovky{
    position:absolute;width:100%;
}

.smerovky a:hover{color:white; background-color: #a1ccd1; transform: scale(1.005,1.005);}
.smerovky a{width:230px;border-radius: 30px;color:white; font-weight: bold;font-size: 1.2em; padding:10px 0px;background-color:#ff9185}
.smerovky .cz{margin-right:50px;}
.smerovky .sk{margin-left:50px;}
.logoRes{padding-top:25px;margin-right:40px;}
.text3{display:none;}
@media (max-width: 1400px){
    .smerovky a{width:200px;}
    .smerovky .cz{margin-right:150px;}
    .smerovky .sk{margin-left:150px;}
}
@media (max-width: 1155px){
    .tx-nad{font-size: 3em;}
}
@media (max-width: 991px){
    .tx-nad{font-size: 2.5em;}
    .smerovky .cz{float:left;margin-left:20px;}
    .smerovky .sk{float:right;margin-right: 20px;}
    .smerovky a{width:150px;}
}
@media (max-width: 640px){
  
    .smerovkyMen{display: inline-block!important;margin-top:30px}
    .smerovkyMen{position:absolute; left: 50%;  -ms-transform: translate(-50%, 0%);  transform: translate(-50%, 0%);}
    .smerovky_bg{display: inline-block!important;}
    .smerovky{display:none!important}
    .smerovkyMenButton:hover{color:white; background-color: #a1ccd1; transform: scale(1.005,1.005);}
    .bgUvod {padding-top:40px;} 
    .smerovkyMen{margin-top:220px!important;text-align:center;}
    .smerovkyMenButton{width:250px;border-radius: 30px;color:white; font-weight: bold;font-size: 1.2em; padding:8px 0px; margin-top: 10px;margin-right: 0;background-color:#ff9185}
}
@media (max-width: 767px){
    .bgUvod {padding-top:60px;} 
    .tx-nad{font-size: 2em;}  
    .logoRes{ margin-left: -30px;margin-right: 60px;}
    .imgLogo{width:140%;}
}
@media (max-width: 795px){
    .text2{display:none}
    .text3{display:block}
}
@media (max-width: 600px){
    .logoRes{margin-right: 35px; margin-left: -30px;}
}


@media (max-height: 850px){
    .bgUvod {padding-top:10px;}  
}
@media (max-height: 672px){
    .text-uvod{margin-left:10px!important;}        
    .bgUvod.row>*{padding-left: 0!important;padding-right:0!important;}
}
@media (max-width: 600px){
    .text-uvod{display: none;}
    .text-uvod-mobil{display:inline-block;}
    .imgLogo{width:50%;margin-top:-100px;}
    .tx-nad{font-size: 1.8em;margin-top:15px;}
    .centText{position:absolute; margin: 0;left: 50%;-ms-transform: translate(-50%, 10%);transform: translate(-50%, 10%);             
    }
}
.bgUvodStart {
    position:relative;   
    color:white;            
    background-repeat: no-repeat, no-repeat;
    height: 212px;
    background-size:800px, cover;
} 
.bg-pozadie{
  height: 424px;  
  background-color: #1b8185;
  position:relative;
}
@media (max-width: 1250px) and (min-width: 992px){
    .bg-nadpis{transform: translate(0px, 43%)!important;  }
}
@media (max-width: 991px) and (min-width: 700px){
    .bg-nadpis{transform: translate(-15px, 75%)!important; font-size:0.7em!important }
}
@media (max-width: 700px) and (min-width: 640px){
    .bg-nadpis{transform: translate(-15px, 91%)!important; font-size:0.7em!important } 
}
.bgUvodStart .tx-nad{font-size: 3em;line-height: 110%; }
.bgUvodStart .center{margin: 0; position: absolute;top: 55%;left: 0%;-ms-transform: translate(17%, -55%);transform: translate(17%, -55%);}


.bg-nadpis{position:absolute;width:100%;transform: translate(0px, 33%);  top: 53%;}

@media (max-width: 640px){
    .paradox{width:230px;    transform: translate(-47%, -50%)!important}
     .bg-nadpis{transform: translate(-15px, 67%)!important; font-size:0.6em!important }
    .bgUvodStart { height: 162px; background-position: center 260px, center center;background-size: 600px, cover!important}
    .bgUvodStart .center{position:relative;}
    .textMob{margin-top:30px;}
    .odsekMensi{display:none;}
    .odsek{width:310px;position:absolute;right:20px;}  
    .containerText{top:0!important;-ms-transform: translateY(0%)!important; transform: translateY(0%)!important;}
    .bgUvodStart .tx-nad{font-size: 3.5em!important;    } 
    .containerText{right: unset!important}
    .bg-pozadie{ height: 324px!important;  }
}
@media (max-width: 576px){
    .paradox{   transform: translate(-47%, -61%)!important}
    .bg-pozadie{ height: 365px!important;  }
    .bg-nadpis{transform: translate(0px, 45%)!important;  top: 140%!important;}}

   
@media (max-width: 250px){
     .bgUvodStart { background-size:350px, cover!important;height:150px!important}
     .bg-nadpis{transform: translate(0px, 50%)!important;  top: 70%!important;}
    .bgUvodStart .tx-nad{font-size: 1em!important;}
    .bg-pozadie{ height: 290px!important;  }
}


.containerText{
    position:absolute;
}

.bgUvodStart .tx-nad{font-size: 4em;line-height: 110%;margin-top:40% }

@media (max-width: 1250px){
    .bgUvodStart .tx-nad{font-size: 3.5em;}
}
@media (max-width: 700px){
   
    .bgUvodStart .tx-nad{font-size: 3em;}
    .containerText{right: 300px}}

@media (max-width: 847px){

    .text2{display: none;}
    .text3{display: inline-block;}
}

/*jazyk*/
.but_skCz{color:white;border-radius:100%;padding:2px 0px 4px 0px;font-weight: bold;width:32px} 
.but_skCz:hover{color:white;transform: scale(1.07,1.04);}

.historia{margin-top:20px;}
.historia .profil{background-size: contain; background-repeat: no-repeat; background-position-x: center; background-position-y: center;}
.historia .art{background-size: contain; background-repeat: no-repeat; background-position-x: center; background-position-y: center;}
h2 { margin: 30px 0 0 0;}

.historia .ikonka{position:absolute;top:0px}
.historia .card-body{margin-top:15px;}
@media (max-width: 575px) {
    .historia .card{
        min-height:450px!important;
        width:300px;
        margin:0 auto;
    }    
    .historia .art{
        height:150px;
    }
    .historia .profil{
        height:120px;
    }
    .historia p{font-size: 15px;line-height: 15px;}
    .historia .ikonka{position:absolute;top:-8px;right:-4px}
    .historia .card-body{height:140px;margin-top:0px; }
    .ui-selectmenu-button.ui-button{ width:300px;}  
}
.historyText p{line-height: 1.5;}

.filter_history{
    display: flex;justify-content: flex-end;
}
.selectFilter{         
    padding-bottom:1px
}     

.selectFilter .ui-selectmenu-button.ui-button{
    background-color:transparent;
    border-color: #149597; 
    color:#666666;
}
.selectFilter .ui-selectmenu-button.ui-button:hover{color:#191919}
@media (max-width: 775px){.historia .profil{margin-top:15px;}.historyList{margin-top:10px}}     
@media (max-width: 575px){ .filter_history{flex-direction: column;}
                           .selectFilter .ui-selectmenu-button.ui-button{width:300px!important}
                           .selectFilter:first-child{padding:0px}
                           .selectFilter:last-child{padding-bottom:8px}}       


.opis a:hover{transform: scale(1.01);font-weight: bold}
.logoProfil{top:25px;}    
#profil .dielo{display: flex;align-items: flex-start;flex-direction: column;justify-content: flex-end;}
#profil .zostava{display: flex;flex-direction: column;justify-content: space-between; align-items: flex-start;}
#profil .dieloZostava{display: flex;flex-direction: column;align-items: flex-end;}
@media screen and (max-width: 1300px){
    #profil .dieloZostava{align-items:stretch;}
}
.opis a{
    margin-top:30px;
    font-weight: bold;
    color:white;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width:180px;    
    padding:8px 0 8px 0;
    border:1px solid white;
}
.info-tip-color{color:red;background-color: orange}
.tox .tox-statusbar {filter: opacity(0.2);}
.rowPod{border:1px solid #e8e8e8; padding:5px;}
.garant1,.garant2, .checkG{display:none;}
.garantD{background:  rgba(161,204,209,0.04);}
.garantD label, .garantD2 label{text-align: start!important;}
@media (max-width: 767px){
    .garantD{display:none ;background:rgba(161,204,209,0.04)}}
.garantD2{background:  rgba(255,145,133,0.04) ;}
@media (max-width: 767px){
    .garantD2{background:rgba(255,145,133,0.04)}}
.tlacSpat:hover svg{
    transition: 0.9s;
    transform: rotateY(360deg);
}
.tlacSpat{
    
    display: inline-block;
    width: auto;
    text-align: center;
}    

.spat{      
    margin-left:7px;
    background:#efefef;
    border-radius: 12px;
}
.spat:hover{background-color: #e8e8e8}

.column img{
    width: -webkit-fill-available;
    width: -moz-available;
}
.profil_bez{position:relative;display: flex;align-items: center;flex-direction: column}
.profil_bez button, .profil_bez a { 
    margin-top: 10px;
    background-color: #0e686a; 
    border: 1px solid #035859;
    color:#b6e0e1;  
    padding: 3px 0px; 
    cursor: pointer; 
    width: 100%; 
    display: block; 
    filter: drop-shadow(1px 1px 1px #b6e0e1);
    font-size: 0.9em;
}
.profil_bez img{margin-right:7px;margin-top:-3px}
.profil_bez svg{fill:#b6e0e1;}
.profil_bez  button:hover, .profil_bez  a:hover {
    background-color: #035859;
}
.aS{color: #32a5a7;}
.aS:hover{color:#1b8185;}
.aE{color: #2c88c9;}
.aE:hover{color:#2b6894;}
.aK{color:#c6b3be;}
.aK:hover{color:#a18194}
.sr-only .col-form-label{display:none}
#student_full_birthday {    display: flex; align-items: center;}
#student_full_birthday select{margin: 0 5px 0 5px}
@media (max-width: 830px){       
    .checkbox .form-check{margin-left:-25px}
}
.hourglass{    
    display:block;
    background:white;
    margin:1em auto;
    width:2em;
    height:4em;
    animation:hourglass 1.5s linear infinite;
}


@keyframes hourglass{
    0%{
        transform:rotate(0deg);
        box-shadow:
            inset #32a5a7 0 -0em 0 0,
            inset white 0 -2em 0 0,
            inset #32a5a7 0 -4em 0 0;
    }
    80%{
        transform:rotate(0deg);
        box-shadow:
            inset #32a5a7 0 -2em 0 0,
            inset white 0 -2em 0 0,
            inset #32a5a7 0 -2em 0 0;
    }
    100%{
        transform:rotate(180deg);
        box-shadow:
            inset #32a5a7 0 -2em 0 0,
            inset white 0 -2em 0 0,
            inset #32a5a7 0 -2em 0 0;
    }
}
.warpperHourglass{ top:50%;left:52%;
                   z-index: 999;
                   position: absolute;
                   width:9em;
                   height:9em;
                   border:1px solid transparent;
                   border-radius:100%;
                   font-weight: bold;
                   font-size: 1.5em;
                   -ms-transform: translate(-50%, -50%);
                   transform: translate(-50%, -50%);
                   display:none;
}  
.podmienky:hover{font-weight: bold;}


#qtip-0{
    background-color:#ececed!important;
    min-width: 150px!important;
    color:black!important;
    padding:10px;          
}
.undeLineAA:hover{
    text-decoration: underline;
}
.pocetNom{position: absolute;
          top: 5px;
          right: 18px;}
#profilFoto{max-height: 500px;}   
#profilButon .dropdown-menu {background-color:white;border:none;filter: drop-shadow(2px 4px 6px #0e686a);width:49%;border-top-left-radius:0;border-top-right-radius:0 }
#profilButon a.dropdown-item{background-color:white;border:none;width:95%;color:#0e686a;margin:5px auto;text-align: center}
#profilButon .dropdown-menu>li>a:focus,#profilButon .dropdown-menu>li>a:hover{background:#0e686a03;color:#0e686a}        
#art_technique{
    padding-right: calc(1.5em + 0.75rem);   
    background-repeat:  no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
}
#art_garant2OK.form-check-input:checked{background-color: white;}
.inpFocus{ width:100%; }

@keyframes click{
    0%{        
        transform:scale(1.05,1.05);
    }

    50%{
        transform:scale(1.5,1.5);
    }

    100%{
        transform:scale(1.05,1.05);
    }
}
.textTopG{top: -32px;
          left: 50%;
          -ms-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
          white-space: nowrap;}
.textBottomG{bottom: -42px;
             left: 50%;
             -ms-transform: translate(-50%, 0%);
             transform: translate(-50%, 0%);
             white-space: nowrap;}
.textShadowG {position:absolute;
              color: #149496;
}
.stiahnut{justify-content: flex-end }
@media (max-width: 820px) {  
    .stiahnut{justify-content: center;}}
@media (max-width: 550px) {  
    .stiahnut{    flex-direction: column;
                  align-items: center;}}
@media (max-width: 600px){
    .alertify .ajs-dialog{width:400px!important}
}    
@media (max-width: 450px){
    .alertify .ajs-dialog{width:350px!important}
}   
@media (max-width: 380px){
    .alertify .ajs-dialog{width:300px!important}
} 
.edit_window .close_button{
    top:-25px;
    right:50px;
    font-size: 70px;
}
.edit_window{
    position: relative;
    margin: 0 auto;
    top: 0px;
    min-height: 110px;
    width: auto;
    outline: 0;
    border:none;
    padding:50px;
}
.absol_edit{
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height:auto;    
    width: 700px;    
    z-index: 1041;

}

#full_win_edit{
    position: absolute;
    top:0px;
    left: 0px;
    height:100%;    
    width: 100%;
    background-color: #26323275;   
    z-index: 1040;
    overflow-y: auto;
}

.lg-switcher {
    display: inline-block!important;
    width: max-content;
    position: absolute;
    top: 16px;
    right: 380px;
}
.lg-switcher, .sm-lg-switcher {
    list-style: none;
    padding-top: 2px;
    text-align: right;
}
.finalVis{display: none;}
@media screen and (max-width: 1100px){
    .menuDrop>li:hover{background-color: transparent;}  
    .finalVis{display: inline-block;}
}    
@media screen and (min-width: 1100px){ #myNavbar{  max-width:550px}}

.finaleBtn{background-color: #2c88c9;border-radius: 17px;padding: 2px 19px;color:white}
.finaleBtn:hover{background-color:#0268b0;color:white}
#myNavbar{margin-left: -80px;  }
@media screen and (max-width: 1560px){
    #myNavbar{margin-left: -50px;  }
}
@media screen and (max-width: 1420px){
    #myNavbar{margin-left: -20px;  }
}
@media screen and (max-width: 1320px){
    #myNavbar{margin-left: 0px;  }
}
#timeline{height:150px;background-color: #ededed}
#timeline .row{margin:0 auto;} 
.udalost{border-left: 1px solid #9c9c9c;height:80px;margin-left:0;margin-top:50px;padding-left:5px;padding-right:5px;margin-right:0;}
.udalost .text{font-size: 12px}
.udalost .datum{font-size: 14px}
/*
@media (max-width: 1409px){
    .udalost .text{font-size: 0.7em}}
@media (max-width: 1481px){
    .udalost .datum{font-size: 0.9em}
}
@media (max-width: 1481px){
    .udalost .datum{font-size: 0.85em}
}
@media (max-width: 1276px){
    .udalost .datum{font-size: 0.8em}
    .udalost .text{font-size: 0.6em}}
@media (max-width: 1209px){
    .udalost .datum{font-size: 0.7em}
}
@media (max-width: 1073px){
    .udalost .datum{font-size: 0.64em;}
    .udalost .text{font-size: 0.55em}  
}*/


.admin-gombik{
    width:100%;height:150px;border:1px solid #5a5d62;justify-content: center;align-items: center;display:flex;color:black;border-radius:5px;background-color:#7d786d;flex-direction: column; 
}
.admin-gombik a{
    color:black;
}
 .scrol::-webkit-scrollbar-track  {
  background: #f1f1f1; 
}
 .scrol::-webkit-scrollbar-thumb {
  border:solid 1px #e5e5e5 ; 
  background-color: #149597
}
 .scrol::-webkit-scrollbar-thumb:hover{
  background: #888; 
}
/*odovzdavanie cien*/

 .videopanel{height:100px;z-index:99;width:45px;background:#ffffffb8;position:absolute;bottom:0;cursor:pointer;}
 .nahlad{cursor: zoom-in}
 .kamera{
    border:#149496 1px solid;
    border-bottom:none;
    border-top-left-radius:5px;border-top-right-radius:5px;
    font-size: 20px;
    outline:none;
    padding:5px 10px;
    text-align:center;
    text-decoration:none;
    width:150px
    }
@media (max-width: 400px){
   .kamera span {display: none!important;}
    .kamera{width:100px}
    .video span{font-size: 18px!important}
}
.kamera:hover {
 color:white;
 background-color: #149496;
}
.kamera_activ {
 color:white;
 background-color: #14949661
}
@media (max-width: 768px){video{border:1px solid #149496!important;padding: 20px 20px 25px 20px!important;}}
    .odovzdavanie_cien .buttony{display:flex;justify-content: flex-end;border-bottom:solid 1px #149496;margin-bottom: 50px;padding-right:0;padding-left:0}
    .video:nth-child(2n+1) {         
      padding-right: 0;      
}
@media (max-width: 500px){.odovzdavanie_cien .buttony a{width:50%}.kamera{width:100%} }
.video:nth-child(2n+1) {       
      padding-left: 0;
}
.video:nth-child(2n+1) video{
    padding: 20px 0 25px 20px;
    border:1px solid #149496;
    border-right:none
}
.video:nth-child(2n) video{
    padding: 20px 20px 25px 0px;
    border:1px solid #149496;
    border-left:none       
}
.video span{color:#149496;font-size: 22px;background-color: white;position:absolute;bottom:-2px;left:50%;transform: translate(-50%, 0%);}
.fin_but{ 
             
              margin: 0 auto;
              display: block;
              width: 250px;
              z-index: 2;
              background-image: linear-gradient(135deg, #0369b0, #2c88c9, #149496);
              color:#fff!important;             
              padding: 6px;
              font-size: 1.4em;
              font-weight: 600;
              border-radius:6px;
              color:#0369b0;
          }
         @keyframes fin_but-anima {
            from {background-image: linear-gradient(135deg, #0369b0, #2c88c9, #149496);}
            to {background-image: linear-gradient(135deg, #149496, #2c88c9, #0369b0);    }
          }
          .fin_but:hover{
              animation: fin_but-anima .8s infinite;              
          }  
          
 
                @media (min-width: 1099px){
                    .navbar-header {
                        float: left;
                    }

                }
                .collapse .logo{display: none}
                .jazyky{align-items: center;display: flex;width:100%;justify-content: space-between}
                @media (max-width: 1099px){
                    .drop{display:none!important}
                     #col_menu{padding-right:15px; }
                    .navbar,.nav_ {padding-right: 0px!important;}
                    .navbar-nav>li>a{padding:5px 0}  
                    .jazyky{position: absolute;top:5px;right:50px;justify-content:right;}  
                    .jazyky>div{padding: 0 4%;}  
                    .navbar-header {
                        float: none;
                        width: auto; }
                    .collapse{padding-bottom:10px!important}
                    .collapse .prihlasenie{display: inline!important;}
                    .jazyky .prihlasenie{display: none!important;}
                    .jazyky .logo{display: none}
                    .collapse .logo{display: block}
                }
                @media (max-width: 1250px){ .jazyky .text-pretecenie{display: none!important}}
                .collapse .prihlasenie{display: none;}          
                .navbar{padding-left:10px;padding-right:10px;}          
                nav { filter:none;}

                @media (max-width: 580px){
                    .jazyky .logoN{width:30vw}
                    .trans span{display:none!important}
                    .lg-switcher{width:25px!important}
                    .trans{min-width:20px!important}
                    #setLang{    right: -40px;top: 40px;}
                    .lang-no{display:none!important}
                }
                @media (max-width: 600px){.logoN{margin-right: 50px} }
                @media (max-width: 450px){ .trans_vis{display: block;}.sk_cz_sw{display:none} .logoN{margin-right: 20px}}
                @media (max-width: 400px){.jazyky img{width:100px}.logoN{margin-right: 0px} }
                @media (max-width: 500px){.jazyky .text{display:none;} .navbar-right{width: 30vw} 
                                          .navbarProfil.dropdown-toggle::after {display:none!important} 
                                          
                }
                @media (max-width: 330px){.jazyky img{width:80px} .navbar-right{width: 30vw}
                                          .jazyky{right:64px!important;width:90px}
                                          .lg-switcher button{ right:6px}
                                          .selectFilter .ui-selectmenu-button.ui-button{width:100%}
                                          .historyList .card{width:90%}
                                          #setLang{ right: -27px;}        
                                          .odsek .textMob{font-size:8px;}
                                          .odsek{left:10px}
                                          .navbarProfil .show{left:60px}
                                         
                }        
                
                
                @media screen and (max-width: 770px) {
                    .login-menu .pfc{
                        display: block;
                        float:left;
                    }
                    .jazyky>div{padding: 0 1%!important;} 
                }
                 .cookie-banner {
                    position: fixed;
                    bottom: 40px;
                    left: 10%;
                    right: 10%;
                    width: 80%;
                    padding: 5px 14px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    background-color: #eee;
                    border-radius: 5px;
                    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
                }
                .close {
                    height: 20px;
                    background-color: #777;
                    border: none;
                    color: white;
                    border-radius: 2px;
                    cursor: pointer;
                } 
                .navbar{max-width:100%!important;}
                @media screen and (max-width: 1600px){
                    .navbar-brand{padding-right: 0px;margin-right: 20px;}
                }
                nav{filter: drop-shadow(1px 2px 3px #a7a7a7);}
                .dropdown-menu-end[data-bs-popper] {
                    right: auto; 
                    left: auto;
                } 
                .menuDrop{width:193px;}
                .menuDrop span {
                    margin-left: 0;
                }
                .trans_vis{display: none;}
                
                
  @media (max-width: 450px){
                    #historia a, #sutaziaci a,#uvod a{padding-left: 20px!important;} 
                    .dropdown-menu-history {margin-left: -34px;}}
                  @media (max-width: 350px){
                    #historia{padding-left: 0px!important;}  
                    #historia a, #sutaziaci a,#uvod a{padding-left: 0px!important;} 
                    .dropdown-menu-history {margin-left: 0px;}}
                @media (max-width: 1099px){
                   .dropdown.min_nav{padding-bottom: 1px}
                   .collapse .logo{display: block}
                   .marginList{display: block;}
                   .mobil_ponuka.dropdown-menu-history {border:none!important}
                   #historia, .dropdown-menu-history, #sutaziaci, #uvod{ position:relative!important;border:none!important;filter:none!important;padding-top:0px;border-radius: 0;padding-left: 65px}
                   #historia a, .dropdown-menu-history a, #sutaziaci a,#uvod a{width:100%;text-align:start!important;z-index:10000;}
                   .mobil_ponuka{padding-left:0;}
                   .menuDropVin, .dropdown-menu-history,.menuDropSutaz,.menuDrop{width:100%;min-width:100%!important;margin-top:0!important}
                  
                   #historia.collapse.in, #sutaziaci.collapse.in, #uvod.collapse.in{overflow: hidden!important;}
                   .historia_menu{display:none}
                   
                   .dropdown-menu-history{left:32px!important}
                   #historia>li>a:focus, .collapse>li>a:hover,#historia.collapse>li>a:visited, .dropdown-menu>li>a:active,#historia.dropdown-menu>li>a:target, .collapse>li>a:checked{background-color: transparent!important;background-image:none}
                   .mobil_archiv, #mobil_ponuka, .mobil_sutaziaci,.mobil_uvod {width: 100%;
                            margin-left: 0;
                            background-color: white;
                        }
                  .menuDropVin .dropdown-item:focus,.menuDropSutaz .dropdown-item:focus {background-color: white}
                  #historia .dropdown-menu.show,#sutaziaci .dropdown-menu.show,#uvod .dropdown-menu.show{display: contents;} 
                }
                #col_menu .collapse-menu{text-align: start}  
         @media (max-width: 600px){
        .button_gallery .btn{width:100%!important;margin:5px 0!important;}
        .button_gallery{display:block!important;}
    }
.button_gallery{display:flex;justify-content: space-between;align-items: center}
.button_gallery .btn{
    transition: all .5s ease;
    color: #149496;
    border: 1px solid white;
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
    font-size: 17px;
    background-color : transparent;
    padding: 10px;
    outline: none;
    border-radius: 4px;
    border-color:#149496;
}
.button_gallery .st{width:200px}
.button_gallery .btn:hover {
    color: #fefefe;
    background-color: #1b8185;
}
     
.bi{
    margin: 0px 5px;
}
.bi-add-book, .bi-add-book-white{
    position: relative;
    overflow: hidden;
    display: inline-block;
    overflow: hidden;
    height: 1.2em;
    width: 1em;  
    top:5px;
}

.bi-add-book::before{
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;    
    background-repeat: no-repeat;  
    background-size: 142%;    
    filter: opacity(60%);
}
.bi-add-book::before {
    background-image: url(/build/images/addressbook.df06715c.svg); 
    background-position: -3px 0px;
}

.bi-add-book-white::before{
   content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-repeat: no-repeat;
    background-position: -3px 0px;
    background-size: 142%;    
    filter: opacity(60%); 
}