@font-face {
    font-family: 'odudabold';
    src: url('../fonts/oduda-bold-webfont.woff2') format('woff2'),
         url('../fonts/oduda-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#contactDiv
{
    margin-top:100px;
    text-align:left;
}

#participants {
  font-family: Arial;
  border-collapse: collapse;
  width: 90%;

}

.gall_container
{
    font-family: Arial;
}

#participants td, #participants th {
  border: 1px solid #ddd;
  padding: 8px;

}

#participants tr:nth-child(even){background-color: #f2f2f2;}

#participants tr:hover {background-color: #ddd;}

#participants th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: rgb(243, 133, 52);
  color: white;
  
}

#dosimeter_market {
  font-family: Arial;
  border-collapse: collapse;
  width: 90%;
}

#dosimeter_market td, #dosimeter_market th {
  border: 1px solid #ddd;
  padding: 8px;
    width:auto;
}

#dosimeter_market tr:nth-child(even){background-color: #f2f2f2;}

#dosimeter_market th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: rgb(243, 133, 52);
  color: white;
}

/* Table stakeholders forum */

#stakeholders_table {
  font-family: Arial;
  border-collapse: collapse;
  width: 90%;
}

#stakeholders_table td, #stakeholders_table th {
  border: 1px solid #ddd;
  padding: 8px;
  width:auto;
}

#stakeholders_table tr:nth-child(even)
{background-color: white;}

#stakeholders_table {
    text-align: center;
}

#stakeholders_table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: rgb(243, 133, 52);
  color: black;
}

/* Kraj table stakeholders forum*/



#total_value
{
  background-color: rgb(237, 170, 0);
  color: black;
}


*{
    box-sizing: border-box;
}

html {
    font-family: odudaBold, Arial, sans-serif;
}

#scroll_arrow {
  display: block;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#arrow {
    size: 40px;
    padding-left:49%;
    margin-top:90px;
    padding-top:10px;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  max-width: 100%;
  min-width: 300px;
  margin:auto;
  <!-- border-style: solid; -->
  border-color: red;
  font-family: odudaBold, Arial, sans-serif;
}

header {     
    text-align: center;
    padding-top: 15px;    
    width: 100%;
    display: table;
    clear: both;    
}

footer {
    /*
    
        
    */
    padding: 2px;
    padding-top: 12px;
    padding-bottom: 3px; 
    width: 100%;   
    background-color: #cb7230;
    color:white;
    display: flex;
    justify-content: center;
}


#eu-picture-footer {
    /*
    float:left;
    width:65%;
    overflow:hidden;
    
    flex: 0 0 70%;
    */
    flex: 3;
}

#text-footer {
    /*
    float:left;
    width:15%;
    overflow:hidden;
    */
    flex: 1;
}

#paragraph-footer {
    text-align:justify
}

p span {
    display: block;
}

#logo_small {
    float:left;
    margin-left:8px;
    margin-bottom: 10px;
    display: inline;
    width: 16%;
    <!-- border-style:solid; -->
    border-color:darkblue;
}

#home_baner_picture
{
    display: block;
    max-height:1080px;
    min-height: 900px;
    background-image: url("../img/pozadina-home.png");
    background-repeat: no-repeat;
    <!-- border-style: solid; -->
    border-color: pink;    
    background-size: cover;
    margin-top:0px;
    
}


#welcome_picture
{
    float:center;
    text-align: center;
    color:white;    
}

#welcome_text
{
    text-align: center;
    color:white;
    font-size: 20px;
}

#welcome_text_2
{
    text-align: center;
    color:white;
    font-size: 18px;
    color: RGB(209, 210, 212);
}

#logo_big
{
    max-height: 400px;
}

/*
<!--#img-header{
    width: 100%;
}

#img-header-mob{
    display: none;
} -->
*/


navigation{
    
    float:right;
    width: 75%;
    <!--border-style: solid;-->
    border-color: yellowgreen;
    text-align: right;
    padding-right:10px;
    padding-bottom: 10px;
    height:65px;
    
}

#content{
    
    float:center;   
    margin-left:20%;
    margin-right:20%;
    <!-- border-style: solid; -->
    border-color: #92cccc;
    font-family: Arial;
            
}

#about_picture
{
    float:center;  
    max-width:90%;
    height:auto;
}


#about_ionising_radioation
{
    width:55%;
    height:auto;    
}


#about_two_column_text
{
  -webkit-column-count: 2; /* Old Chrome, Safari and Opera */
  -moz-column-count: 2; /* Old Firefox */
  column-count: 2;
  padding-left: 1%;
  padding-right: 1%;
}

#about_participants_baner
{
    width:95%;
}

.about_two_column_paragraph
{
   margin-block-start:0em 
}

#link_apl
{
    text-decoration: none;
}

.img_equipment
{
    width:60%;
    height:auto;
    margin-left:2%;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.img_equipment:hover
{
    opacity: 0.9;
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 80px;
  /* Location of the box */
  left: 10%;
  top: 0%;
  /*width: 80%;*/
  
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  
  
  
  
  /* Full width */
  height: auto;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}

.modal-content {
  margin: auto;
  margin-top: 0;
  display: block;
  /*max-width: 60%;*/
  /*max-height: 600px;*/
  max-height:90%;
  max-width: 700px;
}

#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

.modal-content,
#caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/*
.gallery-section{
    float:center;   
    margin-left:10%;
    margin-right:10%;
    font-family: Arial;
}

.inner-width{
    width:95%;
    max-width: 780px;
    margin:auto;
    padding-right: 10px;
}


.gallery-section .gallery{
    
    display:flex;
    flex-wrap: wrap-reverse;
    justify-content: center;
}

.gallery-section .image-gallery{
    flex: 50%;
    overflow: hidden;
    cursor: pointer;
}
.gallery-section .image-gallery img{
    width:100%;
    padding: 20px;
    transition: 0.4s;
}

.gallery-section .image-gallery:hover img{
    transform: scale(1.04);
}
*/

/* NOVA GALERIJA */

.gallery
{
    margin:10px 50px;
}

.gall_slika
{
    transition: 1s;
    padding: 2%;
    width: 45%;
}

.gall_slika:hover
{
    filter: contrast(110%);
    transform: scale(1.05);
}

.gall_container
{
    float:center;
    margin-left: 15%;
    margin-right: 15%;

}



/* KRAJ */

/* Stranica stakeholders */
.stakeholders-header
{
    
    display:grid;
    grid-template-columns: 16% 54% 30%;
    overflow: hidden;
    transition: max-height 2s ease-in-out;    
}

.stakeholders-row
{
    margin-top:50px;
    display: inline-block;
    width:98%;
    height:auto;
    float:left;    
    overflow: hidden;
    transition: max-height 2s ease-in-out;
    text-align: center;
    
    border-bottom-style: solid;
    border-bottom-color: orange;
}

.img_stakeholders
{

    width: 80px;
}
/* KRAJ */

/* Stranica people */

.people_container
{
    
    display:grid;
    grid-template-columns: 50% 50%;
    overflow: hidden;
    transition: max-height 2s ease-in-out;
    
}

.one_man
{
    
    margin-top:50px;
    display: inline-block;
    width:98%;
    height:auto;
    float:left;    
    overflow: hidden;
    transition: max-height 2s ease-in-out;
    
    border-bottom-style: solid;
    border-bottom-color: orange;
}

.one_man_div_picture
{
    width:40%;
    height:auto;
    display:block;

}

.one_man_picture
{
    width:100%;
    height:auto;
    border-radius: 5%;
    cursor:pointer;
}

#4
{
    border-radius: 50%;
}

.one_man_div_text
{
    display:block;
}

.one_man_paragraph
{
    display:none;

    width:80%;

    max-height: auto;
    margin-left:10%;
    margin-right:10%;
    
    overflow: hidden;
    transition: max-height 0.1s ease-out;
	
	-webkit-animation: fadein 1s; 
       -moz-animation: fadein 1s; 
        -ms-animation: fadein 1s; 
         -o-animation: fadein 1s; 
            animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* KRAJ */

p{
    padding-left: 2%;
    padding-right: 2%;
    text-align: justify;
}


div.nav-page{
    
    padding-top:33px;
    padding-bottom:5px;
    display: inline-block;
    <!--font-size:19px;-->
    margin-left:5px;
}

.nav-page:hover{
    <!--background-color:yellow;    -->
}

.nav-page a{
    text-decoration: none;
    color: black;
    vertical-align: middle;
    font-size: 1.1vw;
    margin-left: 12px;
    padding-left: 0px;
}

#empty
{
    display:none;    
}


.NewsTitleArchive{
    padding-left: 2%;
}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  display:none;
}

.main-container{
    display: table;
    clear: both;
    float:center;
    max-width: 1300px;
}

.hvr-overline-from-left {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;

}

.activities_grid
{
    display: grid;
    grid-template-columns: 30% 70%;

}

.activities_picture
{
    padding-left: 1px;
}

.activities_text
{
    border-bottom-style: solid;
    border-bottom-color: #cb7230;
    border-top-style: solid;
    border-top-color: #cb7230;

    padding-left: 5px;
}

.activities_title
{
    color: #cb7230;
}

.activities_colored
{
    color: white;
    background-color: #cb7230;
    padding: 7px;
}

.table_participant
{
    display:grid;
    grid-template-columns: 70% 30%;
    padding-left:2.5%;
    padding-right:2.5%;
}

.table_participant_description
{
    height:auto;
    vertical-align: baseline;
}

.table_participant_picture
{
    text-align: right;
}




@media screen and (max-width: 1500px) {
    #content
    {
        margin-left: 10%;
        margin-right: 10%;
    }

    #home_baner_picture
    {
       min-height: 650px;
    }
    
    .nav-page{

    margin-left:2px;
    margin-right:2px;
}
 
}


@media screen and (max-width: 1300px) {
    #home_baner_picture
    {
       min-height: 580px;
    }
    
    #content
    {
        margin-left: 10%;
        margin-right: 10%;
    }
    
    #arrow{
    margin-top:80px;
    }
    
    #about_ionising_radioation
    {
    width:60%;
    height:auto;    
    }
    
    .gall_container
{
    float:center;
    margin-left: 10%;
    margin-right: 10%;
}

.nav-page{

    margin-left:2px;
    font-size:10px;
}

  
    
}

@media screen and (max-width: 1200px) {
    .nav-page{

    <!--font-size:15px;-->
    font-size:10px;
    margin-left:2px;
}
}


@media screen and (max-width: 1100px) {
  body {
    
  }
    .nav-page{

    <!--font-size:15px;-->
    font-size:9vw;
    margin-left:2px;
    display: block;
   }
   
   .nav-page a{
       margin-left: 0px;
   }
 
  
  .table_participant
    {
    display:grid;
    grid-template-columns: auto;
    padding-left:2.5%;
    padding-right:2.5%;
    }

.table_participant_description
    {
        text-alight:center;
    }

.table_participant_picture
    {
        text-align: center;
    }
  
  .one_man_paragraph
{
    
    width:90%;
    max-height: auto;
    margin-left:5%;
    margin-right:5%;

}

.one_man_div_picture
{
    width:45%;
}
  
/* Galerija */
  .gall_slika
{
    width: 85%;
}

 .gall_container
{
    float:center;
    margin-left: 0;
    margin-right: 0;
}
  
  
  arrow
  {
      display:none;
  }
  
  .img_equipment
{
    width:80%;

}
  
  
#participants {
  display:none;
}
  
#about_two_column_text {
  -webkit-column-count: 1; /* Old Chrome, Safari and Opera */
  -moz-column-count: 1; /* Old Firefox */
  column-count: 1;
}

#about_ionising_radioation {
    width:65%;
    height:auto;    
}
  
  navigation{    
    overflow: hidden;
    height: 100%;
    float:left;
    margin-left:1;
    margin-right: 0;
    padding-bottom: 0px;
    width: 100%;
    max-height: 0;
    transition: max-height 0.1s ease-out;
    background-color: rgb(140, 140, 140, 0.95);
    letter-spacing: 1px;
    <!--font-size: 20px;-->
    font-size: 5vw;
  }
  
  #empty
{
    display:block;    
}
  
  header
  {
      padding-bottom: 0;
  }
  
   #home_baner_picture
    {
       margin-top:0px;
       min-height: 600px;       
    }
    
 #logo_big
{
    width:55%;   
}
  
#welcome_text
{
    font-size: 16px;
}

#welcome_text_2
{
    font-size:15px;
}

  
  .inner-width{
      padding-left: 0px;
  }
  
  #content{
    float:center;
    margin-left: 7%;
    margin-right: 7%;
    <!-- border-style: solid; -->
    border-color: #92cccc;
    font-family: Arial;
  }
  
  .gallery-section{
    float:center;   
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
}
  
 
  p{
    padding-left: 3%;
    padding-right: 3%;
  }
  
  .nav-page{    
    height: 30px;
    padding-top:5px;
    padding-left: 5%;
    text-align: center;
    display:block;
    margin-top: 2px;
    margin-bottom:3px;
    margin-left:0px;
    }

    .nav-page a{
    font-size: 14px;
    
    }
    
    .gallery-section .image-gallery{
    flex: 100%;
    }
    .collapsible
    {
        display:block;
    }
  
}

@media screen and (max-width: 750px) {
    #home_baner_picture
    {
       min-height: 600px;       
    }

    #about_ionising_radioation
    {
    width:75%;
    height:auto;    
    }
    
    .gall_container
    {
    float:center;
    margin-left: 0;
    margin-right: 0%;
    }   
    .gall_slika
    {
    width: 99%;
    }
    
    .people_container
{

    grid-template-columns: auto;

}



}


@media screen and (max-width: 520px) {
  #logo_big
{
    width:80%;    
}

#welcome_text
{
    font-size: 13px;
}

#welcome_text_2
{
    font-size:12px;
}

#arrow
{
    display: none;
}

#home_baner_picture
{
    margin-top:0px;
     min-height: 470px;       
}
   
.activities_grid
{
    display: block;    
}

}

@media screen and (max-width: 380px) {
       #home_baner_picture
    {
       margin-top:0px;
       min-height: 400px;       
    }

}