.xmascalendar {
    background-image: url('Duell_kalenteri_02.jpg');
    background-size: cover;
    background-position: center;
background-color:lightblue;
    min-height: 600px;
    width: 100%;
    margin: 40px auto 0 auto;
    border-radius: 5px;
position:relative;
font-family:Arial;
}

#xmasclose {position:absolute; top:0px; right:0px; width:30px; height:30px; z-index:101}
#xmasclose img {width:100%; height:100%;}
.section {max-width:300px; width:100%; margin:auto;}
.xmasproduct .section:last-child {text-align: center;}
.pricelabel_today {font-weight:bold;}
.pricefield_today {font-size:30px; font-weight:bold; color:#1F76AC;}

.xmascontainer {padding:20px 80px;}

.box {display: flex;align-items: center; justify-content: center;border: 2px solid white;color: white; float:left;font-size: 20px;font-weight: bold;padding-left: 5px;height: 150px; }
.box:hover {background:white; color:green;}
.boxrow {display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:20px; padding:10px}
.box:hover {color: rgb(193, 193, 193);border-color: rgb(193, 193, 193);}

.task {border-radius: 5px;margin:auto;background-color: white;position: absolute;animation: show .5s;text-align: center;color: #393737;font-family: "Times New Roman", Times, serif;font-size: 20px;width:100%;height:100%; top:0; left:0;}

#xmascard {position:relative; border:8px solid #1F76AC; border-radius:10px; background:#cbc3c3; z-index:99999; top:0; left:0}


.decoration {pointer-events: none;background-image: url('https://powerfactory.fi/media/wysiwyg/joulu/xmas22_top_left.jpg'), url('https://powerfactory.fi/media/wysiwyg/joulu/xmas22_top_right.jpg'), url('https://powerfactory.fi/media/wysiwyg/joulu/xmas22_bottom_left.jpg'), url('https://powerfactory.fi/media/wysiwyg/joulu/xmas22_bottom_right.jpg');
background-position: left top, right top, left bottom, right bottom;
background-repeat:no-repeat; position:absolute; left:0; top:0; width:100%; height:100%; z-index:55}

#xmascard .products {
    display: flex;
    margin: auto;
   justify-content: center;
    /* grid-template-columns: repeat(auto-fill, minmax(100px, 200px)); */
grid-template-columns: repeat(2, 1fr);
    gap: 10px; grid-auto-flow: column; position:relative; z-index:99; flex-wrap:wrap;
}



.xmasproduct h2 {font-size:20px; word-break: break-word;}
.xmasproduct img {max-width:90% !important; margin:0 auto; height:200px; object-fit:contain;}
.xmasproduct {padding:5px;     padding: 1rem;box-shadow: 0px 0px 12px 4px rgba(0,0,0,.1);;border-radius: 20px; flex:1; margin:10px;     background: rgba(255,255,255,.8); margin:5px; overflow:hidden; flex-basis:300px;}
.xmasproduct p {color:#000 !important;}

.xmasproduct .btnosta {
    padding: 6% 16%;
    border: 0;
    font-family: inherit;
    font-family: Arial;
    background: #1F76AC;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 6px;
    margin-bottom: 10px; min-width:50%;}

@media (max-width:1200px){
#xmascard .products {grid-template-columns:1fr; grid-auto-flow:row}
.xmasproduct {display:grid; grid-template-columns:1fr 1fr 1fr; min-height:1px;}
.xmascontainer {padding:0;}
#xmascard .products {display:block}
}

@media (max-width:768px){

#xmascard .products {flex-direction:rows;}
.xmasproduct {grid-template-columns:1fr}
.xmasproduct .section:last-child {text-align: center;}
}

@keyframes show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

a {
    color: rgb(0, 155, 75);
}

a:hover {
    color: rgb(0, 213, 103);
}