/*******

UTILITY
z-x (10 & 100)
relativz
wp-xd (max-width 600,800,100)
br-max
img-contain
img-cover
dolj-mobil
dolj-dator
l-auto

MARGINS & PADDING
DESKTOP
*margins
dmt-x
dmb-x
dml-x
dlr-x

*padding sides
dps-x (0-130)
dpl-x (150, 250, 700 etc)
dpr-x (150, 250, 700 etc)

*padding top/bottom 
dptb-x (25, 50, 75, 100, 125, 150)

*padding overall
dp-x (5, 10, 15, 20)


MOBIL
*margins
mmt-x
mmb-x
mml-x

*padding
mptb-x (top bottom - 25, 50, 75, 100)

DESKTOP & MOBIL
ptb-5
ptb-10
ptb-20
ptb-30


FLEX
flex
flex-column
flex-row
flex-center2
flex-end
spacearound
dfg-x (10, 20, 30, 40, 50, 100)
w-x (25%-100%, endast desktop)
w-950 (950px)


README END ***/

/* Utility */
.wp-600 {
  max-width: 600px;
}

.wp-800 {
  max-width: 800px;
}

.wp-1000 {
  max-width: 1000px;
}

.relativz {
  position: relative;
}

.br-max {
  border-radius: 500vmax;
}

img.img-contain {
  object-fit: contain;
}

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

.z-10 {
  z-index: 10;
}

.z-100 {
  z-index: 100;
}

.l-auto {
  margin-left: auto;
}

@media screen and (max-width: 767px) {
  .dolj-mobil {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .dolj-dator {
    display: none !important;
  }
}

.inline {
  display: inline;
}

/* Margins */
.nm {
  margin: 0 !important;
}

/* Margin mobil */
@media screen and (max-width: 767px) {
  .mmt-0 {
    margin-top: 0px !important;
  }

  .mmt-5 {
    margin-top: 5px !important;
  }

  .mmt-10 {
    margin-top: 10px !important;
  }

  .mmt-15 {
    margin-top: 15px !important;
  }

  .mmt-20 {
    margin-top: 20px !important;
  }

  .mmt-30 {
    margin-top: 30px !important;
  }

  .mmt-40 {
    margin-top: 40px !important;
  }

  .mmt-50 {
    margin-top: 50px !important;
  }

  .mmt-60 {
    margin-top: 60px !important;
  }

  .mmt-70 {
    margin-top: 70px !important;
  }

  .mmt-80 {
    margin-top: 80px !important;
  }

  .mmt-90 {
    margin-top: 90px !important;
  }

  .mmt-100 {
    margin-top: 100px !important;
  }

  .mmb-0 {
    margin-bottom: 0 !important;
  }

  .mmb-5 {
    margin-bottom: 5px !important;
  }

  .mmb-10 {
    margin-bottom: 10px !important;
  }

  .mmb-20 {
    margin-bottom: 20px !important;
  }

  .mmb-30 {
    margin-bottom: 30px !important;
  }

  .mmb-40 {
    margin-bottom: 40px !important;
  }

  .mmb-50 {
    margin-bottom: 50px !important;
  }

  .mpb-50 {
    padding-bottom: 50px !important;
  }

  .mmb-60 {
    margin-bottom: 60px !important;
  }

  .mmb-70 {
    margin-bottom: 70px !important;
  }

  .mmb-80 {
    margin-bottom: 80px !important;
  }

  .mmb-90 {
    margin-bottom: 90px !important;
  }

  .mmb-100 {
    margin-bottom: 100px !important;
  }

  .mml-10 {
    margin-left: 10px !important;
  }

  .mml-20 {
    margin-left: 20px !important;
  }

  .mml-30 {
    margin-left: 30px !important;
  }

  .mml-40 {
    margin-left: 40px !important;
  }

  .mml-50 {
    margin-left: 50px !important;
  }

  .mml-60 {
    margin-left: 60px !important;
  }

  .mml-70 {
    margin-left: 70px !important;
  }

  .mml-80 {
    margin-left: 80px !important;
  }
  .mmr-10 {
    margin-right: 10px !important;
  }

  .mmr-20 {
    margin-right: 20px !important;
  }

  .mmr-30 {
    margin-right: 30px !important;
  }

  .mmr-40 {
    margin-right: 40px !important;
  }

  .mmr-50 {
    margin-right: 50px !important;
  }

  .mmr-60 {
    margin-right: 60px !important;
  }

  .mmr-70 {
    margin-right: 70px !important;
  }

  .mmr-80 {
    margin-right: 80px !important;
  }
}

/* Margins desktop */
@media screen and (min-width: 768px) {
  .dmt-0 {
    margin-top: 0px !important;
  }

  .dmt-10 {
    margin-top: 10px !important;
  }

  .dmt-20 {
    margin-top: 20px !important;
  }

  .dmt-30 {
    margin-top: 30px !important;
  }

  .dmt-40 {
    margin-top: 40px !important;
  }

  .dmt-50 {
    margin-top: 50px !important;
  }

  .dmt-60 {
    margin-top: 60px !important;
  }

  .dmt-70 {
    margin-top: 70px !important;
  }

  .dmt-80 {
    margin-top: 80px !important;
  }

  .dmt-90 {
    margin-top: 90px !important;
  }

  .dmt-100 {
    margin-top: 100px !important;
  }

  .dmt-150 {
    margin-top: 150px !important;
  }

  .dmb-0 {
    margin-bottom: 0 !important;
  }

  .dmb-10 {
    margin-bottom: 10px !important;
  }

  .dmb-20 {
    margin-bottom: 20px !important;
  }

  .dmb-30 {
    margin-bottom: 30px !important;
  }

  .dmb-40 {
    margin-bottom: 40px !important;
  }

  .dmb-50 {
    margin-bottom: 50px !important;
  }

  .dmb-60 {
    margin-bottom: 60px !important;
  }

  .dmb-70 {
    margin-bottom: 70px !important;
  }

  .dmb-80 {
    margin-bottom: 80px !important;
  }

  .dmb-90 {
    margin-bottom: 90px !important;
  }

  .dmb-100 {
    margin-bottom: 100px !important;
  }

  .dmb-110 {
    margin-bottom: 110px !important;
  }

  .dmb-120 {
    margin-bottom: 120px !important;
  }

  .dmb-150 {
    margin-bottom: 150px !important;
  }

  .dml-10 {
    margin-left: 10px !important;
  }

  .dml-20 {
    margin-left: 20px !important;
  }

  .dml-30 {
    margin-left: 30px !important;
  }

  .dml-40 {
    margin-left: 40px !important;
  }

  .dml-50 {
    margin-left: 50px !important;
  }

  .dml-60 {
    margin-left: 60px !important;
  }

  .dml-70 {
    margin-left: 70px !important;
  }

  .dml-80 {
    margin-left: 80px !important;
  }

  .dml-90 {
    margin-left: 90px !important;
  }

  .dml-100 {
    margin-left: 100px !important;
  }

  .dml-150 {
    margin-left: 150px !important;
  }

  .dmr-10 {
    margin-right: 10px !important;
  }

  .dmr-20 {
    margin-right: 20px !important;
  }

  .dmr-30 {
    margin-right: 30px !important;
  }

  .dmr-40 {
    margin-right: 40px !important;
  }

  .dmr-50 {
    margin-right: 50px !important;
  }

  .dmr-60 {
    margin-right: 60px !important;
  }

  .dmr-70 {
    margin-right: 70px !important;
  }

  .dmr-80 {
    margin-right: 80px !important;
  }

  .dmr-90 {
    margin-right: 90px !important;
  }

  .dmr-100 {
    margin-right: 100px !important;
  }

  /* Padding - overall */
  .dp-5 {
    padding: 5px;
  }

  .dp-10 {
    padding: 10px;
  }

  .dp-15 {
    padding: 15px;
  }

  .dp-20 {
    padding: 20px;
  }

  /* Sides */
  .dps-10 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .dps-20 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .dps-s30 {
    padding-left: 30px;
    padding-right: 30px;
  }

  .dps-130 {
    padding-left: 130px;
    padding-right: 130px;
  }
}

/* Top/Bottom */
.ptb-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.ptb-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.ptb-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.ptb-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* Padding desktop */
@media screen and (min-width: 1026px) {
  .dptb-25 {
    padding-top: 25px;
    padding-bottom: 25px;
  }

  .dptb-50 {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .dptb-75 {
    padding-top: 75px;
    padding-bottom: 75px;
  }

  .dptb-100 {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .dptb-125 {
    padding-top: 125px;
    padding-bottom: 125px;
  }

  .dptb-150 {
    padding-top: 150px;
    padding-bottom: 150px;
  }

  .dp-l25 {
    padding-left: 25px;
  }

  .dp-r25 {
    padding-right: 25px;
  }

  .dp-l50 {
    padding-left: 50px;
  }

  .dp-r50 {
    padding-right: 50px;
  }

  .dp-l100 {
    padding-left: 100px;
  }

  .dp-r100 {
    padding-right: 100px;
  }

  .dp-l150 {
    padding-left: 150px;
  }

  .dp-r150 {
    padding-right: 150px;
  }

  .dp-l200 {
    padding-left: 200px;
  }

  .dp-r150 {
    padding-right: 200px;
  }

  .dp-l250 {
    padding-left: 250px;
  }

  .dp-r250 {
    padding-right: 250px;
  }

  .dp-l700 {
    padding-left: 700px;
  }

  .dp-r700 {
    padding-right: 700px;
  }
}

@media screen and (max-width: 1025px) {
  .mptb-25 {
    padding-top: 25px;
    padding-bottom: 25px;
  }

  .mptb-50 {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .mptb-75 {
    padding-top: 75px;
    padding-bottom: 75px;
  }

  .mptb-100 {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

/* Flex */
@media screen and (max-width: 767px) {
  .flex {
    flex-direction: column;
  }
}

@media screen and (min-width: 768px) {
  .flex-column {
    flex-direction: column;
    display: flex;
  }

  .flex-row {
    flex-direction: row;
    display: flex;
  }
}

.flex-center2 {
  align-items: center;
  justify-content: center;
}

.flex-center {
  align-items: center;
}

.flex-end {
  align-items: flex-end;
}

.space-around {
  justify-content: space-around;
}

.space-between {
  justify-content: space-between;
}

@media screen and (min-width: 768px) {
  .dfg-10 {
    gap: 10px;
  }

  .dfg-20 {
    gap: 20px;
  }

  .dfg-30 {
    gap: 30px;
  }

  .dfg-40 {
    gap: 40px;
  }

  .dfg-50 {
    gap: 50px;
  }

  .dfg-100 {
    gap: 100px;
  }
}

@media screen and (max-width: 767px) {
  .mfg-10 {
    gap: 10px;
  }

  .mfg-20 {
    gap: 20px;
  }

  .mfg-30 {
    gap: 30px;
  }

  .mfg-40 {
    gap: 40px;
  }

  .mfg-50 {
    gap: 50px;
  }
}

@media screen and (min-width: 1026px) {
  .w-25 {
    width: 25%;
  }

  .w-50 {
    width: 50%;
  }

  .w-75 {
    width: 75%;
  }

  .w-100 {
    width: 100%;
  }

  .w-900 {
    max-width: 900px;
  }

  .w-950 {
    max-width: 950px;
  }

  .w-1000 {
    max-width: 1000px;
  }
}