/*******

UTILITY
z-x (10 & 100)
relativz
wp-xd (max-width 600,800,100)
br-max
img-contain
img-cover
bg-center
bg-bottom
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 ***/




html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
}




/* 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%;
}

.bg-center{
	background-position:center;
}

.bg-bottom{
	background-position:bottom;
}
.z-1 {
    z-index: 1;
}

.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;
    }
}

/* 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-110 {
        margin-top: 110px !important;
    }
    .dmt-120 {
        margin-top: 120px !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-25 {
        margin-left: 25px !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;
    display: flex;
}

.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-60 {
        gap: 60px;
    }

    .dfg-70 {
        gap: 70px;
    }

    .dfg-80 {
        gap: 80px;
    }

    .dfg-90 {
        gap: 90px;
    }

    .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-40 {
        width: 40%;
    }

    .w-50 {
        width: 50%;
    }

    .w-60 {
        width: 60%;
    }

    .w-75 {
        width: 75%;
    }

    .w-100 {
        width: 100%;
    }

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

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

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


}