/* MOBILE */

/*container ti ovdje ne sadrzi flex*/
/* container-fluid je brzi i prljavi način da mozes neke elemente koristiti bez nekog fixiranog containera, nego koristiti širinu 100% i to je onda primijenjeno na sve breakpointe deviceva */
.container-2, .container-fluid-2 {
  width: 100%;
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
}


/*row ti sadrzi flex*/
.row-2 {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto; /*da se ne povecavaju stupci ili da se ne stiscu, po potrebi ćeš moći negdje staviti grow na 2 */
  margin-left: -15px; /*margin left & right je -15px kako bi se poništio padding koji je apliciran na .col- classi */
  margin-right: -15px;
}

.row-2 > [class^="col-"] {
  padding-left: 10px;
  padding-right: 10px;
} /*ako element čiji class atribut počinje s .col- a dijete je od .row dodaj padding */

.pos-relative {position: relative;}

/*Izgrađeni grid */
.col-1 {
  width: calc(1 / 12 * 100%);
}
.col-2 {
  width: calc(2 / 12 * 100%);
}
.col-3 {
  width: calc(3 / 12 * 100%);
}
.col-4 {
  width: calc(4 / 12 * 100%);
}
.col-5 {
  width: calc(5 / 12 * 100%);
}
.col-6 {
  width: calc(6 / 12 * 100%);
}
.col-7 {
  width: calc(7 / 12 * 100%);
}
.col-8 {
  width: calc(8 / 12 * 100%);
}
.col-9 {
  width: calc(9 / 12 * 100%);
}
.col-10 {
  width: calc(10 / 12 * 100%);
}
.col-11 {
  width: calc(11 / 12 * 100%);
}
.col-12 {
  width: 100%;
}

/* TABLET */
@media screen and (min-width: 768px) {
  .container-2 {
    max-width: 1180px;
  }
  .col-md-1 {
    width: calc(1 / 12 * 100%);
  }
  .col-md-2 {
    width: calc(2 / 12 * 100%);
  }
  .col-md-3 {
    width: calc(3 / 12 * 100%);
  }
  .col-md-4 {
    width: calc(4 / 12 * 100%);
  }
  .col-md-5 {
    width: calc(5 / 12 * 100%);
  }
  .col-md-6 {
    width: calc(6 / 12 * 100%);
  }
  .col-md-7 {
    width: calc(7 / 12 * 100%);
  }
  .col-md-8 {
    width: calc(8 / 12 * 100%);
  }
  .col-md-9 {
    width: calc(9 / 12 * 100%);
  }
  .col-md-10 {
    width: calc(10 / 12 * 100%);
  }
  .col-md-11 {
    width: calc(11 / 12 * 100%);
  }
  .col-md-12 {
    width: 100%;
  }
}

/* DESKTOP */
@media screen and (min-width: 1200px) {
  .container-2 {
    max-width: 1350px;
  }
  .col-lg-1 {
    width: calc(1 / 12 * 100%);
  }
  .col-lg-2 {
    width: calc(2 / 12 * 100%);
  }
  .col-lg-3 {
    width: calc(3 / 12 * 100%);
  }
  .col-lg-4 {
    width: calc(4 / 12 * 100%);
  }
  .col-lg-5 {
    width: calc(5 / 12 * 100%);
  }
  .col-lg-6 {
    width: calc(6 / 12 * 100%);
  }
  .col-lg-7 {
    width: calc(7 / 12 * 100%);
  }
  .col-lg-8 {
    width: calc(8 / 12 * 100%);
  }
  .col-lg-9 {
    width: calc(9 / 12 * 100%);
  }
  .col-lg-10 {
    width: calc(10 / 12 * 100%);
  }
  .col-lg-11 {
    width: calc(11 / 12 * 100%);
  }
  .col-lg-12 {
    width: 100%;
  }
  
}