@charset "utf-8";
/* CSS Document */


/* MOBILE BLOCK */





.wrapper {
  display: block;
  width: 100%;
  height: 100%;

}

.bgOne {	
	background-color: #FFFFFF;
	padding: 0;
	margin: 0;
}


/* SECTION 1 */


#section1{
	min-height: 100vh;
	display: grid;
	grid-template-columns: 35% 65%;
	grid-template-rows: auto;
	margin-top: 0vh;
	
}

.bgImg1 {
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
	z-index: -1000;
}

.bgImg1{
  display: block;
  margin-top: 15vh;
}


#slika1{
	align-self: start;
}


.bgImg1 img{
	width: 100%;
}


#text-sec1{
	align-self: center;
	margin-left: 12vw;
	font-family: 'Montserrat', sans-serif;
	color: #333333;
	line-height: 2.5em;
	letter-spacing: 1px;
}

.sec1-naslov {
	color:#2d545e;
	padding-bottom: 0.1em;
	text-transform: uppercase!important;
	font-family: 'Montserrat', sans-serif!important;
	font-weight: bold;
	letter-spacing: 0px!important;
	font-size: 3.3vw;
	width: max-content;
	
}

#text-sec1 p{
	font-size: 1vw;
	text-transform: lowercase;
}



/* SECTION 2 */


#section2{
	min-height: 100vh;
	display: grid;
	grid-template-columns: 60% 35%;
	grid-template-rows: 100vh;
	column-gap: 5%;
	align-items: center;	
}

.bgImg2 {
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
	z-index: -1000;
}

.bgImg2{
  display: block;
}


#slika1{
	align-self: center;
}


.bgImg2 img{
	width: 100%;
}


.sec2-naslov {
	color:#2d545e;
	padding-bottom: 0.1em;
	text-transform: uppercase!important;
	font-family: 'Montserrat', sans-serif!important;
	font-weight: bold;
	letter-spacing: 0px!important;
	font-size: 3.3vw;
	width: min-content;
	line-height: 1;
	
}


#text-sec2{
	margin-right: 2vw;
	font-family: 'Montserrat', sans-serif;
	color: #333333;
	letter-spacing: 1px;
}


/* SECTION 3 */


#section3{
	min-height: 100vh;
	display: grid;
	grid-template-columns: 35% 55%;
	grid-template-rows: 100vh;
	column-gap: 5%;
	align-items: center;
}

.sec3-naslov {
	color:#2d545e;
	padding-bottom: 0.1em;
	text-transform: uppercase!important;
	font-family: 'Montserrat', sans-serif!important;
	font-weight: bold;
	letter-spacing: 0px!important;
	font-size: 3.3vw;
	width: min-content;
	line-height: 1;
	
}


#text-sec3{
	align-self: center;
	margin-left: 7vw;
	font-family: 'Montserrat', sans-serif;
	color: #333333;
	letter-spacing: 1px;
	width: 65%;
}


/* SECTION 4 */

#section4{
	min-height: 100vh;
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 100vh;
	column-gap: 5%;
	align-items: center; 
}

.sec4-naslov {
	color:#2d545e;
	padding-bottom: 0.1em;
	text-transform: uppercase!important;
	font-family: 'Montserrat', sans-serif!important;
	font-weight: bold;
	letter-spacing: 0px!important;
	font-size: 3.3vw;
	width: min-content;
	line-height: 1;
	
}


#text-sec4{
	align-self: center;
	margin-left: 7vw;
	font-family: 'Montserrat', sans-serif;
	color: #333333;
	letter-spacing: 1px;
	width: 65%;
}


/* SECTION 5 */


#section5{
	min-height: 100vh;
	display: grid;
	grid-template-columns: 30% 65%;
	grid-template-rows: 100vh;
	column-gap: 5%;
	align-items: center;
}



.sec5-naslov {
	color:#2d545e;
	padding-bottom: 0.1em;
	text-transform: uppercase!important;
	font-family: 'Montserrat', sans-serif!important;
	font-weight: bold;
	letter-spacing: 0px!important;
	font-size: 3.3vw;
	width: min-content;
	line-height: 1;
	
}


#text-sec5{
	align-self: center;
	margin-left: 7vw;
	font-family: 'Montserrat', sans-serif;
	color: #333333;
	letter-spacing: 1px;
	width: 65%;
}


/* SECTION 6 */

#section6{
	min-height: 100vh;
	display: grid;
	grid-template-columns: 60% 35%;
	grid-template-rows: 100vh;
	column-gap: 5%;
	align-items: center;
}



.sec6-naslov {
	color:#2d545e;
	padding-bottom: 0.1em;
	text-transform: uppercase!important;
	font-family: 'Montserrat', sans-serif!important;
	font-weight: bold;
	letter-spacing: 0px!important;
	font-size: 3.3vw;
	width: auto;
	line-height: 1;
	
}


#text-sec6{
	align-self: center;
	margin-right: 2vw;
	font-family: 'Montserrat', sans-serif;
	color: #333333;
	letter-spacing: 1px;
	width: 65%;
}


/* SECTION 7 */

#section7{
	min-height: 100vh;
	display: grid;
	grid-template-columns: 30% 65%;
	grid-template-rows: 100vh;
	column-gap: 5%;
	align-items: center;
}



.sec7-naslov {
	color:#2d545e;
	padding-bottom: 0.1em;
	text-transform: uppercase!important;
	font-family: 'Montserrat', sans-serif!important;
	font-weight: bold;
	letter-spacing: 0px!important;
	font-size: 3.3vw;
	width: auto;
	line-height: 1;
	
}


#text-sec7{
	align-self: center;
	margin-left: 7vw;
	font-family: 'Montserrat', sans-serif;
	color: #333333;
	letter-spacing: 1px;
	width: 65%;
}


/* SECTION 8 */

#section8{
	min-height: 100vh;
	display: grid;
	grid-template-columns: 50% 45%;
	grid-template-rows: 100vh;
	column-gap: 10%;
	align-items: center;
}



.sec8-naslov {
	color:#2d545e;
	padding-bottom: 0.1em;
	text-transform: uppercase!important;
	font-family: 'Montserrat', sans-serif!important;
	font-weight: bold;
	letter-spacing: 0px!important;
	font-size: 3.3vw;
	width: auto;
	line-height: 1;
	
}


#text-sec8{
	align-self: center;
	margin-right: 2vw;
	font-family: 'Montserrat', sans-serif;
	color: #333333;
	letter-spacing: 1px;
	width: 65%;
}


/*SECTION 9 */

#section9{
	min-height: 100vh;
}

#text-sec9{
	margin: 0 15vw 2vh;
	text-align: justify;
	color: #333333;
	letter-spacing: 1px;
	font-family: 'Montserrat', sans-serif;
}

#primena{
	width: auto;
}




/* SECTION 10 LINKS */


#section11{
	height: auto;
}

#spacer-link{
	margin: 10vh 0;
	padding-bottom: 2vh;
	height: auto;
	align-self: center;
	align-content: center;
	justify-content: center;
	align-items: center;
	flex-direction: row;
}

/* LINK DESKTOP PDF */
.link{
	text-align: center;
}

.link a{
	text-decoration: none;
	color: #FFFFFF;
	font-size: 1em;
	padding: 10px 15px;
	border: 1px solid #ffffff;
	border-radius: 3px;
	transition: 1s;
	font-family: 'Montserrat', sans-serif;
	background-color: #2d545e;
}

.link a:hover{
	color: #2d545e;
	transition: 0.5s;
	border: 1px solid #999999;
	background-color: #FFFFFF
}


.brosura-upustvo{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
}

.deklaracije{
	display: flex;
	flex-direction: row;
	align-content: center;
	justify-content: center;
	margin-top: 3vh;
}



/* SECTION 11 VIDEO */

#section10{
	min-height: 100vh;
}

#section10 video{
	width: 100%;
	height:100%;
}



/* SECTION 12 GALERIJA LINK */


#section12{
	height: auto;
	padding: 10vh 0;
	display: flex;
	justify-content: center;
}


#section12 a{
	text-decoration: none;
	color: #333333;
	text-shadow: 2px 2px 40px #ffffff;
}


.promo {
  position: relative;
  cursor: pointer;
  width: var(--size);
  height: var(--size);
}

.title {
  --font-size: calc(var(--size) / 8);

  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
  bottom: 0;
  font-size: var(--font-size);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transform: translate(-10%, -50%);
  transition: transform var(--duration) var(--ease-out);
  pointer-events: none;
}

.title::after {
  content: attr(data-cta);
  display: inline-block;
  margin-left: 1.5vmin;
  font-size: calc(var(--font-size) / 3.25);
  font-weight: 400;
  letter-spacing: 0.125vmin;
  opacity: 0;
  transform: translateX(-25%);
  transition: transform var(--duration) var(--ease-out),
    opacity var(--duration) var(--ease-out);
}

.image-wrapper {
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  -webkit-clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
          clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 0 50%, 0% 0%);
  transition: transform var(--duration) var(--ease-out),
    -webkit-clip-path var(--duration) var(--ease-out);
  transition: transform var(--duration) var(--ease-out),
    clip-path var(--duration) var(--ease-out);
  transition: transform var(--duration) var(--ease-out),
    clip-path var(--duration) var(--ease-out),
    -webkit-clip-path var(--duration) var(--ease-out);
}

.image-wrapper img {
  position: relative;
  width: 120%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transform: translateX(-10%);
  transition: transform var(--duration) var(--ease-out);
}

.image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-color);
  mix-blend-mode: multiply;
  opacity: 0;
  transform: translateZ(0);
  transition: opacity var(--duration) var(--ease-out);
}

.promo:hover img {
  transform: translateX(0);
}

.promo:hover .image-wrapper {
  -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
          clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  transform: translateX(25%);
  transition-timing-function: var(--bounce-out);
}

.promo:hover .title {
  transform: translate(5%, -50%);
  transition-timing-function: var(--bounce-out);
}

.promo:hover .title::after {
  opacity: 1;
  transform: translateX(0);
  transition-timing-function: var(--bounce-out);
}

.promo:hover .image-wrapper::after {
  opacity: 1;
}

:root {
  --src: url(img/products/1.jpg);
  --size: 60vmin;
  --space: 8vmin;
  --duration: 300ms;
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --bounce-out: cubic-bezier(0.34, 1.56, 0.64, 1);
}