::-webkit-scrollbar {width: 2px;height: 2px;}
::-webkit-scrollbar-button {width: 0px;height: 0px;}
::-webkit-scrollbar-thumb {background: #e1e1e1; border: 0px none #ffffff;
border-radius: 50px;}
::-webkit-scrollbar-thumb:hover {background: #ffffff;}
::-webkit-scrollbar-thumb:active {background: #000000;}
::-webkit-scrollbar-track {background: #666666;
border: 0px none #ffffff;border-radius: 50px;}
::-webkit-scrollbar-track:hover {background: #666666;}
::-webkit-scrollbar-track:active {background: #333333;}
::-webkit-scrollbar-corner {background: transparent;}
.boxes{position:relative; width:100%; overflow:hidden;}
.boxes a{display:block; color:#333;}
.boxes.pd20{padding:20px; background-color:#f1f1f1; width:calc(100% - 40px);}
.boxes.radius{border-radius:5px;}
.boxes.bgwhite{background-color:#fff;}
.boxes div.images{overflow:hidden;}
.boxes div.images img{transition: transform 0.3s ease;}
.boxes div.images.rat43{aspect-ratio:4/3;}
.boxes div.images.rat42{aspect-ratio:4/2;}
.boxes div.images.rat916{aspect-ratio:9/16;}
.boxes div.images div.transparant, 
.boxes div.images div.desc{position:absolute; left:0; top:0; bottom:0; right:0;}
.boxes div.images div.transparant{background-color:#000; opacity:0; z-index:10001;}
.boxes div.images div.desc{color:#fff; text-align:center; z-index:10002; opacity:0;}
.boxes div.images div.desc div.text{font-size:18px; margin-bottom:10px;}
.boxes div.images div.desc div.icon{font-size:20px;}
.boxes div.documenticon{aspect-ratio:4/3; background-color:var(--white-back-color);}

.boxes div.table{margin:20px;}
.boxes div.table div.date{width:90%; margin-bottom:10px; color:#333; font-size:12px;}
.boxes div.table div.title{font-size:15px; margin-bottom:5px; width:90%;}
.boxes div.table div.shortdesc{width:90%; height:50px;}
.boxes div.prices{width:calc(100% - 40px); height:40px; padding-top:10px; position:absolute; left:20px; bottom:45px;}
.boxes div.prices div.campprice{text-decoration:line-through; color:#707070; font-size:18px; margin-bottom:-10px;}
.boxes div.prices div.price{font-size:22px;}
.boxes div.prices div.price span{font-size:13px;}
.boxes div.AskForPrice{width:calc(100% - 40px); height:50px; line-height:50px; position:absolute; left:20px; bottom:45px;}

.boxes div.bottomtext{position:absolute; left:0; right:0; top:0; bottom:0; width:100%; 
z-index:10002;background: rgb(248,248,248);
background: linear-gradient(180deg, rgba(248,248,248,0) 0%, rgba(0,0,0,1) 100%);}
.boxes div.bottomtext div.title{position:absolute; left:20px; bottom:20px; color:#fff;font-size:15px; }
.boxes a:hover div.images .transparant, .boxes a:active div.images .transparant{opacity:0.2;}
.boxes a:hover div.images img, .boxes a:active div.images img{ transform: scale(1.2);}
.boxes a:hover div.title, .boxes a:active div.title{padding-left:10px;}
.boxes a:hover div.images div.desc, .boxes a:active div.images div.title{opacity:1;}
.boxes a:hover div.bottomtext, .boxes a:active div.bottomtext{opacity:0;}
.boxes.instagram video, .boxes.instagram .carousel{aspect-ratio:4/3;}
.boxes.instagram a video{width:100%; height:300px;}
.boxes div.icon div.center{width:150px; height:150px;
border-radius:150px; margin-bottom:20px; overflow:hidden;}
.boxes a.icon div.titles{font-size:18px; margin-bottom:5px;}
.boxes a.icon:hover div.titles, .boxes a.icon:active div.titles{
    color:var(--primary-text-color);}
.boxes a.icon:hover > div.icon, .boxes a.icon:active > div.icon{opacity:0.7;}

.textlist{width:100%; height:80px; cursor:pointer;}
.textlist:hover, .textlist:active{background-color:var(--primary-back-color); color:var(--white-text-color);}

@media (min-width: 1px) and (max-width: 600px) {
    .boxes div.table div.shortdesc{height:auto;}
}