html{
  display: table;
  margin:auto;
}
body{
 display: table-cell;
 
}

/* Clear floats after the columns */


button {
    background-color: transparent;
    border-width: 2px;
    border-color: white;
    border-radius: 28px;
    font-size: 20px;
    color: white;
    padding: 10px 16px 10px 16px;
}

button:hover{
  background-color: white;
  color:#376E83;
}

h1{
  font-size:42px;
}
h2{
  font-size:26px;
}

html, body 
{    
    background:#F4EDE1;
    position: relative;
    height: 100%;
    width: 90%;
    font-family: Montserrat;
   
     color: white;
}
.w-100 {
    width: 0% !important; 
}

.row {
	display: flex;
  justify-content: center;
  max-height: 1700px;
  min-height: 1200px;
	text-align: center;
}

/*************************************** BOX 1 */
 #content1{
  display: flex;
  justify-content: center;
  align-items: center;
 	min-height:600px;
  max-height: 1300px;
  
 	background-image: url('./images/1 copy.png'); 
 	background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
 	font-size: 30px ;

  z-index: 11111111;


 	}
  @media only screen and (min-width: 1700px) {
    #content1 {
      min-height: 800px !important;
    }

    .row{
      min-height: 1300px;
    }

}
@media only screen and (max-width: 990px) {
  #content1 img{
    min-width: 700px;
  }
    #content1 {
   height:1200px;
  }
}

 	
/*************************************** BOX 2 */
  #content2{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
  z-index: 9999;
  min-height:200px;
  max-height: 400px;
 padding: 100px 70px 100px 50px;
 	background-image: url('./images/2 copy.png'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;


 	}
  @media only screen and (max-width: 1700px) {

  }
  @media only screen and (max-width: 990px) {

    #content2 {
    max-height:700px;
    height: 600px;
  }
}





/*************************************** BOX 3 */
  #content3{
  display: flex;
  justify-content: center;
  align-items: center;
	min-height:300px;
  max-height: 600px;
 	background-color: #DDD1C1;
 	z-index:33;
    padding: 100px 50px 70px 70px;
    z-index: 1111111;

 
 	}



@media only screen and (max-width: 990px) {

    #content3 {
   max-height:700px !important;
   height:500px !important;
  }
}




  .column {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    float: left;
    width: 60%;
}




.column2{
  width:40%;
  float:right;
}

.column2 img{
  max-width: 160px;
  }

.column3{
  width:20%;
  float:right;
}

.column3 img{
  max-width: 110px;
}

.link_no_decor {
  color:white !important;
  font-size:22px;
}



/*************************************** BOX 4 */
  #content4{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height:600px;

 	background-image: url('./images/4 copy.jpg'); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-top:-40%;
 	}


  @media only screen and (max-width: 990px) {
  #content4 {
    margin-top:-20%;
    height:800px;
  }
  h1{}
  }

/**MOBILE**/

@media only screen and (max-width: 990px) {
     html, body 
    {  width:100%;
    }

    h1{
      font-size:70px;
    }
    h2{
      font-size:40px;
    }

    span {
      font-size:32px;
    }

    .link_no_decor {
    font-size: 26px !important;
    }
    button{
      font-size:32px;
      padding: 15px 40px 15px 40px;
      border-radius:50px;
    }

    .column2 img{
      max-width:220px;
    }

    #content3{
          padding: 100px 0px 100px 100px;
    }
    #content2{
          padding: 100px 100px 100px 100px;
    }

}


}

/********************************* DODATKI ***/



/********** FADE IN */
#content1, #content2, #content3, #content4{
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  
}
#content1{
  animation-duration: 0.5s;
}
#content2{
  animation-duration: 1s;


}
#content3{
  animation-duration: 1.5s;
  position: relative;

}
#content4{
  animation-duration: 2s;
}


.fade-in {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 1s;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


/*** OVERLAY **/ 



.overlay {
}