/* ~~~~~~~~~~ Café Fabers ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~ https://cafefabers.dk/ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~ AutoWeb26 (Lazarus Build 14.04.2026 v2.33) © cwang.dk ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~ Filename: cafefabers-styles.css (created: 23-04-2026 14:09:24) ~~~~~~~~~~~~~~~~~~~~ */

body {
  margin: 0px;
}

/* ~~~~~~~~~~ DEFAULT text selection colors: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
::selection { background-color: #0098d1; color: white; }
/* ~~~~~~~~~~ FIREFOX text selection colors: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
::-moz-selection { background-color: #0098d1; color: white; }

img {
max-width: 100%;
height: auto;
width: auto;
filter: grayscale(0%);
}

* {box-sizing: border-box; }

/* ~~~~~~~~~~ Link base styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
a, .a-small, .m, .m-small {
  color: #b22222;
  background-color: //* FANDT IKKE KEY *//;
  text-align: left;
  text-decoration: none;
  margin: 0px;
  font-weight: 600;
}

a, .a-small {
  font-family: "Open Sans", sans-serif;
  letter-spacing: 0.0em;
}

.m, .m-small {
  font-family: "Inconsolata", monospace;
  letter-spacing: 0.0em;
}

a {
  font-size: clamp(1.00rem, 1.50vw, 2.00rem);
}

.a-small {
  font-size: clamp(0.80rem, 1.20vw, 1.60rem);
}

.m {
  font-size: clamp(0.93rem, 1.40vw, 1.87rem);
}

.m-small {
  font-size: clamp(0.74rem, 1.12vw, 1.50rem);
}

/* ~~~~~~~~~~ Hover styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
a:hover, .a-small:hover, .m:hover, .m-small:hover {
  text-decoration: none;
  color: white;
  background-color: #b22222;
}

.no-hover-bg:hover {
  background-color: transparent;
}

.hamburger-container {
  position: fixed;
  top: 0px;
  right: 0px;
  width: clamp(50px, 5vw, 150px);
  height: clamp(50px, 5vw, 150px);
  border-radius: 0.0vw;
  cursor: pointer;
  background: transparent;
  z-index: 9
}

/* ~~~~~~~~~~ Hamburger hover styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.hamburger-container:hover rect.fgcol, .hamburger-container:hover circle.fgcol {
    fill: white; /* hover-fgcol */
}

.hamburger-container:hover rect.bgcol, .hamburger-container:hover circle.bgcol {
    fill: #b22222; /* hover-bgcol */
}

/* ~~~~~~~~~~ SVG icon containers ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.MATIconovs1-container, .MATIconovs2-container {
  width: clamp(3.00rem, 4.50vw, 6.00rem);
  height: clamp(3.00rem, 4.50vw, 6.00rem);
}

.MATIconovs2-container {
  width: clamp(2.00rem, 3.00vw, 4.00rem);
  height: clamp(2.00rem, 3.00vw, 4.00rem);
}

.MATIconovs1-container svg, .MATIconovs2-container svg {
  width: 100%;
  height: 100%;
}

.fontovsbanner {
  font-family: "Open Sans", sans-serif;
  letter-spacing: 0.0em;
  font-size: 4.5vw;
  color: white;
  text-decoration: none;
  background-color: #333333;
  text-align: center;
  font-weight: 400;
  font-stretch: 100%;
  padding-top:0.0vw;
  padding-bottom:0.8vw;
  line-height: 140%;
}

/* ~~~~~~~~~~ Overskrift base styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.icon, .iconovs1, .iconovs2, .iconhtml {
  font-family: "Material Symbols Outlined", sans-serif;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 64;
}

.icon {
  vertical-align: -8%;
  color: #000000;
}

.iconovs1, .iconovs2 {
  vertical-align: -32%;
  color: #000000;
}

.iconovs1 {
  font-size: clamp(3.00rem, 4.50vw, 6.00rem);
}

.iconovs2 {
  font-size: clamp(2.00rem, 3.00vw, 4.00rem);
}

.emoji {
  font-family: "Noto Color Emoji", sans-serif;
  background-color: tranaparent;
  vertical-align: -1%;
}

.fontovs1, .fontovs1news, .fontovs2, .fontovs2news {
  font-family: "STIX Two Text", serif;
  letter-spacing: 0.0em;
  text-align: left;
  line-height: 120%;
  display: block;
}

.fontovs1, .fontovs2 {
  color: #333333;
  font-weight: 600;
}

.fontovs1news, .fontovs2news {
  color: #292929;
  background-color: #fada5e;
  font-weight: 700;
}

.fontovs1 {
  font-size: clamp(2.00rem, 3.00vw, 4.00rem);
  margin-top: clamp(0.40rem, 0.60vw, 0.80rem);
  margin-bottom: clamp(0.30rem, 0.45vw, 0.60rem);
}

.fontovs1news {
  font-size: clamp(2.00rem, 3.00vw, 4.00rem);
  margin-top: clamp(0.40rem, 0.60vw, 0.80rem);
  margin-bottom: clamp(0.30rem, 0.45vw, 0.60rem);
  padding: clamp(0.40rem, 0.60vw, 0.80rem);
  padding-left: clamp(0.60rem, 0.90vw, 1.20rem);
}

.fontovs2 {
  font-size: clamp(1.33rem, 2.00vw, 2.67rem);
  margin-top: clamp(0.27rem, 0.40vw, 0.53rem);
  margin-bottom: clamp(0.20rem, 0.30vw, 0.40rem);
}

.fontovs2news {
  font-size: clamp(1.33rem, 2.00vw, 2.67rem);
  margin-top: clamp(0.27rem, 0.40vw, 0.53rem);
  margin-bottom: clamp(0.20rem, 0.30vw, 0.40rem);
  padding: clamp(0.27rem, 0.40vw, 0.53rem);
  padding-left: clamp(0.40rem, 0.60vw, 0.80rem);
}

/* ~~~~~~~~~~ Normal font base styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.fontnormal, .fontbulletlist, .fontnormalnews, .fontnormalsmall {
  font-family: "Open Sans", sans-serif;
  letter-spacing: 0.0em;
  text-align: left;
  line-height: 150%;
}

.fontnormal, .fontbulletlist, .fontnormalsmall {
  color: black;
  font-weight: 400;
}

.fontnormal, .fontnormalnews, .fontnormalsmall {
  display: block;
}

.fontnormal, .fontbulletlist {
  font-size: clamp(1.00rem, 1.50vw, 2.00rem);
}

.fontnormalnews {
  font-size: clamp(1.00rem, 1.50vw, 2.00rem);
  color: #292929;
  background-color: #fada5e;
  font-weight: 700;
  padding: clamp(0.25rem, 0.38vw, 0.50rem);
  padding-bottom: clamp(0.30rem, 0.45vw, 0.60rem);
  padding-left: clamp(0.40rem, 0.60vw, 0.80rem);
}

.fontnormalsmall {
  font-size: clamp(0.80rem, 1.20vw, 1.60rem);
}

li::marker {
  font-family: inherit;
}

.fontkode {
  font-family: "Inconsolata", monospace;
  letter-spacing: 0.0em;
  font-size: clamp(0.74rem, 1.12vw, 1.50rem);
  color: #ffff66;
  background-color: #0044aa;
  text-align: left;
  font-weight: 400;
  line-height: 140%;
  padding: clamp(0.49rem, 0.74vw, 0.99rem);
  display: block;
}

/* ~~~~~~~~~~ Mono font base styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.fontmono, .fontmonosmall, .fontbox {
  font-family: "Inconsolata", monospace;
  letter-spacing: 0.0em;
  color: black;
  text-align: left;
  font-weight: 400;
  line-height: 140%;
  display: block;
}

.fontmono, .fontmonosmall {
  vertical-align: middle;
}

.fontmono, .fontbox {
  font-size: clamp(0.93rem, 1.40vw, 1.87rem);
}

.fontmonosmall {
  font-size: clamp(0.74rem, 1.12vw, 1.50rem);
}

.fontbox {
  background-color: transparent;
}

/* ~~~~~~~~~~ Material Symbols base styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.material-symbols-normal, .material-symbols-small, .material-symbols-mono, .material-symbols-monosmall {
  font-family: "Material Symbols Outlined";
  text-align: left;
  vertical-align: middle;
}

.material-symbols-normal, .material-symbols-small {
  color: black;
  font-weight: 400;
  line-height: 150%;
}

.material-symbols-mono, .material-symbols-monosmall {
  color: black;
  font-weight: 400;
  line-height: 140%;
}

.material-symbols-normal { font-size: clamp(1.00rem, 1.50vw, 2.00rem); }
.material-symbols-small { font-size: clamp(0.80rem, 1.20vw, 1.60rem); }
.material-symbols-mono { font-size: clamp(0.93rem, 1.40vw, 1.87rem); }
.material-symbols-monosmall { font-size: clamp(0.74rem, 1.12vw, 1.50rem); }
.textbox {
  font-family: "Open Sans", sans-serif;
  letter-spacing: 0.0em;
  font-size: clamp(1.00rem, 1.50vw, 2.00rem);
  color: black;
  background-color: #e4e4e4;
  font-weight: 400;
  line-height: 140%;
  width: 100%;
  border-radius: 1.2vw;
  margin: 0;
  border: 0;
  padding-top: 0.8vw;
  padding-left: 1.6vw;
  padding-bottom: 1.0vw;
  padding-right: 1.2vw;
  display: block;
}

/* ~~~~~~~~~~ Tabel font base styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.tabelfont-grey, .tabelfont-white {
  font-family: "Inconsolata", monospace;
  letter-spacing: 0.0em;
  font-size: clamp(0.87rem, 1.30vw, 1.73rem);
  padding: clamp(0.26rem, 0.39vw, 0.52rem);
  padding-left: clamp(0.44rem, 0.65vw, 0.87rem);
  color: black;
  text-align: left;
  font-weight: 400;
  line-height: 80%;
  letter-spacing: -1px;
  display: block;
}

.tabelfont-grey {
  background-color: #e4e4e4;
}

.fontsidetitel {
  font-family: "Open Sans", sans-serif;
  letter-spacing: 0.0em;
  font-size: clamp(0.73rem, 1.10vw, 1.47rem);
  color: #969696;
  background-color: transparent;
  text-align: left;
  font-weight: 400;
  line-height: 150%;
}

.fontcwangdk {
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
  letter-spacing: 0.0em;
  font-size: clamp(0.72rem, 1.08vw, 1.44rem);
  color: #969696;
  background-color: transparent;
  font-weight: 400;
  line-height: 150%;
}

.fontcwangdk:hover {
  font-weight: bold;
}

/* ~~~~~~~~~~ Spaceline styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.spaceline, .spacelinemini {
  font-family: "Open Sans", sans-serif;
  line-height: 100%;
}

.spaceline {
  font-size: clamp(0.50rem, 0.75vw, 1.00rem);
}

.spacelinemini {
  font-size: clamp(0.30rem, 0.45vw, 0.60rem);
}

.sidenav {
  height: auto;
  width: auto;
  position: relative;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #888888;
  overflow: hidden;
  padding-top: 0px;
}

.sidenav a {
  font-family: "Open Sans", sans-serif;
  letter-spacing: 0.0em;
  font-size: clamp(1.00rem, 1.50vw, 2.00rem);
  padding-left: clamp(0.80rem, 1.20vw, 1.60rem);
  padding-bottom: clamp(0.20rem, 0.30vw, 0.40rem);
  padding-top: clamp(0.12rem, 0.18vw, 0.24rem);
  font-weight: 400;
  margin: 0px;
  text-decoration: none;
  color: white;
  background-color: #888888;
  display: block;
  line-height: 125%;
}

.sidenav a:hover {
  text-decoration: none;
  color: white;
  background-color: #b22222;
}

/* ~~~~~~~~~~ Sidenav heading/ovs styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.sidenavhead, .sidenavovs {
  font-family: "Open Sans", sans-serif;
  letter-spacing: 0.0em;
  padding-left: clamp(0.80rem, 1.20vw, 1.60rem);
  padding-bottom: clamp(0.10rem, 0.15vw, 0.20rem);
  padding-top: clamp(0.10rem, 0.15vw, 0.20rem);
  font-weight: 700;
  margin: 0px;
  text-decoration: none;
  color: #292929;
}

.sidenavhead {
  font-size: 0pt;
  display: none;
}

.sidenavovs {
  font-size: clamp(1.00rem, 1.50vw, 2.00rem);
  display: block;
  line-height: 125%;
}


.boxmenu {
  float: left;
  width: clamp(200px, 20vw, 400px);
  padding: 0vw;
  margin-top:-6px;
  overflow-y: hidden;
}

.boxmain {
  float: left;
  width: calc(100% - clamp(200px, 20vw, 400px));
  padding-left: 0vw;
  padding-right: 0vw;
  z-index: 1;
}

.boxartikel {
  float: left;
  width: 100%;
  padding-left: 2.5vw;
  padding-right: 2.5vw;
  z-index: 1;
}

/* ~~~~~~~~~~ Containervideo base styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.containervideo16x9, .containervideo3x1 {
  position: relative;
  padding-top: 0px;
  height: 0;
  overflow: hidden;
}

.containervideo16x9 {
  padding-bottom: 56.25%;
}

.containervideo3x1 {
  padding-bottom: 33.33%;
}

.containervideo16x9 iframe, .containervideo3x1 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ~~~~~~~~~~ Grid JPGserie - Mouse over - hover - zoom effect BEGIN ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.jpg-grid {
  display: grid;
  gap: 0.5vw;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  padding: 0px;
}

.jpg-grid-item {
  font-size: 20px;
  text-align: left;
}

.img-hover-zoom {
  width: auto;
  height: auto;
  overflow: hidden;
}

.img-hover-zoom a:hover {
  background-color: transparent !important;  /* No link background */
}

.img-hover-zoom img {
  transition: transform .2s; /* Animation */
  will-change: transform;
  display: block;  /* Remove any inline spacing */
}

.img-hover-zoom:hover img {
  -ms-transform: scale(1.05); /* IE 9 */
  -webkit-transform: scale(1.05); /* Safari 3-8 */
  transform: scale(1.05)
}

/* ~~~~~~~~~~ Grid JPGserie - Mouse over - hover - zoom effect END ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.show-only-on-pc {
  display: inline;
}

/* ~~~~~~~~~~ (* RESPONSIVE MOBILE SECTION *) ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media only screen and (max-width: 640px) {
.iconovs1 {
  font-size: clamp(3.00rem, 15.00vw, 3.75rem);
}

.iconovs2 {
  font-size: clamp(2.00rem, 10.00vw, 2.50rem);
}

img, video, #slideshow-container {
max-width: 100% !important;
}

.show-only-on-pc {
  display: none;
}

.boxmenu, .boxmain {
  width:100%;
}

/* ~~~~~~~~~~ Mobile link font-sizes ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
a:link, a:visited, a:hover, a:active {
  font-size: clamp(1.00rem, 5.00vw, 1.25rem);
}

.a-small:link, .a-small:visited, .a-small:hover, .a-small:active {
  font-size: clamp(0.80rem, 4.00vw, 1.00rem);
}

m:link, m:visited, m:hover, m:active {
  font-size: clamp(0.93rem, 4.67vw, 1.17rem);
}

.m-small:link, .m-small:visited, .m-small:hover, .m-small:active {
  font-size: clamp(0.74rem, 3.74vw, 0.94rem);
}

.hamburger-container {
  top: 0px;
  right: 0px;
  width: 15vw;
  height: 15vw;
  border-radius: 0.0vw;
}

/* ~~~~~~~~~~ Hamburger NO-hover on mobile ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.hamburger-container:hover rect.fgcol, .hamburger-container:hover circle.fgcol {
    fill: white; /* NO hover-fgcol */
}

.hamburger-container:hover rect.bgcol, .hamburger-container:hover circle.bgcol {
    fill: #888888; /* NO hover-bgcol */
}

.MATIconovs2-container {
  width: clamp(2.00rem, 10.00vw, 2.50rem);
  height: clamp(2.00rem, 10.00vw, 2.50rem);
}

.sidenavhead {
  font-size: clamp(1.25rem, 6.25vw, 1.56rem);
  display: block;
}

.sidenav {
  font-size: clamp(1.25rem, 6.25vw, 1.56rem);
}

.sidenav a {
  font-size: clamp(1.25rem, 6.25vw, 1.56rem);
  padding-bottom: clamp(0.38rem, 1.88vw, 0.47rem);
  padding-top: clamp(0.23rem, 1.13vw, 0.28rem);
}

.sidenava:hover {
  font-size: clamp(1.25rem, 6.25vw, 1.56rem);
}

.sidenavovs {
  font-size: clamp(1.25rem, 6.25vw, 1.56rem);
}

.fontovsbanner {
  font-size: 7vw;
}

.fontovs1 {
  font-size: clamp(2.00rem, 10.00vw, 2.50rem);
  margin-top: clamp(0.40rem, 2.00vw, 0.50rem);
  margin-bottom: clamp(0.30rem, 1.50vw, 0.38rem);
}

.fontovs1news {
  font-size: clamp(2.00rem, 10.00vw, 2.50rem);
  margin-top: clamp(0.40rem, 2.00vw, 0.50rem);
  margin-bottom: clamp(0.30rem, 1.50vw, 0.38rem);
}

.fontovs2 {
  font-size: clamp(1.33rem, 6.67vw, 1.67rem);
  margin-top: clamp(0.27rem, 1.33vw, 0.33rem);
  margin-bottom: clamp(0.20rem, 1.00vw, 0.25rem);
}

.fontovs2news {
  font-size: clamp(1.33rem, 6.67vw, 1.67rem);
  margin-top: clamp(0.27rem, 1.33vw, 0.33rem);
  margin-bottom: clamp(0.20rem, 1.00vw, 0.25rem);
}

.fontnormal {
  font-size: clamp(1.00rem, 5.00vw, 1.25rem);
  margin-top: clamp(0.20rem, 1.00vw, 0.25rem);
  margin-bottom: clamp(0.15rem, 0.75vw, 0.19rem);
}

.fontbulletlist {
  font-size: clamp(1.00rem, 5.00vw, 1.25rem);
}

.fontnormalnews {
  font-size: clamp(1.00rem, 5.00vw, 1.25rem);
}

.fontnormalsmall {
  font-size: clamp(0.80rem, 4.00vw, 1.00rem);
}

.fontcwangdk {
  font-size: clamp(0.80rem, 4.00vw, 1.00rem);
}

.material-symbols-normal {
  font-size: clamp(1.00rem, 5.00vw, 1.25rem);
}

.material-symbols-small {
  font-size: clamp(0.80rem, 4.00vw, 1.00rem);
}

.material-symbols-mono {
  font-size: clamp(0.93rem, 4.67vw, 1.17rem);
}

.material-symbols-monosmall {
  font-size: clamp(0.74rem, 3.74vw, 0.94rem);
}

.fontkode {
  font-size: clamp(0.93rem, 4.67vw, 1.17rem);
}

.fontmono {
  font-size: clamp(0.93rem, 4.67vw, 1.17rem);
  margin-top: clamp(0.19rem, 0.93vw, 0.23rem);
  margin-bottom: clamp(0.14rem, 0.70vw, 0.18rem);
}

.fontmonosmall {
  font-size: clamp(0.74rem, 3.74vw, 0.94rem);
}

.textbox {
  font-size: clamp(1.00rem, 5.00vw, 1.25rem);
}

.tabelfont-grey {
  font-size: clamp(0.87rem, 4.33vw, 1.08rem);
  padding: clamp(0.26rem, 1.30vw, 0.32rem);
  padding-left: clamp(0.44rem, 2.17vw, 0.54rem);
}

.tabelfont-white {
  font-size: clamp(0.87rem, 4.33vw, 1.08rem);
  padding: clamp(0.26rem, 1.30vw, 0.32rem);
  padding-left: clamp(0.44rem, 2.17vw, 0.54rem);
}

.fontsidetitel {
  font-size: clamp(0.73rem, 3.67vw, 0.92rem);
  margin-top: clamp(0.15rem, 0.73vw, 0.18rem);
  margin-bottom: clamp(0.11rem, 0.55vw, 0.14rem);
}

.spaceline {
  font-size: clamp(0.50rem, 2.50vw, 0.63rem);
  line-height: 100%;
}

.spacelinemini {
  font-size: clamp(0.30rem, 1.50vw, 0.38rem);
  line-height: 100%;
}

.jpg-grid {
  grid-template-columns: 1fr;
}

.img-hover-zoom img {
  transition: transform 0s; /* Animation */
}

.img-hover-zoom:hover img {
  -ms-transform: scale(1); /* IE 9 */
  -webkit-transform: scale(1); /* Safari 3-8 */
  transform: scale(1)
}

.jpg-grid-item a {
  pointer-events: none;
}

}

/* ~~~~~~~~~~ Responsive styles slut ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~ Responsive styles begynd ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media only screen and (min-width: 960px) {
.jpg-grid {
  grid-template-columns: 1fr 1fr;
}

}

/* ~~~~~~~~~~ Responsive styles slut ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~ Responsive styles begynd ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media only screen and (min-width: 1280px) {
.jpg-grid {
  grid-template-columns: 1fr 1fr 1fr;
}

}

/* ~~~~~~~~~~ Responsive styles slut ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~ Responsive styles begynd ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media only screen and (min-width: 1600px) {
.jpg-grid {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

}

/* ~~~~~~~~~~ Responsive styles slut ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~ Responsive styles begynd ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media only screen and (min-width: 1920px) {
.jpg-grid {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

}

/* ~~~~~~~~~~ Responsive styles slut ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */