@charset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
 strong,b {
 font-weight: 700;
   }
html, body {
margin: 0;
font-family : 'varela-round', sans-serif;
overflow-x : hidden;
height : 100vh;
background-color : whitesmoke;
color: rgba(0, 0, 0, 0.87);
font-weight: 400;
font-size: 1rem;
line-height: 1.5;
}
*, *:before, *:after {
box-sizing : inherit;
}
a:link, a:visited, a:hover, a:active {
  text-decoration: none;
}

::selection {
background-color : #FECB00;
color : #0200FF;
}
:root {
    font-size: 16px; 
}
#container {
display : flex;
flex-direction : column;
align-items : center;
justify-content : center;
}
.header {
display : inline-block;
width : 100%;
background-color : #3740ff;
position : fixed;
height : 60px !important ;
overflow : hidden;
z-index : 9999;
justify-content : center;
align-items : center;
box-shadow : 0 8px 6px -6px gray;
}
#logo-container {
display : flex;
align-items : center;
margin-top : -10px;
}
.logo {
height : auto;
justify-content : flex-end;
width : auto;
}
.rt-container {
margin : 0 auto;
display : block;
}
[class^="col-rt-"] {
box-sizing : border-box;
padding : 0;
min-height : 1px;
position : relative;
}
@font-face {
font-family : 'varela-round';
src : url("../fonts/Varela/VarelaRound-Regular.ttf");
font-style : normal;
font-weight : 400;
unicode-range : U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
font-display : swap;
}
.main {
margin : 0 auto;
display : block;
height : 100%;
margin-top : 60px;
}
.mainInner {
display : table;
height : 100%;
width : 100%;
text-align : center;
}
.mainInner div {
display : table-cell;
vertical-align : middle;
font-size : 3em;
font-weight : bold;
letter-spacing : 1.25px;
}
#sidebarMenu {
height : 100%;
position : fixed;
user-select : none;
left : 0;
width : 250px;
margin-top : 60px;
transform : translateX(-250px);
transition : transform 250ms ease-in-out;
background : linear-gradient(180deg, #3740ff 0%, #FFFFFF 100%);
z-index : 99989;
box-shadow : 0 8px 6px -6px gray;
	display: flex;
}
.sidebarMenuInner {
margin : 0;
padding : 0;
border-top : 1px solid rgb(255, 255, 255, 0.10);
box-shadow : 0 8px 6px -6px gray;
}
.sidebarMenuInner li {
list-style : none;
color : #fff;
text-transform : uppercase;
font-weight : bold;
padding : 20px;
cursor : pointer;
border-bottom : 1px solid rgb(255, 255, 255, 0.10);
}
.sidebarMenuInner li span {
display : block;
font-size : 14px;
color : rgb(255, 255, 255, 0.50);
	
}
.sidebarMenuInner li a {
color : white;
text-transform : uppercase;
font-weight : bold;
cursor : pointer;
text-decoration : none;
}
.sidebarMenuInner li:hover {
background : rgb(0, 0, 0, 0.10);
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform : translateX(0);
z-index : 9998;
}
input[type="checkbox"] {
transition : all 0.3s;
box-sizing : border-box;
display : none;
}
.sidebarIconToggle {
transition : all 0.3s;
box-sizing : border-box;
cursor : pointer;
position : absolute;
z-index : 9999;
top : 22px;
left : 15px;
height : 22px;
width : 22px;
}
.spinner {
transition : all 0.3s;
box-sizing : border-box;
position : absolute;
height : 3px;
width : 100%;
background-color : #fff;
}
.horizontal {
transition : all 0.3s;
box-sizing : border-box;
position : relative;
float : left;
margin-top : 3px;
}
.diagonal.part-1 {
position : relative;
transition : all 0.3s;
box-sizing : border-box;
float : left;
}
.diagonal.part-2 {
transition : all 0.3s;
box-sizing : border-box;
position : relative;
float : left;
margin-top : 3px;
}
input[type="checkbox"]:checked ~ .sidebarIconToggle > .horizontal {
transition : all 0.3s;
box-sizing : border-box;
opacity : 0;
}
input[type="checkbox"]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition : all 0.3s;
box-sizing : border-box;
transform : rotate(135deg);
margin-top : 8px;
}
input[type="checkbox"]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition : all 0.3s;
box-sizing : border-box;
transform : rotate(-135deg);
margin-top : -9px;
}
.hero-box {
overflow-x : hidden;
height : 500px;
background-position : center;
background-repeat : no-repeat;
background-size : cover;
text-align : center;
justify-content : center;
}

/* index.html */
body.index .hero-box {
    background-image: url( "../home/images/home_home_section00-Large.jpg");
}

@supports (background-image: url(../home/picture/home_home_section00-Large.webp)) {
    body.index .hero-box {
        background-image: url(../home/picture/home_home_section00-Large.webp);
    }
}

/* about.html */
body.about .hero-box {
    background-image: url("../about/images/about_about_section01-Large.jpg");
}

@supports (background-image: url(../about/picture/about_about_section01-Large.webp)) {
    body.about .hero-box {
        background-image: url(../about/picture/about_about_section01-Large.webp);
    }
}
/* works.html */
body.works .hero-box {
    background-image: url("../works/images/works_zoombox3section01-Large.jpg");
}

@supports (background-image: url(../works/picture/works_zoombox3section01-Large.webp)) {
    body.works .hero-box {
        background-image: url(../works/picture/works_zoombox3section01-Large.webp);
    }
}
/* publications.html */
body.publications .hero-box {
    background-image: url("../publications/images/publication_section00-Large.jpg");
}

@supports (background-image: url(../publications/picture/publication_section00-Large.webp)) {
    body.publications .hero-box {
        background-image: url(../publications/picture/publication_section00-Large.webp);
    }
}
/* news.html */
body.news .hero-box {
    background-image: url( "../news/images/news_zoombox3section01-Large.jpg");
}

@supports (background-image: url(../news/picture/news_zoombox3section01-Large.webp)) {
    body.news .hero-box {
        background-image: url(../news/picture/news_zoombox3section01-Large.webp);
    }
}


.hero-box .header .section-titel .brani-desi-works-button {
margin-left : auto;
margin-right : auto;
}
.brani-desi-works-button {
margin-top : 20px;
font-weight: 400;
}

.intro {
padding-top : 60px;
background-color : #f5f5f5;
box-shadow : 0 8px 6px -6px gray;
}
h1 .intro{
	
}
h1.intro span {
color : #0059d6;
font-size : 1.01rem;

}
.brani-desi-works-button text:hover {
color : #3740ff;
}
.wrapper, .wrapper-about {
display : block;
text-align : center;
margin-bottom: 1.5625rem;
width : 100%;
margin : 0 auto;
height : auto;
}
.section-title{
	box-shadow : 0 8px 6px -6px gray;
}
.section-wrapper {
    padding-top : 10px;
    display: flex;
    margin-right: -0.25rem;
    margin-left: -0.25rem;
    flex: 0 1 auto;
	flex-direction: row;
    flex-flow: wrap;
}
.section-wrapper h2 {
display : inline-block;
 font-size: 1rem; 
font-weight : lighter;
vertical-align : middle;
position : relative;
line-height : normal;
 padding-top: 0.9375rem; 
}
.wrapper-about .gallery-about h1 {
color : #0A0AFF;
border-bottom-color : #0A0AFF;
 font-size: 1rem; 
}
.desc-about p {
font-size : 15px;
font-family : Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
text-align : center;
font-weight : 600;
line-height : 1.6;
}
.section-titel, .section-about {
 height: 6.25rem; /* 100% / 16px = 6.25rem */
border-color : #535353;
background-color: #f5f5f5;
box-shadow: 0 0.5rem 0.375rem -0.375rem gray; 
justify-content : center;
align-items : center;
width : 100%;
text-align : center;
 padding: 0.3125rem;

}
.wrapper .section-titel h2, .section-titel h2 {
display : inline-block;
font-size : 18px;
color : #272525;
}
.wrapper .section-titel span, .section-titel span {
color : #001B5F;
background-position : center;
justify-content : center;
}
.responsive {
background-color : #fff;
padding : 0;
margin : 5px;
display: flex;
flex-wrap: wrap;
box-sizing : border-box;
	justify-content: space-around;
	overflow: hidden;

}
.gallery p {
height : auto;
}
.gallery {
float : left;
position : relative;
overflow : hidden;
box-shadow : 0 8px 6px -6px gray;
margin: 5px;
border: 1px solid #ccc;
 width: 300px;
}

.gallery img {
width : 100%;
height : auto;

}
.gallery img:hover {
opacity : 0.7 !important ;
box-shadow : 0 0 0 #000000 !important ;
}
.gallery a {
display : block;
position : relative;
}
.gallery h2 {
color : #fff;
position : absolute;
bottom : 0;
left : 0;
text-shadow: rgba(0, 0, 0, 0.38) 1px 1px 1em;
background : #f47b07;
padding : 0.2em;
margin : 0;
margin-top : 10px;
width : 100%;
font-size : 18px;
text-align : left;
font-weight : lighter;
}
.desc {
width : 100%;
display : block;
box-sizing : border-box;
	padding: 15px;
	text-align : center;
}
.desc p {
white-space : normal;
position : relative;
font-size : 15px;
font-family : Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

font-weight : 600;
line-height : 1.6;
min-height : 110px;
max-height : 620px;
}
.desc a {
color : #0A0AFF;
font-weight : 700;
line-height : 12.8px;
}
.desc a:hover {
color : #FF0000;
}
.gallery img {
width : 100%;
height : auto;
}
.desc p strong {
color : #0F0F0F;
font-weight : bolder;
}
.desc-word {
white-space : nowrap;
overflow : hidden;
text-overflow : ellipsis;
}
 	/*Image-Gallery*/
.image-gallery img {
margin-top : 10px;
	
}
	.back-button {
    position: fixed;
    top: 15px; 
    right: 20px; 
    float: right;
    z-index: 9999; 
}

.back-link:hover .back-rect {
    fill: url(#hover-gradient);
}

.back-link:hover .back-line {
    stroke: #000;
}

.back-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.back-link::after {
    content: "Back";
    position: absolute;
    top: 50%;
    left: 100%; /* Преместваме текста вляво от бутона */
    transform: translate(-10px, -50%); /* Преместваме текста вляво от бутона */
    visibility: hidden;
    padding: 5px;
    background-color: #000;
    color: #fff;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.back-link:hover::after {
    visibility: visible;
    opacity: 1;
}

.back-rect {
    fill: #d00e17;
    transition: fill 0.3s ease;
}

.back-link:hover .back-rect {
    fill: #ffff00;
    stroke: #000;
}


.footer {
width : 100%;
background-color : #fff;
text-align : center;
padding : 5px 0;
transition : box-shadow 0.3s ease;
font-family : "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
font-weight: 400;
position: relative;
 flex-wrap: wrap;
 align-content: flex-start;
	box-shadow : 0 8px 6px 10px gray;
}

.footer .social-icons a i {
color : #54595F;
}
.footer .social-icons a:hover i {
color : #20AD96;
}
.contact {
font-weight : 400;
text-decoration : none;
}

.footer p {
	font-size : 11px;
color :#54595F;
	 line-height: 1.5;
}
.footer .contact p {
	padding-top: 2px;
color : #54595F;
font-size : 11px;
	line-height: 1.5;
}
.contact a {
color : #0A0AFF;
font-weight : 700;
line-height : 12.8px;
}
.contact a:hover {
color : red;
}
.bottom-text p {
font-size : 12px;
color : #FFF;
}
ul {
padding : 0;
list-style : none;
}
.footer-social-icons {
  width: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.social-icons {
  padding: 0;
  list-style: none;
   
  display: inline-block;
  align-items: center;
}
ul.social-icons {
margin-top : 5px;
	margin-bottom : 10px;
}
.social-icons li {
vertical-align : top;
display : inline-block;
height : 5px;
}
.social-icons a {
font-size : 20px;
}
.social-icons a:hover {
color : red;
}

@media only screen and (min-width: 240px) and (max-width: 768px) {
.rt-container {
width : 100%;
}
#sidebarMenu {
top : 0;
transform : translateX(-250px);
overflow-y : auto;
}
.ScriptTop h1, .ScriptTop ul {
text-align : center;
}
.ScriptTop h1 {
margin-top : 0;
margin-bottom : 15px;
}
.ScriptTop ul {
margin-top : 12px;
}
.ScriptHeader h1, .ScriptHeader h2, .scriptnav ul {
text-align : center;
}
.scriptnav ul {
margin-top : 12px;
}
	#main-content {
	 align-items: center;
    width: 100%;
    text-align: center;
	}
.wrapper {
background-position : center;
}
.section-wrapper h2 {
letter-spacing : 1px;
text-align : center;
justify-content : center;
font-size : 11px;
padding-top : 10px;
	font-family : 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, 'sans-serif'
	
}
.section-wrapper {
    justify-content: space-around; 
    align-items: center;
    width: 100%;
    text-align: center;
	}
 .responsive {
    width: 100%; 
    margin: 1%; 
  }
	.gallery{
		width: 85%;
		float: left;
	}
	.desc{
		height: auto;
	}
	 .back-button {
        top: 15px;
        right: 10px;
    }
}
@media screen and (max-width: 400px) {
.social-icons ul {
font-size : 12px;
text-align : center;
width : 100%;
overflow : hidden;
background-color : #B9AC99;
}
._14 {
font-size : 0.7em;
}
.desc-grid h6 {
font-size : 14px;
}
.desc-grid p {
font-size : 11px;
}
.image-gallery img {
margin-top : 10px;
}
	.responsive .gallery h2{
		font-size: 15px;
	}
	.back-button {
        top: 10px;
        right: 5px;
    }
}

@media screen and (max-width: 414px) {
.wrapper-about {
font-size : 12px;
padding : 10px;
}
#SidebarMenu {
height : 50%;
position : fixed;
display : flex;
overflow-y : auto;
}
.section-wrapper {
    justify-content: space-around; 
    align-items: center;
    width: 100%;
    text-align: center;
	}
 .responsive {
    width: 90%; 
    margin: 1%; 
  }
	.gallery{
		width: 100%;
			}
	.desc p{
		font-size: 14px;
			}
	.responsive .gallery h2{
		font-size: 13px;
	}
}
@media (min-width: 1200px) {
.wrapper .wrapper-about {
font-size : 18px;
margin : 20px;
}
	#main-content {
	 align-items: center;
    width: 90%;
    text-align: center;
	}
.responsive {
width : 30%;
margin : 2% 1%;
}
	h1.intro{
	font-size: 21px;
	}
	h1 span .intro{
	font-size:21px;
		}
}
@media screen and (min-width: 401px) and (max-width: 768px) {
#sidebarMenu {
top : 0;
transform : translateX(-250px);
overflow-y : auto;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform : translateX(0);
}
.desc-grid h6 {
font-size : 16px;
}
.desc-grid p {
font-size : 13px;
}
	.responsive .gallery h2{
		font-size: 15px;
	}
.image-gallery img {
margin-top : 15px;
}
#sidebarMenu {
height : 100%;
position : fixed;
overflow-y : auto;
display : flex;
top : 0;
transform : translateX(-250px);
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform : translateX(0);
}
	#main-content {
	 align-items: center;
    width: 100%;
    text-align: center;
	}
.wrapper {
background-position : center;
}
.section-wrapper h2 {
letter-spacing : 2px;
text-align : center;
font-size : 21px;
padding-top : 10px;
}
.responsive {
height : auto;
}
.responsive p {
color : #000;
border : none;
background-color : transparent;
padding : 0;
margin : 5px;
}
.gallery h2 {
font-size : 18px;
}
.desc p {
font-size : 16px;
}
	h1.intro {
	font-size : 16px;}
	h1.span intro {
		font-size : 16px;}
.social-icon {
font-size : 20px;
}
}
@media only screen and (min-width: 768px) {
.rt-container {
width : 100%;
}
[class^="col-rt-"] {
float : left;
width : 49.9999999999%;
}
.col-rt-6, .col-rt-12 {
width : 100%;
}
.header {
justify-content : space-between;
padding : 0 20px;
}
#main-content {
width : 100%;
clear : both;
text-align : center;
}
.hero-box {
margin-left : auto;
margin-right : auto;
background-size : cover;
background-position : center center;
}
h1.intro {
	font-size : 18px;}
	h1.span intro {
		font-size : 18px;}
.hero-box span {
letter-spacing : 2px;
text-align : center;
color : darkgray;
}
.intro {
padding-top : 70px;
}
a.button {
font-size : 16px;
padding : 5px 10px;
margin-top : 50px;
background-color : #FFF;
color : #FF0000;
box-shadow : 0 8px 6px -6px black;
}
.desc {
clear : both;
display : block;
float : left;
}
.wrapper {
box-sizing : border-box;
display : block;
float : none;
line-height : normal;
position : static;
}
.gallery h2 {
font-size : 16px;
}
.section-titel {
justify-content : center;
align-items : center;
width : 100%;
text-align : center;
}
}
@media (min-width: 854px) and (max-width: 1200px) {
#sidebarMenu {
height : auto;
display : flex;
top : 0;
transform : translateX(-250px);
overflow-y : auto;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform : translateX(0);
}
.sidebarMenuInner {
margin : 0;
padding : 0;
border-top : 1px solid rgb(255, 255, 255, 0.10);
}
.section-titel {
justify-content : center;
align-items : center;
width : 100%;
text-align : center;
}
	.intro {
	font-size : 18px;
	}
.section-wrapper {
    justify-content: space-around; 
    align-items: center;
    width: 100%;
    text-align: center;
	}
	 .responsive {
    width: 90%; 
    margin: 1%; 
  }
	.gallery{
		width: 100%;
		float: left;
	}
.gallery h2 {
font-size : 16px;
}
.desc p {
font-size : 16px;
}
}
@media only screen and (min-width: 768px) {
	
	.section-wrapper {
    justify-content: space-around; 
    align-items: center;
    width: 100%;
    text-align: center;
	}
 .responsive {
    width: calc((100% / 3) - 30px); /* Adjust the width for 3 items per row, subtracting the total margin */ 
    margin: 1%; 
  }
	.gallery{
		width: 100%;
		float: left;
	
}
}
@media (min-width: 1201px) {
.rt-container {
width : 100%;
}
a.button {
font-size : 16px;
padding : 5px 10px;
margin-top : 50px;
background-color : #FFF;
color : #FF0000;
box-shadow : 0 8px 6px -6px black;
}
.wrapper .wrapper-about {
font-size : 18px;
margin : 20px;
}
.responsive {
width : 30%;
margin : 2% 1%;
}
	h1.intro {
	font-size : 21px;
	}
	
	 span.intro {
		font-size : 16px;
	}
}
@media (min-width: 601px) and (max-width: 1024px) {
.social-icon {
font-size : 24px;
}
}
@media (min-width: 1025px) {
.social-icon {
font-size : 30px;
}
}