@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@100;200;300;400;500;600;700;800;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Display:wght@900&display=swap');




:root{
/*--mu-head-font-family: "Noto Serif Display", serif;
--mu-body-font-family: "Libre Franklin", sans-serif;
--mu-head-font-family: "Verdana", sans-serif;
--mu-body-font-family: "Verdana", sans-serif;
--mu-backgroundcolor: #FFD6D5;
--mu-sectioncolor: #FFDDA9;
}
*/

*{
  box-sizing: border-box;
}



@keyframes objeveni {
  from {transform: scale(10%); opacity: 0.1;}
  to {transform: scale(100%); opacity: 1;}
}



section{
  min-height: 72vh;
  display: flex;
  justify-content: center;
  align-items: center;

}
section:nth-child(1){
     color: #101010;
  background: #FCFBF7;
}
/*
section:nth-child(2){
     color: #101010;
  background: #FCFBF7;
}
section:nth-child(3){
  color: #FCFBF7;
  background: #101010;
}
section:nth-child(4){
  color: #FCFBF7;
  background: #101010;
}
section:nth-child(5){
     color: #101010;
  background: #FCFBF7;
}
section:nth-child(6){
     color: #101010;
  background: #FCFBF7;
}
*/
section:nth-child(7){
     color: #101010;
  background: #FFF;
}


section:nth-child(8){
     color: #101010;
  background: #FFF;
}


section .cards img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 0px;
}


section .container{
  margin: 0px;
}

section h1{
font-family: var(--mu-head-font-family);
  font-size: 9vh;
  text-align: center;
  padding-left: 4rem;
    padding-right: 4rem;
    padding-bottom: 4rem;
    line-height: 160%;
}

section h2{
font-family: var(--mu-head-font-family);
  font-size: 6vh;
  text-align: center;
  text-transform: uppercase;
}

section .cards{
  display: flex;
}

section .cards .text-card{  
  width: 50%;

}
section .text-card h3, p{
    padding-left: 3rem;
    padding-right: 3rem;
    
}
section .text-card h3{
  font-family: var(--mu-head-font-family);
  margin-top: 2.3rem;
  margin-bottom: 1.2rem;
  font-weight: 600;
  /* font-size: calc(1rem + 3.6vw);*/
  font-size: 4.1vh;
  word-wrap: normal;
  line-height: 153%;
  text-align: start;

  text-transform: uppercase;

}
section .text-card p{
  font-family: var(--mu-body-font-family);
  margin-bottom: 3.5rem;
  text-transform: none;
  letter-spacing: normal;
  /* font-size: calc(1.1rem + 0.3vw); */
  font-size: 2.17vh;
  font-weight: 300;
  line-height: 230%;
  text-align: start;

}

@media (max-width: 900px){

  section .cards{
    flex-direction: column;
  }
  section .cards .text-card{
  width: 100%;  
  }
  section h1{
  font-size: 6vh;
  text-align: center;
  padding-left: 4rem;
    padding-right: 4rem;
    padding-bottom: 4rem;
    line-height: 160%;
}
#poradi {
 /* background-color: black;
  color:white; */
}
@media (max-width: 900px){
	#poradi { order:2; }

}


}

.reveal{
  position: relative;
  transform: translateY(135px);
  opacity: 0;
  transition: all 2s ease;
}

.reveal.active{
  transform: translateY(0px);
  opacity: 1;
  
}
/******************************/
.efect-image {
		position: relative;
		
		animation-name:clip-path-reveal-1;
		animation-duration:2.5s; 
		animation-timing-function:cubic-bezier(0.31, 0, 0.05, 0.93); 
		animation-delay: 0s;
		animation-iteration-count: 1; /* infinite */
		animation-direction:.5 normal;
		animation-fill-mode: forwards;
}
@keyframes clip-path-reveal-1 {
	0% { 
	clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
	}

	100% {   
	clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
	}
}
/**********************************/