:root {
    --head: "terminal_grotesque";
    --body: "Barecast";

    --maincolor: #ffffff;

    --accent1: #294FDB;
    --accent2: #8391ED;
    --accent3:#D0C0FF;
    --accent4: #A493D9;
    --light: #E1EDDE;
    --dark: #353B67;
    --white: #f3f2f2;
}

@media (max-width: 820px) {
    .commexample{
    display:flex;
    flex-direction:column;
    }
 
}

@media (min-width: 821px) {
    .commexample{
        display:grid;
        grid-template-areas:
        "examples info"
        "more more";
        grid-template-columns: 1fr 1fr;
        margin: 10px 40px 10px 40px;
    }
}

.commexample{
    border-image: url('/img/9 slice-3.png') 14 14 10 14 fill / 14px 14px 10px 14px;
    padding: 24px 14px 14px 10px;
    gap:10px;
    background-color: #394f9e;
    border-radius:16px;
    color:var(--accent3);
    align-items: center;
 }


.commexample div.examples{
    grid-area: examples;
    height:200px;
}

.commexample div.info{
    grid-area: info;
    padding:20px;
    text-align: center;
    align-items: center;
}

.commexample div.more{
    grid-area: more;
    padding:0px 10px 0px 10px;
}



* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
}

.slideshow-container img {
height:200px;
object-fit: contain;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 60%;
  width: auto;
  padding: 10px;
  margin-top: -22px;
  color: var(--light);
  font-weight: bold;
  font-size: 14px;
  transition: 0.6s ease;
  border-radius: 100px;
  user-select: none;
  background-color: #8391ED;
}

/* Position the "next button" to the right */
.next {
  right: 0;
}

/* On hover, add a grey background color */
.prev:hover, .next:hover {
  background-color: var(--accent1);
  color:var(--accent3);
    background-image: url('/img/highlightpattern-export.gif');
    background-blend-mode: soft-light;
    transform: translateY(4px);
}



/**/
.w3-container{padding:0.01em 16px}
.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}


.price{
    font-size: 20px;
    color: var(--accent3);
}

h4{
    font-size: 32px;
    color: var(--light);
    text-align: center;
    font-family: var(--head);
    font-weight: 400;
    margin: 0px;
}



#myModal{
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0, .8);
    text-align:center;
}

#myModal img{
  max-height:90vh;
  max-width:90vw;
}