/* GLOBAL */
* {
  box-sizing: border-box;
}

@font-face {
  src: url(font\Poppins-Regular.ttf);
  font-family:Poppins;
}

#pozadina{
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 66vh;
  color: #fcfcfc;
  font-size: 18px;
  background-attachment: fixed;
}
.pozadina1{
  background-image: url(izrada-web-sajtova-matt-marketing.jpg);
}
.pozadina2{
  background-image: url(odrzavanje-socijalnih-medija-matt-marketing.jpg);
}
.pozadina3{
  background-image: url(foto-i-video-produkcija-matt-marketing.jpg);
}
.pozadina4{
  background-image: url(graficki-dizajn-matt-marketing.jpg);
}
.pozadina5{
  background-image: url(dizajn-i-kreiranje-reklamnog-materijala-matt-marketing.jpg);
}
.pozadina6{
  background-image: url(internet-marketing-matt-marketing.jpg);
}
.pozadina7{
background: rgba(0, 0, 0, 0.79);
min-height: 55vh!important;
}
.pozadina8{
background: rgba(0, 0, 0, 0.79);
min-height: 35vh!important;
display: flex;
justify-content: center;
text-align: center;
flex-direction: column;
}

.akonema{
  margin-bottom: 10vh!important;
}

.zabtn{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto 6%;
}

/* Kontakt */

.forma{
  margin: 5% 15%;
  animation: new-anim 2s ease;
}

@keyframes new-anim {
from{
  opacity: 0;
}
to{
  opacity: 1;
}
}

.form{
  width: 75%;
  position: relative;
  height: 80px;
  overflow: hidden;
  font-size: 18px;
  margin-bottom: 20px;
}

.form input{
  width: 100%;
  height: 100%;
  color: #16a085;
  padding-top: 50px;
  border: none;
  outline: none;
  font-size: 18px;
  background: transparent;
}

.form label{
  position:absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-bottom: 3px solid #333;
  color: #333;
}

.form .content-name{
  /* left: 0px; */
}

.form label::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 100%;
  width: 100%;
  border-bottom: 3px solid #16a085;
  transform: translateX(-100%);
  transition: all 0.5s ease;
}

.content-name{
  position: absolute;
  bottom: 5px;
  left: 0;
  transition: all 0.5s ease;
}

.form input:focus+ .label-name .content-name,
.form input:valid+ .label-name .content-name{
  transform: translateY(-130%);
  font-size: 18px;
  color: #16a085;
}

.form input:focus+ .label-name::after,
.form input:valid+ .label-name::after{
transform: translateX(0%);
}

.forma textarea{
    transition: all 0.5s linear;
    outline-color:#16a085;
    outline-width: thick;
    background: transparent;
    font-size: 18px;
    border: 2px solid #333;
}

.sub-dugme{
  padding: 25px 50px;;
  background-color: #16a085;
  color: white;
  border: none;
  font-size: 20px;
  margin-top: 50px;
  border-radius: 5px;
  transition: all .8s;
  -webkit-box-shadow: 10px 10px 45px -24px rgba(0, 0, 0, 0.62);
  -moz-box-shadow: 10px 10px 45px -24px rgba(0, 0, 0, 0.62);
  box-shadow: 10px 10px 45px -24px rgba(0, 0, 0, 0.62);
}

.sub-dugme:hover{
  -webkit-box-shadow: 10px 10px 45px -15px rgba(0, 0, 0, 0.82);
  -moz-box-shadow: 10px 10px 45px -15px rgba(0, 0, 0, 0.82);
  box-shadow: 10px 10px 45px -15px rgba(0, 0, 0, 0.82);
  background-color: #ff9c00;
}

.kaol{
color: #333;
font-size: 20px;
font-weight: normal;
margin-top: 54px;
}

.gridd-2{
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-gap: 100px;
}

.informacije{
  color: #333;
  margin-top: 12px;
}

.informacije h2 {
font-size: 36px;
}
.informacije p {
font-size: 24px;
}
.informacije a {
text-decoration: none;
color: #333;
transition: all 0.5s ease;
}

.informacije a:hover {
color: #ff9c00;
}

/* Odrzavanje Socijalnih Medija */

.animation{
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.animation-small{
  display: none;
}

.paper-plane{
  height: 90px;
  position: absolute;
  top: 9%;
  left: 0%;
}

.naslov-sekcije{
  margin: 6vh 30% 0% 4%;
}

.opis{
  margin: 5% 7% 5%;
  text-align: center;
}

.naslov-sekcije h1{
font-size: 4rem;
font-family: Poppins, sans-serif;
color: #272729;
}

.opis h1{
  font-size: 3rem;
  font-family: Poppins, sans-serif;
  color: #272729;
}

.opis p{
  font-size: 20px;
  color: #404040;
  line-height: 1.7;
}

.el1{
  position: absolute;
  top: 5%;
  left: 60%;
  color: #404040;
  text-align: center;
  width: 30%;
  margin: auto;
}

.el2{
  position: absolute;
  top: 15%;
  left: 10%;
  color: #404040;
  text-align: center;
  width: 30%;
  margin: auto;
}

.el3{
  position: absolute;
  top: 42%;
  left: 60%;
  color: #404040;
  text-align: center;
  width: 30%;
  margin: auto;
}

.el4{
  position: absolute;
  top: 57%;
  left: 10%;
  color: #404040;
  text-align: center;
  width: 30%;
  margin: auto;
}

.el{
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s ease-out;
}

.el h1{
font-size: 3rem;
margin-bottom: 0;
padding-bottom: 0;
}

.el p{
font-size: 18px;
line-height: 1.7;
}

.fade-in-anim{
  opacity: 1;
  transform: translateY(0);
  transition: all 1s ease-out;
}

.step-1{
  font-size: 4rem;
  color: #007aff;
  font-weight: bold;
}

.step-2{
  font-size: 4rem;
  color: #007aff;
  font-weight: bold;
}

.step-3{
  font-size: 4rem;
  color: #007aff;
  font-weight: bold;
}

.step-4{
  font-size: 4rem;
  color: #007aff;
  font-weight: bold;
}

/* Graficki dizajn */

.dizajn-sekcija{
  font-size: 3rem;
  font-family: Poppins, sans-serif;
  color: #272729;
  margin: 10% 5%;
}

.logo-dizajn .za-karticu {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-dizajn .za-karticu  {
  perspective: 1500px;
}

.logo-dizajn .card{
  font-weight: bold;
  padding: 1em;
  text-align: right;
  color: #181a1a;

  background-size: cover;

  position: relative;

  transition-duration: 300ms;
  transition-property: transform, box-shadow;
  transition-timing-function: ease-out;
  transform: rotate3d(0);
}

.logo-dizajn .card1{
  background-image: url(business-card-max-bold.png);
  width:  504px;
  height: 288px;
  box-shadow: 0 2px 10px #00000099;
  border-radius: 10px;
}

.logo-dizajn .card2{
  background-image: url(matt-marketing-logo.png);
  width:  360px;
  height: 288px;
  border-radius: 10px;
}

.logo-dizajn .card3{
  background-image: url(matt-dizajn-ambalaza.jpg);
  width:  512px;
  height: 384px;
  border-radius: 10px;
}

.logo-dizajn .card:hover{
  transition-duration: 300ms;
  box-shadow: 0 5px 20px 5px #00000044;
}

.logo-dizajn .card1 .glow {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: radial-gradient(circle at 50% -20%, #ffffff22, #0000000f);
}

/* Video i foto produkcija */

.za-video{
  margin: 0;
  padding: 0;
  margin-bottom: -8px;
}

.za-video video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SVG */
.cls-1 {
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 2px;
}
#logo{
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%,-50%);
  fill:transparent;
  text-align: center;
}

.pozadina1 #logo{
  width: 950px;
  animation: fill-a 0.5s ease forwards 3300ms;
}

.pozadina2 #logo{
    width: 1200px;
    animation: fill-a 0.5s ease forwards 4200ms;
}

.pozadina3 #logo{
    width: 1100px;
    animation: fill-a 0.5s ease forwards 3700ms;
}
.pozadina4 #logo{
    width: 900px;
    animation: fill-a 0.5s ease forwards 3300ms;
}
.pozadina5 #logo{
    width: 1500px;
    animation: fill-a 0.5s ease forwards 5100ms;
}
.pozadina6 #logo{
    width: 1000px;
    animation: fill-a 0.5s ease forwards 3600ms;
}
.pozadina7 #logo{
    width: 900px;
    animation: fill-a 0.5s ease forwards 3500ms;
    top: 28%;
}

/* 1 */
.pozadina1 #logo path:nth-child(1){
stroke-dasharray:114.64;
stroke-dashoffset:114.64;
animation: line-anim 2s ease forwards;
}
.pozadina1 #logo path:nth-child(2){
  stroke-dasharray:230.74;
  stroke-dashoffset:230.74;
  animation: line-anim 2s ease forwards 0.1s;
}
.pozadina1 #logo path:nth-child(3){
  stroke-dasharray:279.99;
  stroke-dashoffset:279.99;
  animation: line-anim 2s ease forwards 0.2s;
}
.pozadina1 #logo path:nth-child(4){
  stroke-dasharray:248.41;
  stroke-dashoffset:248.41;
  animation: line-anim 2s ease forwards 0.3s;
}
.pozadina1 #logo path:nth-child(5){
  stroke-dasharray:288.24;
  stroke-dashoffset:288.24;
  animation: line-anim 2s ease forwards 0.4s;
}
.pozadina1 #logo path:nth-child(6){
  stroke-dasharray:248.47;
  stroke-dashoffset:248.47;
  animation: line-anim 2s ease forwards 0.5s;
}
.pozadina1 #logo path:nth-child(7){
  stroke-dasharray:406.51;
  stroke-dashoffset:406.51;
  animation: line-anim 2s ease forwards 0.6s;
}
.pozadina1 #logo path:nth-child(8){
  stroke-dasharray:239.06;
  stroke-dashoffset:239.06;
  animation: line-anim 2s ease forwards 0.7s;
}
.pozadina1 #logo path:nth-child(9){
  stroke-dasharray:310.16;
  stroke-dashoffset:310.16;
  animation: line-anim 2s ease forwards 0.8s;
}
.pozadina1 #logo path:nth-child(10){
  stroke-dasharray:245.74;
  stroke-dashoffset:245.74;
  animation: line-anim 2s ease forwards 0.9s;
}
.pozadina1 #logo path:nth-child(11){
  stroke-dasharray:248.40;
  stroke-dashoffset:248.40;
  animation: line-anim 2s ease forwards 1s;
}
.pozadina1 #logo path:nth-child(12){
  stroke-dasharray:160.74;
  stroke-dashoffset:160.74;
  animation: line-anim 2s ease forwards 1.1s;
}
.pozadina1 #logo path:nth-child(13){
  stroke-dasharray:171.94;
  stroke-dashoffset:171.94;
  animation: line-anim 2s ease forwards 1.2s;
}
.pozadina1 #logo path:nth-child(14){
  stroke-dasharray:282.26;
  stroke-dashoffset:282.26;
  animation: line-anim 2s ease forwards 1.3s;
}
.pozadina1 #logo path:nth-child(15){
  stroke-dasharray:223.14;
  stroke-dashoffset:223.14;
  animation: line-anim 2s ease forwards 1.4s;
}
.pozadina1 #logo path:nth-child(16){
  stroke-dasharray:248.33;
  stroke-dashoffset:248.33;
  animation: line-anim 2s ease forwards 1.5s;
}
/* 2 */
.pozadina2 #logo path:nth-child(1){
stroke-dasharray:282.29;
stroke-dashoffset:282.29;
animation: line-anim 2s ease forwards;
}
.pozadina2 #logo path:nth-child(2){
  stroke-dasharray:288.10;
  stroke-dashoffset:288.10;
  animation: line-anim 2s ease forwards 0.1s;
}
.pozadina2 #logo path:nth-child(3){
  stroke-dasharray:279.96;
  stroke-dashoffset:279.96;
  animation: line-anim 2s ease forwards 0.2s;
}
.pozadina2 #logo path:nth-child(4){
  stroke-dasharray:286.52;
  stroke-dashoffset:286.52;
  animation: line-anim 2s ease forwards 0.3s;
}
.pozadina2 #logo path:nth-child(5){
  stroke-dasharray:248.39;
  stroke-dashoffset:248.39;
  animation: line-anim 2s ease forwards 0.4s;
}
.pozadina2 #logo path:nth-child(6){
  stroke-dasharray:223.26;
  stroke-dashoffset:223.26;
  animation: line-anim 2s ease forwards 0.5s;
}
.pozadina2 #logo path:nth-child(7){
  stroke-dasharray:248.31;
  stroke-dashoffset:248.31;
  animation: line-anim 2s ease forwards 0.6s;
}
.pozadina2 #logo path:nth-child(8){
  stroke-dasharray:304.05;
  stroke-dashoffset:304.05;
  animation: line-anim 2s ease forwards 0.7s;
}
.pozadina2 #logo path:nth-child(9){
  stroke-dasharray:160.74;
  stroke-dashoffset:160.74;
  animation: line-anim 2s ease forwards 0.8s;
}
.pozadina2 #logo path:nth-child(10){
  stroke-dasharray:239.06;
  stroke-dashoffset:239.06;
  animation: line-anim 2s ease forwards 1.8s;
}
.pozadina2 #logo path:nth-child(11){
  stroke-dasharray:245.73;
  stroke-dashoffset:245.73;
  animation: line-anim 2s ease forwards 0.9s;
}
.pozadina2 #logo path:nth-child(12){
  stroke-dasharray:282.26;
  stroke-dashoffset:282.26;
  animation: line-anim 2s ease forwards 1s;
}
.pozadina2 #logo path:nth-child(13){
  stroke-dasharray:258.72;
  stroke-dashoffset:258.72;
  animation: line-anim 2s ease forwards 1.1s;
}
.pozadina2 #logo path:nth-child(14){
  stroke-dasharray:114.64;
  stroke-dashoffset:114.64;
  animation: line-anim 2s ease forwards 1.2s;
}
.pozadina2 #logo path:nth-child(15){
  stroke-dasharray:160.75;
  stroke-dashoffset:160.75;
  animation: line-anim 2s ease forwards 1.3s;
}
.pozadina2 #logo path:nth-child(16){
  stroke-dasharray:248.37;
  stroke-dashoffset:248.37;
  animation: line-anim 2s ease forwards 1.4s;
}
.pozadina2 #logo path:nth-child(17){
  stroke-dasharray:150.66;
  stroke-dashoffset:150.66;
  animation: line-anim 2s ease forwards 1.5s;
}
.pozadina2 #logo path:nth-child(18){
  stroke-dasharray:304.07;
  stroke-dashoffset:304.07;
  animation: line-anim 2s ease forwards 1.6s;
}
.pozadina2 #logo path:nth-child(19){
  stroke-dasharray:114.64;
  stroke-dashoffset:114.64;
  animation: line-anim 2s ease forwards 1.7s;
}
.pozadina2 #logo path:nth-child(20){
  stroke-dasharray:270.40;
  stroke-dashoffset:270.40;
  animation: line-anim 2s ease forwards 1.8s;
}
.pozadina2 #logo path:nth-child(21){
  stroke-dasharray:390.48;
  stroke-dashoffset:390.48;
  animation: line-anim 2s ease forwards 1.9s;
}
.pozadina2 #logo path:nth-child(22){
  stroke-dasharray:239.06;
  stroke-dashoffset:239.06;
  animation: line-anim 2s ease forwards 2s;
}
.pozadina2 #logo path:nth-child(23){
  stroke-dasharray:288.17;
  stroke-dashoffset:288.17;
  animation: line-anim 2s ease forwards 2.1s;
}
.pozadina2 #logo path:nth-child(24){
  stroke-dasharray:144.64;
  stroke-dashoffset:144.64;
  animation: line-anim 2s ease forwards 2.2s;
}
.pozadina2 #logo path:nth-child(25){
  stroke-dasharray:160.72;
  stroke-dashoffset:160.72;
  animation: line-anim 2s ease forwards 2.3s;
}
.pozadina2 #logo path:nth-child(26){
  stroke-dasharray:248.42;
  stroke-dashoffset:248.42;
  animation: line-anim 2s ease forwards 2.4s;
}
/* 3 */
.pozadina3 #logo path:nth-child(1){
stroke-dasharray:223.12;
stroke-dashoffset:223.12;
animation: line-anim 2s ease forwards;
}
.pozadina3 #logo path:nth-child(2){
  stroke-dasharray:114.64;
  stroke-dashoffset:144.64;
  animation: line-anim 2s ease forwards 0.1s;
}
.pozadina3 #logo path:nth-child(3){
  stroke-dasharray:288.17;
  stroke-dashoffset:288.17;
  animation: line-anim 2s ease forwards 0.2s;
}
.pozadina3 #logo path:nth-child(4){
  stroke-dasharray:239.06;
  stroke-dashoffset:239.06;
  animation: line-anim 2s ease forwards 0.3s;
}
.pozadina3 #logo path:nth-child(5){
  stroke-dasharray:282.32;
  stroke-dashoffset:282.32;
  animation: line-anim 2s ease forwards 0.4s;
}
.pozadina3 #logo path:nth-child(6){
  stroke-dasharray:114.64;
  stroke-dashoffset:114.64;
  animation: line-anim 2s ease forwards 0.5s;
}
.pozadina3 #logo path:nth-child(7){
  stroke-dasharray:196.56;
  stroke-dashoffset:196.56;
  animation: line-anim 2s ease forwards 0.6s;
}
.pozadina3 #logo path:nth-child(8){
  stroke-dasharray:282.27;
  stroke-dashoffset:282.27;
  animation: line-anim 2s ease forwards 0.7s;
}
.pozadina3 #logo path:nth-child(9){
  stroke-dasharray:171.94;
  stroke-dashoffset:171.94;
  animation: line-anim 2s ease forwards 0.8s;
}
.pozadina3 #logo path:nth-child(10){
  stroke-dasharray:282.35;
  stroke-dashoffset:282.35;
  animation: line-anim 2s ease forwards 0.9s;
}
.pozadina3 #logo path:nth-child(11){
  stroke-dasharray:227.33;
  stroke-dashoffset:227.33;
  animation: line-anim 2s ease forwards 1s;
}
.pozadina3 #logo path:nth-child(12){
  stroke-dasharray:279.99;
  stroke-dashoffset:279.99;
  animation: line-anim 2s ease forwards 1.1s;
}
.pozadina3 #logo path:nth-child(13){
  stroke-dasharray:282.28;
  stroke-dashoffset:282.28;
  animation: line-anim 2s ease forwards 1.2s;
}
.pozadina3 #logo path:nth-child(14){
  stroke-dasharray:288.25;
  stroke-dashoffset:288.25;
  animation: line-anim 2s ease forwards 1.3s;
}
.pozadina3 #logo path:nth-child(15){
  stroke-dasharray:242.51;
  stroke-dashoffset:242.51;
  animation: line-anim 2s ease forwards 1.4s;
}
.pozadina3 #logo path:nth-child(16){
  stroke-dasharray:259.37;
  stroke-dashoffset:259.37;
  animation: line-anim 2s ease forwards 1.5s;
}
.pozadina3 #logo path:nth-child(17){
  stroke-dasharray:258.63;
  stroke-dashoffset:258.63;
  animation: line-anim 2s ease forwards 1.6s;
}
.pozadina3 #logo path:nth-child(18){
  stroke-dasharray:114.64;
  stroke-dashoffset:114.64;
  animation: line-anim 2s ease forwards 1.7s;
}
.pozadina3 #logo path:nth-child(19){
  stroke-dasharray:160.75;
  stroke-dashoffset:160.75;
  animation: line-anim 2s ease forwards 1.8s;
}
.pozadina3 #logo path:nth-child(20){
  stroke-dasharray:248.39;
  stroke-dashoffset:248.39;
  animation: line-anim 2s ease forwards 1.9s;
}
/* 4 */
.pozadina4 #logo path:nth-child(1){
stroke-dasharray:318.52;
stroke-dashoffset:318.52;
animation: line-anim 2s ease forwards;
}
.pozadina4 #logo path:nth-child(2){
  stroke-dasharray:280.00;
  stroke-dashoffset:280.00;
  animation: line-anim 2s ease forwards 0.1s;
}
.pozadina4 #logo path:nth-child(3){
  stroke-dasharray:248.31;
  stroke-dashoffset:248.31;
  animation: line-anim 2s ease forwards 0.2s;
}
.pozadina4 #logo path:nth-child(4){
  stroke-dasharray:196.58;
  stroke-dashoffset:196.58;
  animation: line-anim 2s ease forwards 0.3s;
}
.pozadina4 #logo path:nth-child(5){
  stroke-dasharray:114.66;
  stroke-dashoffset:114.66;
  animation: line-anim 2s ease forwards 0.4s;
}
.pozadina4 #logo path:nth-child(6){
  stroke-dasharray:314.36;
  stroke-dashoffset:314.36;
  animation: line-anim 2s ease forwards 0.5s;
}
.pozadina4 #logo path:nth-child(7){
  stroke-dasharray:259.43;
  stroke-dashoffset:259.43;
  animation: line-anim 2s ease forwards 0.6s;
}
.pozadina4 #logo path:nth-child(8){
  stroke-dasharray:114.64;
  stroke-dashoffset:114.64;
  animation: line-anim 2s ease forwards 0.7s;
}
.pozadina4 #logo path:nth-child(9){
  stroke-dasharray:288.18;
  stroke-dashoffset:288.18;
  animation: line-anim 2s ease forwards 0.8s;
}
.pozadina4 #logo path:nth-child(10){
  stroke-dasharray:114.64;
  stroke-dashoffset:114.64;
  animation: line-anim 2s ease forwards 0.9s;
}
.pozadina4 #logo path:nth-child(11){
  stroke-dasharray:230.73;
  stroke-dashoffset:230.73;
  animation: line-anim 2s ease forwards 1s;
}
.pozadina4 #logo path:nth-child(12){
  stroke-dasharray:248.38;
  stroke-dashoffset:248.38;
  animation: line-anim 2s ease forwards 1.1s;
}
.pozadina4 #logo path:nth-child(13){
  stroke-dasharray:160.70;
  stroke-dashoffset:160.70;
  animation: line-anim 2s ease forwards 1.2s;
}
.pozadina4 #logo path:nth-child(14){
  stroke-dasharray:304.01;
  stroke-dashoffset:304.01;
  animation: line-anim 2s ease forwards 1.3s;
}
/* 5 */
.pozadina5 #logo path:nth-child(1){
stroke-dasharray:240.09;
stroke-dashoffset:240.09;
animation: line-anim 2s ease forwards;
}
.pozadina5 #logo path:nth-child(2){
  stroke-dasharray:95.52;
  stroke-dashoffset:95.52;
  animation: line-anim 2s ease forwards 0.1s;
}
.pozadina5 #logo path:nth-child(3){
  stroke-dasharray:192.29;
  stroke-dashoffset:192.29;
  animation: line-anim 2s ease forwards 0.2s;
}
.pozadina5 #logo path:nth-child(4){
  stroke-dasharray:206.99;
  stroke-dashoffset:206.99;
  animation: line-anim 2s ease forwards 0.3s;
}
.pozadina5 #logo path:nth-child(5){
  stroke-dasharray:133.86;
  stroke-dashoffset:133.86;
  animation: line-anim 2s ease forwards 0.4s;
}
.pozadina5 #logo path:nth-child(6){
  stroke-dasharray:253.41;
  stroke-dashoffset:253.41;
  animation: line-anim 2s ease forwards 0.5s;
}
.pozadina5 #logo path:nth-child(7){
  stroke-dasharray:95.52;
  stroke-dashoffset:95.52;
  animation: line-anim 2s ease forwards 0.6s;
}
.pozadina5 #logo path:nth-child(8){
  stroke-dasharray:216.16;
  stroke-dashoffset:216.16;
  animation: line-anim 2s ease forwards 0.7s;
}
.pozadina5 #logo path:nth-child(9){
  stroke-dasharray:233.35;
  stroke-dashoffset:233.35;
  animation: line-anim 2s ease forwards 0.8s;
}
.pozadina5 #logo path:nth-child(10){
  stroke-dasharray:199.19;
  stroke-dashoffset:199.19;
  animation: line-anim 2s ease forwards 0.9s;
}
.pozadina5 #logo path:nth-child(11){
  stroke-dasharray:95.52;
  stroke-dashoffset:95.52;
  animation: line-anim 2s ease forwards 1s;
}
.pozadina5 #logo path:nth-child(12){
  stroke-dasharray:233.37;
  stroke-dashoffset:233.37;
  animation: line-anim 2s ease forwards 1.1s;
}
.pozadina5 #logo path:nth-child(13){
  stroke-dasharray:206.98;
  stroke-dashoffset:206.98;
  animation: line-anim 2s ease forwards 1.2s;
}
.pozadina5 #logo path:nth-child(14){
  stroke-dasharray:253.41;
  stroke-dashoffset:253.41;
  animation: line-anim 2s ease forwards 1.3s;
}
.pozadina5 #logo path:nth-child(15){
  stroke-dasharray:133.80;
  stroke-dashoffset:133.80;
  animation: line-anim 2s ease forwards 1.4s;
}
.pozadina5 #logo path:nth-child(16){
  stroke-dasharray:199.20;
  stroke-dashoffset:199.20;
  animation: line-anim 2s ease forwards 1.5s;
}
.pozadina5 #logo path:nth-child(17){
  stroke-dasharray:233.39;
  stroke-dashoffset:233.39;
  animation: line-anim 2s ease forwards 1.6s;
}
.pozadina5 #logo path:nth-child(18){
  stroke-dasharray:199.20;
  stroke-dashoffset:199.20;
  animation: line-anim 2s ease forwards 1.7s;
}
.pozadina5 #logo path:nth-child(19){
  stroke-dasharray:216.23;
  stroke-dashoffset:216.23;
  animation: line-anim 2s ease forwards 1.8s;
}
.pozadina5 #logo path:nth-child(20){
  stroke-dasharray:125.52;
  stroke-dashoffset:125.52;
  animation: line-anim 2s ease forwards 1.9s;
}
.pozadina5 #logo path:nth-child(21){
  stroke-dasharray:207.09;
  stroke-dashoffset:207.09;
  animation: line-anim 2s ease forwards 2s;
}
.pozadina5 #logo path:nth-child(22){
  stroke-dasharray:325.36;
  stroke-dashoffset:325.36;
  animation: line-anim 2s ease forwards 2.1s;
}
.pozadina5 #logo path:nth-child(23){
  stroke-dasharray:253.34;
  stroke-dashoffset:253.34;
  animation: line-anim 2s ease forwards 2.2s;
}
.pozadina5 #logo path:nth-child(24){
  stroke-dasharray:235.13;
  stroke-dashoffset:235.13;
  animation: line-anim 2s ease forwards 2.3s;
}
.pozadina5 #logo path:nth-child(25){
  stroke-dasharray:265.45;
  stroke-dashoffset:265.45;
  animation: line-anim 2s ease forwards 2.4s;
}
.pozadina5 #logo path:nth-child(26){
  stroke-dasharray:325.38;
  stroke-dashoffset:325.38;
  animation: line-anim 2s ease forwards 2.5s;
}
.pozadina5 #logo path:nth-child(27){
  stroke-dasharray:207.06;
  stroke-dashoffset:207.06;
  animation: line-anim 2s ease forwards 2.6s;
}
.pozadina5 #logo path:nth-child(28){
  stroke-dasharray:143.44;
  stroke-dashoffset:143.44;
  animation: line-anim 2s ease forwards 2.7s;
}
.pozadina5 #logo path:nth-child(29){
  stroke-dasharray:199.19;
  stroke-dashoffset:199.19;
  animation: line-anim 2s ease forwards 2.8s;
}
.pozadina5 #logo path:nth-child(30){
  stroke-dasharray:233.37;
  stroke-dashoffset:233.37;
  animation: line-anim 2s ease forwards 2.9s;
}
.pozadina5 #logo path:nth-child(31){
  stroke-dasharray:95.52;
  stroke-dashoffset:95.52;
  animation: line-anim 2s ease forwards 3s;
}
.pozadina5 #logo path:nth-child(32){
  stroke-dasharray:133.90;
  stroke-dashoffset:133.90;
  animation: line-anim 2s ease forwards 3.1s;
}
.pozadina5 #logo path:nth-child(33){
  stroke-dasharray:206.99;
  stroke-dashoffset:206.99;
  animation: line-anim 2s ease forwards 3.2s;
}
.pozadina5 #logo path:nth-child(34){
  stroke-dasharray: 125.52;
  stroke-dashoffset: 125.52;
  animation: line-anim 2s ease forwards 3.3s;
}
.pozadina5 #logo path:nth-child(35){
  stroke-dasharray:207.02;
  stroke-dashoffset:207.02;
  animation: line-anim 2s ease forwards 3.4s;
}
.pozadina5 #logo path:nth-child(36){
  stroke-dasharray:288.18;
  stroke-dashoffset:288.18;
  animation: line-anim 2s ease forwards 3.5s;
}
/* 6 */
.pozadina6 #logo path:nth-child(1){
stroke-dasharray:114.64;
stroke-dashoffset:114.64;
animation: line-anim 2s ease forwards;
}
.pozadina6 #logo path:nth-child(2){
  stroke-dasharray:304.07;
  stroke-dashoffset:304.07;
  animation: line-anim 2s ease forwards 0.1s;
}
.pozadina6 #logo path:nth-child(3){
  stroke-dasharray:171.94;
  stroke-dashoffset:171.94;
  animation: line-anim 2s ease forwards 0.2s;
}
.pozadina6 #logo path:nth-child(4){
  stroke-dasharray:238.92;
  stroke-dashoffset:238.92;
  animation: line-anim 2s ease forwards 0.3s;
}
.pozadina6 #logo path:nth-child(5){
  stroke-dasharray:280.09;
  stroke-dashoffset:280.09;
  animation: line-anim 2s ease forwards 0.4s;
}
.pozadina6 #logo path:nth-child(6){
  stroke-dasharray:304.05;
  stroke-dashoffset:304.05;
  animation: line-anim 2s ease forwards 0.5s;
}
.pozadina6 #logo path:nth-child(7){
  stroke-dasharray:238.96;
  stroke-dashoffset:238.96;
  animation: line-anim 2s ease forwards 0.6s;
}
.pozadina6 #logo path:nth-child(8){
  stroke-dasharray:171.94;
  stroke-dashoffset:171.94;
  animation: line-anim 2s ease forwards 0.7s;
}
.pozadina6 #logo path:nth-child(9){
  stroke-dasharray:390.9;
  stroke-dashoffset:390.9;
  animation: line-anim 2s ease forwards 0.8s;
}
.pozadina6 #logo path:nth-child(10){
  stroke-dasharray:248.37;
  stroke-dashoffset:248.37;
  animation: line-anim 2s ease forwards 0.9s;
}
.pozadina6 #logo path:nth-child(11){
  stroke-dasharray:280.09;
  stroke-dashoffset:280.09;
  animation: line-anim 2s ease forwards 1s;
}
.pozadina6 #logo path:nth-child(12){
  stroke-dasharray:259.9;
  stroke-dashoffset:259.9;
  animation: line-anim 2s ease forwards 1.1s;
}
.pozadina6 #logo path:nth-child(13){
  stroke-dasharray:239.02;
  stroke-dashoffset:239.02;
  animation: line-anim 2s ease forwards 1.2s;
}
.pozadina6 #logo path:nth-child(14){
  stroke-dasharray:171.94;
  stroke-dashoffset:171.94;
  animation: line-anim 2s ease forwards 1.3s;
}
.pozadina6 #logo path:nth-child(15){
  stroke-dasharray:114.62;
  stroke-dashoffset:114.62;
  animation: line-anim 2s ease forwards 1.4s;
}
.pozadina6 #logo path:nth-child(16){
  stroke-dasharray:304.05;
  stroke-dashoffset:304.05;
  animation: line-anim 2s ease forwards 1.5s;
}
.pozadina6 #logo path:nth-child(17){
  stroke-dasharray:318.47;
  stroke-dashoffset:318.47;
  animation: line-anim 2s ease forwards 1.6s;
}

/* 7 */
.pozadina7 #logo path:nth-child(1){
stroke-dasharray:259.43;
stroke-dashoffset:259.43;
animation: line-anim 2s ease forwards;
}
.pozadina7 #logo path:nth-child(2){
  stroke-dasharray:282.28;
  stroke-dashoffset:282.28;
  animation: line-anim 2s ease forwards 0.1s;
}
.pozadina7 #logo path:nth-child(3){
  stroke-dasharray:304.07;
  stroke-dashoffset:304.07;
  animation: line-anim 2s ease forwards 0.2s;
}
.pozadina7 #logo path:nth-child(4){
  stroke-dasharray:171.96;
  stroke-dashoffset:171.96;
  animation: line-anim 2s ease forwards 0.3s;
}
.pozadina7 #logo path:nth-child(5){
  stroke-dasharray:248.43;
  stroke-dashoffset:248.43;
  animation: line-anim 2s ease forwards 0.4s;
}
.pozadina7 #logo path:nth-child(6){
  stroke-dasharray:259.43;
  stroke-dashoffset:259.43;
  animation: line-anim 2s ease forwards 0.5s;
}
.pozadina7 #logo path:nth-child(7){
  stroke-dasharray:171.94;
  stroke-dashoffset:171.94;
  animation: line-anim 2s ease forwards 0.6s;
}
.pozadina7 #logo path:nth-child(8){
  stroke-dasharray:114.64;
  stroke-dashoffset:114.64;
  animation: line-anim 2s ease forwards 0.7s;
}
.pozadina7 #logo path:nth-child(9){
  stroke-dasharray:280.03;
  stroke-dashoffset:280.03;
  animation: line-anim 2s ease forwards 0.8s;
}
.pozadina7 #logo path:nth-child(10){
  stroke-dasharray:248.41;
  stroke-dashoffset:248.41;
  animation: line-anim 2s ease forwards 0.9s;
}
.pozadina7 #logo path:nth-child(11){
  stroke-dasharray:160.68;
  stroke-dashoffset:160.68;
  animation: line-anim 2s ease forwards 1s;
}
.pozadina7 #logo path:nth-child(12){
  stroke-dasharray:171.94;
  stroke-dashoffset:171.94;
  animation: line-anim 2s ease forwards 1.1s;
}
.pozadina7 #logo path:nth-child(13){
  stroke-dasharray:239.06;
  stroke-dashoffset:239.06;
  animation: line-anim 2s ease forwards 1.2s;
}
.pozadina7 #logo path:nth-child(14){
  stroke-dasharray:304.08;
  stroke-dashoffset:304.08;
  animation: line-anim 2s ease forwards 1.3s;
}
.pozadina7 #logo path:nth-child(15){
  stroke-dasharray:248.35;
  stroke-dashoffset:248.35;
  animation: line-anim 2s ease forwards 1.4s;
}
.pozadina7 #logo path:nth-child(16){
  stroke-dasharray:245.74;
  stroke-dashoffset:245.74;
  animation: line-anim 2s ease forwards 1.5s;
}

.malo{
  display: none;
}
.srednje{
  display: none;
}
.veliko{
  /* display: none; */
}

@keyframes line-anim {
  to{
    stroke-dashoffset:0;
  }
}
@keyframes fill-a {
  from{
    fill:transparent;
    -webkit-filter: drop-shadow( 0 0 5px rgba(0, 0, 0, 0.0));
  filter: drop-shadow( 0 0 5px rgba(0, 0, 0, 0.0));
  }
  to{
    fill:white;
    -webkit-filter: drop-shadow( 0 0 5px rgba(0, 0, 0, 0.5));
  filter: drop-shadow( 0 0 5px rgba(0, 0, 0, 0.5));
  }
}

.odluka{
  text-align: center;
  margin-top: 8vh;
  font-size: 60px;
  animation: new-anim 2s ease;
}

.popunite{
  text-align: center;
  color: #333;
  font-size: 30px;
  margin: 10vh 4%;
  animation: new-anim 2s ease;
}

.padajuci-meni{
  font-size: 18px;
  margin-top: 50px;
  background: transparent;
  color: #333;
  padding: 15px;
  border-radius: 5px;
  outline-color:#16a085;
  outline-width: thick;
  border: 2px solid #333;
}

#ponuda {
  text-align: center;
  margin: 0vh 8%;
}

#ponuda ul {
  list-style: none;
  padding-left: 0;
}

.naslov {
  text-decoration: underline;
  padding: 12px 5px 0 5px;
  font-size: 24px;
  font-weight: bold;
  text-decoration-color:#16a085;
}

.cena h4 {
  font-size: 24px;
  font-weight: bold;
  margin:0;
}

.gridd-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 100px;
  grid-row-gap: 0px;
}

.p {
  background: #212121;
  color: #999;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  transition: 900ms ease;
  -webkit-box-shadow: 10px 10px 70px 0px rgba(0, 0, 0, 0.65);
  -moz-box-shadow: 10px 10px 70px 0px rgba(0, 0, 0, 0.65);
  box-shadow: 10px 10px 70px 0px rgba(0, 0, 0, 0.65);
  margin: 14vh 0 ;
}

.p1, .p2, .p3{
  margin: 14vh 0 0;
}

.p:hover {
  -webkit-box-shadow: 10px 10px 70px 20px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 10px 10px 70px 20px rgba(0, 0, 0, 0.8);
  box-shadow: 10px 10px 70px 20px rgba(0, 0, 0, 0.8);
  color: #fcfcfc;
  background-color: #222;
}

.p2 {
  -webkit-box-shadow: 10px 10px 65px 5px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 10px 10px 65px 5px rgba(0, 0, 0, 0.7);
  box-shadow: 10px 10px 65px 5px rgba(0, 0, 0, 0.7);
}

.poslednji{
    margin: 20vh 0;
}

.stavke li {
  padding:9px 12px;
  font-size: 18px;
}

.stavke hr {
  padding: 0;
  margin: 0;
  border-radius: 2000px;
  border-color: #303030;
  height: 2px;
}

/* Button */
.button {
  text-transform: uppercase;
  cursor: pointer;
  font-size: 20px;
  letter-spacing: 4px;
  position: relative;
  background-color: #16a085;
  border: none;
  color: #fcfcfc;
  padding: 20px;
  width: 200px;
  text-align: center;
  transition-duration: 0.4s;
  overflow: hidden;
  box-shadow: 0 5px 15px #193047;
  border-radius: 4px;
  text-decoration: none;
}

.last {
  margin: 50px 0;
}

.button:hover {
  background: #fff;
  box-shadow: 0px 2px 10px 5px #1abc9c;
  color: #000;
}
.button:focus {
  outline: 0;
}

/* Izrada web sajta */

.svg-anim h1, .svg-anim-small h1{
  font-size: 4rem;
  font-family: Poppins, sans-serif;
  color: #272729;
  margin: 8% 7% -8%;
}

.svg-anim-small{
  display: none;
}

.scroll-slider {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
  height: 100vh;
}

.scroll-wrapper {
  position: relative;
  display: -webkit-box;
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
}

.scroll-slide {
  -webkit-box-flex: 1;
  flex: 1 0 50vw;
  max-width: 50vw;
  height: 100%;
}

.item {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  height: 100%;
}

.item-container {
  position: relative;
}

.item-body span{
color: #007aff;
display:block;
}

.item-body p{
color: #404040;
font-size: 20px;
width: 500px!important;
padding-left: 5px;
}

.item-title {
  font-size: 4.5vw;
  font-weight: bold;
  line-height: 1.1;
  color: #404040;
  display: inline-block;
  margin-bottom: 25px;
}

.novi-red{
  width: min-intrinsic;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
display: table-caption;
display: -ms-grid;
-ms-grid-columns: min-content;
font-size: 4.2vw;
}

.nastavak{
  font-size: 4rem;
  font-family: Poppins, sans-serif;
  color: #272729;
  margin: 5% 7% 5%;
}

/* Internet Marketing*/

.grid-4{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: auto;
  width: 92%;
}

#razlike{
margin-bottom: 6%;
}

#razlike h1{
  font-size: 4rem;
  font-family: Poppins, sans-serif;
  color: #272729;
  margin: -1% 7% 6%;
}

.razlika{
  color: #272729;
  padding: 12%;
  margin:auto;
}

.razlika h2{
  font-size: 3.7rem;
  font-weight: bold;
  /* line-height: 1.1; */
  color: #404040;
}
.razlika p{
  font-size: 20px;
  line-height: 1.7;
  font-weight: 450;
}

.razlika1{
  border-right: 2px solid #16a085;
  border-bottom: 2px solid #16a085;
}
.razlika2{
  border-left: 2px solid #16a085;
  border-bottom: 2px solid #16a085;
}
.razlika3{
  border-right: 2px solid #16a085;
  border-top: 2px solid #16a085;
}
.razlika4{
  border-left: 2px solid #16a085;
  border-top: 2px solid #16a085;
}

/* Header */
@media (max-width:1680px) {
  .razlika1, .razlika2, .razlika3,.razlika4{
    border: 0px;
  }
  .razlika{
    min-height: 640px;
    background-color: #fcfcfc;
    line-height: 1.7;
    color: #404040;
    transition: 800ms ease;
    -webkit-box-shadow: 10px 10px 45px -24px rgba(0, 0, 0, 0.62);
    -moz-box-shadow: 10px 10px 45px -24px rgba(0, 0, 0, 0.62);
    box-shadow: 10px 10px 45px -24px rgba(0, 0, 0, 0.62);
    border-radius: 12px;
  }
  .razlika:hover {
    -webkit-box-shadow: 10px 10px 55px -15px rgba(0, 0, 0, 0.85);
    -moz-box-shadow: 10px 10px 55px -15px rgba(0, 0, 0, 0.85);
    box-shadow: 10px 10px 55px -15px rgba(0, 0, 0, 0.85);
  }
  .grid-4{
    grid-gap: 120px;
  }
  .grid-4{
    grid-template-columns: 1fr 1fr;
    width: 92%;
  }

  #razlike h1{
    font-size: 4rem;
    margin: -6% 7% 6%;
  }

  .razlika{
    padding: 6%;
  }

  .razlika h2{
    font-size: 3.7rem;
  }
  .razlika p{
    font-size: 20px;
  }
}

@media (max-width:1550px) {
  #ponuda {
    margin: 0 8%;
  }
  .pozadina5 #logo{
      width: 1400px;
  }
  .razlika{
    min-height: 640px;
  }

  #razlike h1{
    font-size: 3.6rem;
    margin: -6% 7% 6%;
  }

  .razlika h2{
    font-size: 3.5rem;
  }

/* New */

  .paper-plane{
    height: 90px;
  }
  .el1{
    top: 5%;
    left: 60%;
    width: 32%;
  }

  .el2{
    top: 15%;
    left: 10%;
    width: 32%;
  }

  .el3{
    top: 42.5%;
    left: 60%;
    width: 32%;
  }

  .el4{
    top: 57%;
    left: 10%;
    width: 32%;
  }
  .naslov-sekcije h1{
  font-size: 3.5rem;
  }
  .opis{
    margin: 5% 5% 5%;
  }
  .opis h1{
    font-size: 2.5rem;
  }

  .opis p{
    font-size: 20px;
    line-height: 1.7;
  }

}
@media (max-width:1450px) {
  #ponuda {
    margin: 0 100px;
  }
  .gridd-3 {
    grid-gap: 90px;
  }
  .pozadina5 #logo{
      width: 1300px;
  }
  .mes-povecaj{
    width: 390px;
  }
  .gridd-2{
    grid-gap: 50px;
  }

  .paper-plane{
    height: 80px;
  }

  #razlike h1{
    font-size: 3.4rem;
    margin: -6% 7% 6%;
  }

  .razlika h2{
    font-size: 3.3rem;
  }
  .razlika p{
    font-size: 20px;
  }

}
@media (max-width:1350px) {
  #ponuda {
    margin: 0 10%;
  }
  .gridd-3 {
    grid-template-columns: 1fr 1fr;
    grid-gap: 90px;
    grid-row-gap: 0;
  }
  .p1,.p2{
    margin: 14vh 0 0;
  }
  .p3{
    margin: 14vh 0 0;
  }
  .pozadina7 #logo{
      width: 860px;
  }
  .pozadina6 #logo{
      width: 1000px;
  }
  .pozadina5 .veliko{
    display: none;
  }
  .srednje{
    display: block;
  }
  .pozadina5 #logo{
      width: 1000px;
  }
  .pozadina4 #logo{
      width: 860px;
  }
  .pozadina3 #logo{
      width: 1000px;
  }
  .pozadina2 #logo{
      width: 1000px;
  }
  .pozadina1 #logo{
    width: 880px;
  }
  .gridd-2{
    grid-gap: 10px;
  }
  .forma{
    margin: 5% 8%;
  }
  .pozadina1, .pozadina2, .pozadina3, .pozadina4, .pozadina5, .pozadina6{
    background: rgba(0, 0, 0, 0.79);
  }
  #logo{
    top: 34%;
  }

  .paper-plane{
    height: 70px;
  }
  .el1{
    top: 5%;
    left: 60%;
    width: 34%;
  }

  .el2{
    top: 15%;
    left: 10%;
    width: 34%;
  }

  .el3{
    top: 42.5%;
    left: 60%;
    width: 34%;
  }

  .el4{
    top: 57%;
    left: 10%;
    width: 34%;
  }

  .step-1, .step-2, .step-3, .step-4{
    font-size: 3rem;
  }

  .el h1{
  font-size: 2.5rem;
  }
  .naslov-sekcije h1{
  font-size: 3rem;
  }
  .naslov-sekcije{
    margin: 6vh 20% 0% 4%;
  }
  .opis{
    margin: 5% 4% 5%;
  }
  .opis h1{
    font-size: 2rem;
  }

  .opis p{
    font-size: 18px;
    line-height: 1.6;
  }

  .svg-anim h1{
    font-size: 3.5rem;
    margin: 8% 7% -10%;
  }
  .scroll-slide {
    -webkit-box-flex: 1;
    flex: 1 0 60vw;
    max-width: 60vw;
    height: 100%;
  }

  .razlika{
    min-height: 650px;
  }
  .grid-4{
    grid-gap: 70px;
  }

  #razlike h1{
    font-size: 3.3rem;
    margin: -6% 7% 6%;
  }

  .razlika h2{
    font-size: 3.2rem;
  }
  .razlika p{
    font-size: 19px;
  }

}

@media (max-width:1069px) {
  #ponuda {
    margin: 0 20%;
  }
  .gridd-3 {
    grid-template-columns: 1fr;
    grid-gap: 80px;
    grid-row-gap: 0;
  }
  .p2{
    margin: 14vh 0 0;
  }
  .p4,.p5{
    margin: 14vh 0 0;
  }
  .naslov {
    padding: 14px 4px 12px 4px;
    font-size: 26px;
  }
  .cena h4 {
    font-size: 26px;
  }
  .stavke li {
    padding: 10px 15px;
  }
#pozadina{
    min-height: 50vh;
}
#logo{
  top: 29%;
}
  .pozadina7 #logo{
      width: 770px;
  }
  .pozadina6 #logo{
      width: 850px;
  }
  .pozadina5 #logo{
      width: 850px;
  }
  .pozadina4 #logo{
      width: 770px;
  }
  .pozadina3 #logo{
      width: 850px;
  }
  .pozadina2 #logo{
      width: 850px;
  }
  .pozadina1 #logo{
    width: 800px;
  }
  .gridd-2{
    grid-template-columns: 1fr;
  }
  .forma{
    margin: 5% 5%;
    text-align: center;
  }
  .forma form{
    margin: auto;
  }
  .form{
    width: 100%;
  }
  .odluka{
    font-size: 50px;
  }
  .popunite{
    font-size: 26px;
  }
  .zabtn{
    margin: 0 auto 8%;
  }
  .el1-small, .el2-small, .el3-small, .el4-small{
    color: #404040;
    text-align: center;
    width: 55%;
    margin: 10% auto;
  }

  .el1-small h1, .el2-small h1, .el3-small h1, .el4-small h1{
    font-size: 3rem;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .el1-small p, .el2-small p, .el3-small p, .el4-small p{
    font-size: 18px;
    line-height: 1.7;
  }

.animation{
  display: none;
}

.animation-small{
  display: block;
}

.step-1, .step-2, .step-3, .step-4{
  font-size: 3.5rem;
}

.naslov-sekcije h1{
font-size: 3rem;
}
.naslov-sekcije{
  margin: 6vh 10% 0% 4%;
}
.opis{
  margin: 5% 10% 5%;
}
.opis h1{
  font-size: 3rem;
}

.opis p{
  font-size: 18px;
  line-height: 1.7;
}

.scroll-slide {
  flex: 1 0 62vw;
  max-width: 62vw;
}
.item-title {
  font-size: 5.6vw;
  line-height: 1;
}
.item-body p{
font-size: 18px;
width: 460px!important;
}
.svg-anim h1{
  font-size: 3.5rem;
  margin: 15% 7% -15%;
}

.razlika{
  min-height: 0px;
}
.grid-4{
  grid-gap: 80px;
  grid-template-columns: 1fr;
}

#razlike h1{
  font-size: 3.4rem;
  margin: -12% 7% 8%;
}

.razlika{
  padding: 8%;
}

.razlika h2{
  font-size: 3.5rem;
}
.razlika p{
  font-size: 20px;
}
#razlike{
margin-bottom: 8%;
}
}
@media (max-width:900px) {
  .pozadina7 #logo{
      width: 730px;
  }
  .pozadina6 #logo{
      width: 750px;
  }
  .pozadina5 #logo{
      width: 750px;
  }
  .pozadina4 #logo{
      width: 730px;
  }
  .pozadina3 #logo{
      width: 750px;
  }
  .pozadina1 #logo{
    width: 740px;
  }
  .pozadina2 #logo{
      width: 750px;
  }
  #pozadina{
      min-height: 45vh;
  }
  #logo{
    top: 26%;
  }
  .scroll-slide {
    flex: 1 0 68vw;
    max-width: 68vw;
  }
  .item-title {
    font-size: 6vw;
    line-height: 1;
  }
  .item-body p{
  font-size: 18px;
  width: 450px!important;
  }
  .svg-anim h1{
    font-size: 3.5rem;
    margin: 18% 7% -18%;
  }

  .grid-4{
    grid-gap: 80px;
    grid-template-columns: 1fr;
  }

  #razlike h1{
    font-size: 3rem;
    margin: -24% 7% 8%;
  }

  .razlika{
    padding: 8%;
  }

  .razlika h2{
    font-size: 3rem;
  }
  .razlika p{
    font-size: 20px;
  }
  #razlike{
  margin-bottom: 8%;
  }
}
@media (max-width:805px) {
  #ponuda {
    margin: 0 15%;
  }
  .naslov {
    padding: 14px 4px 12px 4px;
    font-size: 26px;
  }
  .cena h4 {
    font-size: 26px;
  }
  .stavke li {
    padding: 10px 15px;
  }
  .pozadina7 #logo{
      width: 680px;
  }
  .pozadina6 #logo{
      width: 720px;
  }
  .pozadina5 #logo{
      width: 720px;
  }
  .pozadina4 #logo{
      width: 680px;
  }
  .pozadina3 #logo{
      width: 720px;
  }
  .pozadina1 #logo{
    width: 700px;
  }
  .pozadina2 #logo{
      width: 720px;
  }
  .odluka{
    font-size: 45px;
  }
  .popunite{
    font-size: 24px;
  }
  #pozadina{
      min-height: 40vh;
  }
  #logo{
    top: 24%;
  }

.naslov-sekcije h1{
font-size: 2.8rem;
}
.naslov-sekcije{
  margin: 6vh 5% 0% 4%;
}
.opis{
  margin: 5% 10% 5%;
}
.opis h1{
  font-size: 2.8rem;
}

.scroll-slide {
  flex: 1 0 70vw;
  max-width: 70vw;
}
.item-title {
  font-size: 6.5vw;
  line-height: 1;
}
.item-body p{
font-size: 18px;
width: 450px!important;
}
.svg-anim h1{
  font-size: 3.5rem;
  margin: 18% 7% -22%;
}

}

@media (max-width:768px) {
  .malo{
    display:block;
  }
  .veliko{
    display: none;
  }
  .srednje{
    display: none;
  }
  .pozadina7 #logo{
      width: 570px;
  }
  .pozadina6 #logo{
      width: 610px;
  }
  .pozadina5 #logo{
      width: 610px;
  }
  .pozadina4 #logo{
      width: 420px;
  }
  .pozadina3 #logo{
      width: 550px;
  }
  .pozadina1 #logo{
    width: 550px;
  }
  .pozadina2 #logo{
      width: 650px;
  }
  .odluka{
    font-size: 40px;
  }
  .popunite{
    font-size: 24px;
  }
  #pozadina{
    min-height: 50vh;
  }
  #pozadina{
      min-height: 40vh;
  }
  #logo{
    top: 24%;
  }
  .el1-small, .el2-small, .el3-small, .el4-small{
    width: 60%;
  }
  .el1-small h1, .el2-small h1, .el3-small h1, .el4-small h1{
    font-size: 2.5rem;
  }

  .el1-small p, .el2-small p, .el3-small p, .el4-small p{
    font-size: 18px;
    line-height: 1.6;
  }

.step-1, .step-2, .step-3, .step-4{
  font-size: 3rem;
}

.naslov-sekcije h1{
font-size: 2.5rem;
}
.naslov-sekcije{
  margin: 6vh 4% 0%;
}
.opis{
  margin: 5% 8% 5%;
}
.opis h1{
  font-size: 2.5rem;
}

.opis p{
  font-size: 18px;
  line-height: 1.7;
}
.scroll-slide {
  flex: 1 0 74vw;
  max-width: 74vw;
}
.item-title {
  font-size: 7vw;
  line-height: 1;
}
.item-body p{
font-size: 18px;
width: 400px!important;
}
.svg-anim h1{
  font-size: 3rem;
  margin: 20% 7% -28%;
}
.grid-4{
  grid-gap: 60px;
}

#razlike h1{
  font-size: 2.8rem;
  margin: -20% 7% 10%;
}

.razlika{
  padding: 8%;
}

.razlika h2{
  font-size: 2.8rem;
}

}
@media (max-width:700px) {
  #ponuda {
    margin: 0 12%;
  }
  .naslov {
    padding: 14px 4px 12px 4px;
    font-size: 26px;
  }
  .cena h4 {
    font-size: 26px;
  }
  .stavke li {
    padding: 10px 15px;
  }
  .p1,.p2,.p3,.p4,.p5{
    margin: 14vh 0 0;
  }
  .p6{
    margin: 14vh 0;
  }
  .pozadina7 #logo{
      width: 500px;
  }
  .pozadina6 #logo{
      width: 550px;
  }
  .pozadina5 #logo{
      width: 550px;
  }
  .pozadina4 #logo{
      width: 400px;
  }
  .pozadina3 #logo{
      width: 510px;
  }
  .pozadina1 #logo{
    width: 500px;
  }
  .pozadina2 #logo{
      width: 560px;
  }
  .scroll-slide {
    flex: 1 0 80vw;
    max-width: 80vw;
  }
  .item-title {
    font-size: 8vw;
    line-height: 1;
  }
  .item-body p{
  font-size: 18px;
  width: 400px!important;
  }
  .svg-anim h1{
    font-size: 3rem;
    margin: 20% 7% -34%;
  }
}
@media (max-width:600px) {
  #ponuda {
    margin: 0 10%;
  }
  .naslov {
    padding: 14px 4px 12px 4px;
    font-size: 26px;
  }
  .cena h4 {
    font-size: 26px;
  }
  .stavke li {
    padding: 10px 15px;
  }
  .p1,.p2,.p3,.p4,.p5{
    margin: 14vh 0 0;
  }
  .p6{
    margin: 14vh 0;
  }
  .pozadina7 #logo{
      width: 400px;
  }
  .pozadina6 #logo{
      width: 450px;
  }
  .pozadina5 #logo{
      width: 450px;
  }
  .pozadina4 #logo{
      width: 440px;
  }
  .pozadina3 #logo{
      width: 420px;
  }
  .pozadina1 #logo{
    width: 420px;
  }
  .pozadina2 #logo{
      width: 460px;
  }
  #pozadina{
      min-height: 35vh;
  }
  #logo{
    top: 20%;
  }
  .el1-small, .el2-small, .el3-small, .el4-small{
    width: 65%;
  }
  .el1-small h1, .el2-small h1, .el3-small h1, .el4-small h1{
    font-size: 2.2rem;
  }

.step-1, .step-2, .step-3, .step-4{
  font-size: 2.5rem;
}

.naslov-sekcije h1{
font-size: 2rem;
}

.opis{
  margin: 5% 6%;
}
.opis h1{
  font-size: 2.2rem;
}

.opis p{
  font-size: 18px;
  line-height: 1.6;
}

.svg-anim{
  display: none;
}

.svg-anim-small{
  display: block;
}

.item-body-small{
  text-align: center;
  color: #404040;
  margin: 20% 10%;
  font-size: 18px;
}

.item-body-small span{
color: #007aff;
display: inline-block;
}

.svg-anim-small h1{
  font-size: 3rem;
  margin: 20% 7% -5%;
}

.grid-4{
  grid-gap: 50px;
  width: 90%;
}

#razlike h1{
  font-size: 2.6rem;
  margin: -10% 7% 10%;
}

.razlika{
  padding: 6%;
}

.razlika h2{
  font-size: 2.6rem;
}
.razlika p{
  font-size: 19px;
}
#razlike{
margin-bottom: 10%;
}

}
@media (max-width:500px) {
  #ponuda {
    margin: 0 9%;
  }
  .naslov {
    padding: 12px 4px 10px 4px;
    font-size: 24px;
  }
  .cena h4 {
    font-size: 24px;
  }
  .stavke li {
    padding: 9px 12px;
  }
  .p1,.p2,.p3,.p4,.p5{
    margin: 10vh 0 0;
  }
  .p6{
    margin: 10vh 0;
  }
  .pozadina7 #logo{
      width: 360px;
  }
  .pozadina6 #logo{
      width: 360px;
  }
  .pozadina5 #logo{
      width: 360px;
  }
  .pozadina4 #logo{
      width: 350px;
  }
  .pozadina3 #logo{
      width: 330px;
  }
  .pozadina1 #logo{
    width: 350px;
  }
  .pozadina2 #logo{
      width: 380px;
  }
  .forma{
    margin: 8% 3%;
  }
  .sub-dugme{
    padding: 20px 40px;;
    font-size: 18px;
    margin-top: 20px;
  }
  .kaol{
  font-size: 18px;
  margin-top: 40px;
  }
  .form{
    font-size: 18px;
    margin-bottom: 18px;
  }

  .forma textarea{
      font-size: 16px;
  }
  .informacije h2 {
  font-size: 24px;
  }
  .informacije p {
  font-size: 18px;
  }
  .odluka{
    font-size: 36px;
  }
  .popunite{
    font-size: 22px;
  }
  #pozadina{
      min-height: 40vh;
  }
  #logo{
    top: 25%;
  }
  .mes-povecaj{
    width: 280px;
  }
  .el1-small h1, .el2-small h1, .el3-small h1, .el4-small h1{
    font-size: 2rem;
  }

.step-1, .step-2, .step-3, .step-4{
  font-size: 2.4rem;
}

.opis{
  margin: 5%;
}
.opis h1{
  font-size: 2rem;
}

.opis p{
  font-size: 18px;
  line-height: 1.6;
}
.naslov-sekcije h1{
font-size: 1.8rem;
}
.naslov-sekcije{
  margin: 6vh 3%;
}

.grid-4{
  grid-gap: 50px;
  width: 88%;
}

#razlike h1{
  font-size: 2.2rem;
  margin: -5% 7% 15%;
}

.razlika{
  padding: 6%;
}

.razlika h2{
  font-size: 2.4rem;
}
.razlika p{
  font-size: 18px;
}
#razlike{
margin-bottom: 10%;
}

}
@media (max-width:400px) {
  #ponuda {
    margin: 0 9%;
  }
  .naslov {
    padding: 10px 4px 10px 4px;
    font-size: 22px;
  }
  .cena h4 {
    font-size: 22px;
  }
  .stavke li {
    padding: 9px 12px;
  }
  .p1,.p2,.p3,.p4,.p5{
    margin: 8vh 0 0;
  }
  .p6{
    margin: 8vh 0;
  }
  .pozadina7 #logo{
      width: 300px;
  }
  .pozadina6 #logo{
      width: 310px;
  }
  .pozadina5 #logo{
      width: 300px;
  }
  .pozadina4 #logo{
      width: 280px;
  }
  .pozadina3 #logo{
      width: 290px;
  }
  .pozadina1 #logo{
    width: 280px;
  }
  .pozadina2 #logo{
      width: 310px;
  }
  .forma{
    margin: 8% 2%;
  }
  .sub-dugme{
    padding: 18px 36px;;
    font-size: 18px;
    margin-top: 20px;
  }
  .kaol{
  font-size: 18px;
  margin-top: 35px;
  }
  .form{
    font-size: 16px;
    margin-bottom: 18px;
  }
  .form input:focus+ .label-name .content-name,
  .form input:valid+ .label-name .content-name{
    font-size: 16px;
  }
  .forma textarea{
    font-size: 12px;
  }
  .informacije h2 {
  font-size: 22px;
  }
  .informacije p {
  font-size: 16px;
  }
  .odluka{
    font-size: 30px;
  }
  .zabtn{
    margin: 0 auto 10%;
  }
  .mes-povecaj{
    width: 240px;
  }

  .el1-small, .el2-small, .el3-small, .el4-small{
    width: 75%;
  }
  .el1-small h1, .el2-small h1, .el3-small h1, .el4-small h1{
    font-size: 1.8rem;
  }

.step-1, .step-2, .step-3, .step-4{
  font-size: 2rem;
}

.opis h1{
  font-size: 1.6rem;
}

.opis p{
  font-size: 18px;
  line-height: 1.6;
}
.naslov-sekcije h1{
font-size: 1.6rem;
}
.naslov-sekcije{
  margin: 10vh 3%;
}
.item-body-small{
  margin: 20% 8%;
}
.svg-anim-small h1{
  font-size: 2.6rem;
  margin: 15% 7% 0%;
}
.grid-4{
  grid-gap: 50px;
  width: 88%;
}

#razlike h1{
  font-size: 1.8rem;
  margin: 0% 7% 20%;
}

.razlika h2{
  font-size: 2rem;
}
.razlika p{
  font-size: 18px;
}
#razlike{
margin-bottom: 12%;
}
}
@media (max-width:320px) {
  .pozadina7 #logo{
      width: 260px;
  }
  .pozadina6 #logo{
      width: 240px;
  }
  .pozadina5 #logo{
      width: 250px;
  }
  .pozadina4 #logo{
      width: 250px;
  }
  .pozadina3 #logo{
      width: 220px;
  }
  .pozadina1 #logo{
    width: 250px;
  }
  .pozadina2 #logo{
      width: 270px;
  }
  #ponuda {
    margin: 0 8%;
  }
  .naslov {
    padding: 10px 4px 10px 4px;
    font-size: 22px;
  }
  .cena h4 {
    font-size: 22px;
  }
  .stavke li {
    padding: 8px 10px;
  }
  .p1,.p2,.p3,.p4,.p5{
    margin: 6vh 0 0;
  }
  .p6{
    margin: 6vh 0;
  }
  .sub-dugme{
    padding: 15px 30px;;
    font-size: 16px;
    margin-top: 18px;
  }
  .kaol{
  font-size: 16px;
  margin-top: 30px;
  }
  .form{
    font-size: 14px;
    margin-bottom: 15px;
  }
  .form input:focus+ .label-name .content-name,
  .form input:valid+ .label-name .content-name{
    font-size: 14px;
  }
  .forma textarea{
    font-size: 10px;
  }
  .informacije h2 {
  font-size: 20px;
  }
  .informacije p {
  font-size: 16px;
  }
  .mes-povecaj{
    width: 200px;
  }
  .el1-small h1, .el2-small h1, .el3-small h1, .el4-small h1{
    font-size: 1.5rem;
  }

.step-1, .step-2, .step-3, .step-4{
  font-size: 1.8rem;
}

.opis h1{
  font-size: 1.5rem;
}
.item-body-small{
  margin: 15% 5%;
}
.grid-4{
  grid-gap: 40px;
}

#razlike h1{
  font-size: 1.6rem;
  margin: 10% 7% 25%;
}

.razlika h2{
  font-size: 2rem;
}
.razlika p{
  font-size: 18px;
}
#razlike{
margin-bottom: 14%;
}

}