body {
      position: relative; 
      background-color:white;
      color: #4e4b4b;
      width: 100%;
      height: auto;
      padding-bottom:200px;
/*#f3f2f2*
#4e4b4b*/
  }
    #myNavbar1{background-color:white; 
  }
  
  #section1 {padding-top:70px; width:49%; height: 50%; float: left; margin-right: 1%;  text-align: justify;}
  #section2{ padding-top:70px; width:49%;height: 50%; float: left; margin-left: 1%;   text-align: justify;}
  #section1 img, #section2 img{float: left; padding-right: 5px; clear: left;max-width: 100%;
    max-height: 100%;}


.portrait {
    height: 300px;
    width: 100%;
}
  .forma_pisi{
      width:100%;
  }
 * { box-sizing: border-box;}

/*-------------------------------------*/



   ul li a:hover { border-bottom: 1px solid black;
   }
 

      ul .active1{

    background-color:#bfbfbf;

        }
   #ul ul a:hover{
    background-color: white;

   }
   #ul ul li{background-color: white;}
.container{
  background-color:  #e6e5e5;
  width: 90%;
  /*padding-bottom: 100px;*/
  min-height: calc(100vh - 40px);
}

 #section1, #section2,#section4{
  padding-bottom: 20px;

}
 .logo-small {
      color:  #4775d1;
      font-size: 50px;
  }
   .thumbnail {
      padding: 0 0 20px 0;
      border: none;
      border-radius: 0;
}

 

  /*----------------------------------------------*/

#myNavbar{
height: 0 auto;
font-size: 1.1em;
}


footer{
  overflow: auto;
border-top:1px solid  black;
border-bottom:1px solid  black;
background-color: white;
width: 100%;
    position: absolute;
    
    margin-bottom: 20px;



  /*  background: #e6e5e5;
    -webkit-animation: footer 5s infinite; /* Chrome, Safari, Opera */
    /*animation: footer 5s infinite;*/

}
.limited-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; 
  overflow: hidden;
  text-overflow: ellipsis; 
  /*height: 4.5em; */
  /*line-height: 1.5em;*/
}

footer #adresa{float: left; clear: left;
padding:0px 20px 20px 20px; position: relative;}
 footer #kontakt{margin-left: 270px; padding:0px 20px 20px 20px;

 }
 a{color: black;}
 a:hover{color:#595959; }

/* Chrome, Safari, Opera */
/*@-webkit-keyframes footer {
    from {background-color: #e6e5e5;}
    to {background-color: #f3f2f2;}
}*/

/* Standard syntax */
/*@keyframes footer {
    from {background-color: #e6e5e5;}
    to {background-color: #f3f2f2;}
}
*/


  /*-------------------- kraj indexa--------------*/
  /*-------------------proizvdnja1---------------------*/
 
  #psection2{width:90%;  float: left; margin-left: 1%; }
  #psection2 h4{padding-top: 10px; text-align: center;}
   #psection2 img{float: left; padding-right: 20px; padding-bottom:10px; clear: left;  width: 72%;  }
   #psection2 p{text-align: justify; padding-right: 20px;}

 

    #erb-image-wrapper img{
    max-width:100% !important;
    height:auto !important;
    display:block;
    display: -moz-inline-stack;
}
.gallery {
  display: flex;
  flex-wrap: wrap;
  /* Compensate for excess margin on outer gallery flex items */
  margin: -1rem -1rem;
}

.gallery-item {
  /* Minimum width of 24rem and grow to fit available space */
  flex: 1 0 34rem;
  /* Margin value should be half of grid-gap value as margins on flex items don't collapse */
  margin: 1rem;
  box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.gallery-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease-out;
}

.gallery-image:hover {
  transform: scale(1.15);
}

/*

The following rule will only run if your browser supports CSS grid.

Remove or comment-out the code block below to see how the browser will fall-back to flexbox styling. 

*/

@supports (display: grid) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    grid-gap: 2rem;
  }

  .gallery,
  .gallery-item {
    margin: 0;
  }
}
 /*img{
  
  width: 31%;
  display: block;
  float: left;
  margin-left: : 50px;
  margin-right: 2.66%;
  padding-bottom: 50px;
  -webkit-filter: blur(0px);
  -webkit-transition: -webkit-filter 0.8s;
}

 img:hover{
   animation: blur 3s;
  -webkit-filter: blur(5px);
  -webkit-transition: -webkit-filter 0.8s;
  
}

@media only screen and (max-width : 500px){
   img{
    float: none;
    display: block;
    margin: 0 auto;
    padding-top: 10px;
    width: 70%;
  }
}
@media only screen and (max-width : 700px){
   img{
    float: none;
    display: block;
    margin: 0 auto;
    padding-top: 10px;
    width: 40%;
  }
}*/



/*.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
  
}*/
/*.responsivet{
  object-fit: cover;
  width: 400px;
  max-width: 400px;
  height: 300px;
  object-fit: cover;
  
}*/
/* First the Grid */
/*.gallery-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1.5rem;
  justify-items: center;
  margin: 0;
  padding: 0;
}*/

/* The Picture Frame */
/*.gallery-frame {
  padding: .5rem;
  font-size: 1.2rem;
  text-align: center;
  background-color: #333;
  color: #d9d9d9;
}*/

/* The Images */
/*.gallery-img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  transition: opacity 0.25s ease-in-out;
}

.gallery-img:hover {
  opacity: .7;
}*/


/* The Picture Frame */
/*.gallery-frame {
  padding: .5rem;
  font-size: 1.2rem;
  text-align: center;
  background-color: #333;
  color: #d9d9d9;
}

/* The Images */
/*.gallery-img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  transition: opacity 0.25s ease-in-out;
}

.gallery-img:hover {
  opacity: .7;
}
*/
@import url(https://fonts.googleapis.com/css?family=Montserrat:500);

:root {
  /* Base font size */
  font-size: 10px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}



.containerS {
  max-width: 100rem;
  margin: 0 auto;
  padding: 0 2rem 2rem;
}

.heading {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 4rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  padding: 3.5rem 0;
  color: #1a1a1a;
}

.heading span {
  display: block;
}

.galleryS {
  display: flex;
  flex-wrap: wrap;
  /* Compensate for excess margin on outer gallery flex items */
  margin: -1rem -1rem;
}

.gallery-item {
  /* Minimum width of 24rem and grow to fit available space */
  flex: 1 0 24rem;
  /* Margin value should be half of grid-gap value as margins on flex items don't collapse */
  margin: 1rem;
  box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.gallery-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease-out;
}

.gallery-image:hover {
  transform: scale(1.15);
}

/*

The following rule will only run if your browser supports CSS grid.

Remove or comment-out the code block below to see how the browser will fall-back to flexbox styling. 

*/

@supports (display: grid) {
  .galleryS {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    grid-gap: 2rem;
  }

  .galleryS,
  .gallery-item {
    margin: 0;
  }
}



   /*---------------------------kraj prizvdnja1----------------*/


/*--------------kontakt sectin-----------*/
#ksection{
  margin:0px;width:100%;

}
/*--------------------cntact frm*/
#contact{float: left;  width:35%; max-width:290px;min-width: 150px;
  margin-right: 60px;   overflow:hide; clear: both; 
    color: black; font-size: 1.0em;}
    #contact h4{font-weight: bold; font-size: 1.7em; margin-top: 2px; }
form {
 float: right;
width: 60%;


}




fieldset {
  
width: 100%;


}
input[name="ime"],
input[name="email"]{width: 49.7%; }
textarea,input{width: 100%; margin-bottom:8px; }
input[name="submit"]
{width: 15%; min-width: 120px}

legend {
   
   font-size: 1.7em;
    color: black;
  
    font-weight: bold;
}

textarea,
input[type="text"],

input[type="email"],
input[type="number"] {
    font-family: verdana;
    border-radius: 5px;
    border: 1px solid lightgray;
    padding: 5px 8px;
}

input[type="submit"] {
    background-color: black;
    border-radius: 5px;
    border: 1px solid black;
    padding: 5px 8px;
    color: white;
}

input[type="submit"]:hover {
    background-color: grey;
    color: white;
}
textarea:focus,
input:focus {
    outline: none;
    box-shadow: 0px 0px 5px green;
}


textarea:focus:invalid,
input:focus:invalid {
    box-shadow: 0px 0px 10px red;
    animation: glow 0.5s ease-in-out 0s infinite alternate;
}

@keyframes glow {
    0% { box-shadow: 0px 0px 8px red; }
    100% { box-shadow: 0px 0px 12px red; }
}






    










  @media screen and (max-width: 1200px) {
     #section1,#section2 { width:47%;}
      form{width: 100%;}
     input[name="ime"],
input[name="email"]{width: 49.6%; }

     
  }
   @media screen and (max-width: 1000px) {
  
     #section1,#section2 { width:100%;}
      
     #psection2{width:100%;}
   
       #psection2 p{width:100%; float: right; }
       #contact{width: 30%;}
       form{width: 60%;}
       input[name="ime"],
input[name="email"]{width: 49.5%; }
   }

  @media screen and (max-width: 900px) {
     #section1,#section2 { width:100%;}
      
     #psection2{width:100%;}
   
       #psection2 p{width:100%; float: right; }
       #contact{width: 30%;}
       form{width: 60%;}
       input[name="ime"],
input[name="email"]{width: 49.5%; }
      
       @media screen and (max-width: 706px) {
     #section1,#section2 { width:100%;}
      
     #psection2{width:100%;}
   
       #psection2 p{width:100%; float: right; }
       #contact{width: 100%;}
       form{width: 100%;padding-top: 20px;}
       input[name="ime"],
input[name="email"]{width: 100%; } 
    
  }
   
  @media screen and (max-width: 500px) {
      .navbar-brand img{
          margin-top:0px;
      }
     #section1, #section2 { width:100%;}
      #psection2{width:100%; }
     
       #psection2 p{width:100%; float: right; 
       }
        
        #contact{width: 100%;}
        form{width: 100%;padding-top: 20px;}
        input[name="ime"],
input[name="email"]{width: 100%; }
footer {font-size:12px; }
 footer #kontakt{width:100%;float: right; }


    
  
  }
  @media screen and (max-width: 400px) {
      ..navbar-brand img{
          margin-top:0px;
      }
     #section1, #section2 { width:100%;}
      #psection2{width:100%; }
     
       #psection2 p{width:100%; float: right; }
        #footer {font-size:12px;}
        #kontakt,#adresa{width: 50%;}
        form{width: 100%;padding-top: 20px;}
        input[name="ime"],
input[name="email"]{width: 100%; }

  
  }