html {}
body    { position:relative; margin:0px 0px; font-family: Calibri,Tahoma, Verdana, Arial, sans-serif, 'Lucida Calligraphy'; word-wrap:break-word; }
body    { background-color: #999; } /* background-image: url(/resources/img/hexagon.png); background-size: 2% 1%;} */
body    { background-position: left top; background-attachment: scroll;}
header  { }
nav     { }
footer  { }
aside   { margin:0px 20px; padding:0px 10px; box-shadow: 0px 2px 6px rgba(100, 100, 100, 0.3); float:left; }
section { }
div, img     { position:relative;}
table   { margin-left:auto; margin-right:auto; }

a { cursor:pointer; }

/******Layout******/
.block { display: block; }
.iblock { display: inline-block; }
.hide { display:none; }
.fleft { float:left; }
.fright { float: right; }
.clear {clear:both;}
.flex { display : flex; place-items: center; justify-content: center;}
.iflex : { display : inline-flex; }

.center { margin:auto auto; }
.centerLeft { margin-right:auto; margin-left:auto; }
.centerTop { margin:auto 0px; }

.centerText { text-align:center; }
.leftText { text-align:left; }
.rightText { text-align:right; }
.rightText! { text-align:right !important; }

.left-50 { left: -50px; }
.left-40 { left: -40px; }
.left-30 { left: -30px; }
.left-20 { left: -20px; }
.left-10 { left: -10px; }

.left50 { left: 50px; }
.left40 { left: 40px; }
.left30 { left: 30px; }
.left20 { left: 20px; }
.left10 { left: 10px; }

.top-50 { top: -50px; }
.top-40 { top: -40px; }
.top-30 { top: -30px; }
.top-20 { top: -20px; }
.top-10 { top: -10px; }

.top50 { top: 50px; }
.top40 { top: 40px; }
.top30 { top: 30px; }
.top20 { top: 20px; }
.top10 { top: 10px; }

.minw-s1 { min-width: 50px; } //use em
.minw-s2 { min-width: 75px; }
.minw-s3 { min-width: 100px; }
.minw-s4 { min-width: 125px; }
.minw-s5 { min-width: 150px; }
.minw-s6 { min-width: 175px; }
.minw-s7 { min-width: 200px; }

.minw-m1 { min-width: 300px; }
.minw-m2 { min-width: 350px; }
.minw-m3 { min-width: 400px; }
.minw-m4 { min-width: 450px; }
.minw-m5 { min-width: 500px; }
.minw-m6 { min-width: 550px; }
.minw-m7 { min-width: 600px; }

.minw-l1 { min-width: 800px; }
.minw-l2 { min-width: 1000px; }
.minw-l3 { min-width: 1200px; }
.minw-l4 { min-width: 1400px; }
.minw-l5 { min-width: 1600px; }
.minw-l6 { min-width: 1800px; }
.minw-l7 { min-width: 2000px; }

.maxw-s1 { max-width: 50px; } //use em
.maxw-s2 { max-width: 75px; }
.maxw-s3 { max-width: 100px; }
.maxw-s4 { max-width: 125px; }
.maxw-s5 { max-width: 150px; }
.maxw-s6 { max-width: 175px; }
.maxw-s7 { max-width: 200px; }

.maxw-m1 { max-width: 300px; }
.maxw-m2 { max-width: 350px; }
.maxw-m3 { max-width: 400px; }
.maxw-m4 { max-width: 450px; }
.maxw-m5 { max-width: 500px; }
.maxw-m6 { max-width: 550px; }
.maxw-m7 { max-width: 600px; }

.maxw-l1 { max-width: 800px; }
.maxw-l2 { max-width: 1000px; }
.maxw-l3 { max-width: 1200px; }
.maxw-l4 { max-width: 1400px; }
.maxw-l5 { max-width: 1600px; }
.maxw-l6 { max-width: 1800px; }
.maxw-l7 { max-width: 2000px; }

.maxh_9 { max-width: 50%!important; }
.maxh_8 { max-height: 80%; }
.maxh_7 { max-height: 70%; }
.maxh_6 { max-height: 60%; }



.bd5 { border-radius:5px; }
.bx20 { padding:20px 20px; }
.bx30 { padding:30px 30px; }
.bx50 { padding:50px 50px; }

.mgh10 { margin-bottom:10px; margin-top:10px; }
.mgw10 { margin-left:10px; margin-right:10px; }
.mgh20 { margin-bottom:20px; margin-top:20px; }
.mgw20 { margin-left:20px; margin-right:20px; }
.mgh30 { margin-bottom:30px; margin-top:30px; }
.mgw30 { margin-left:30px; margin-right:30px; }

.mg-y-60 {margin-top:60px;}

.pdh10 { padding-bottom: 10px; padding-top:10px; }
.pdh20 { padding-bottom: 20px; padding-top:20px; }

.prxl5 { padding-left : 0.5rem;}
.prxl1 { padding-left : 1.0rem;}

.prx1 { padding-left : 1.0rem; padding-right: 1.0rem;}

.pryb1 { padding-bottom : 1.0rem;}
.pryb2 { padding-bottom : 2.0rem;}

.pd-y-3 { padding-top : 30px;}

.round-border-1 { border-radius: 1rem!important; }
.round-border-2 { border-radius: 2rem!important; }
.round-border-3 { border-radius: 3rem!important; }
.round-border-4 { border-radius: 4rem!important; }
.round-border-5 { border-radius: 5rem!important; }

.round-border-0 { border-radius: 0px;!important; }

.round-border-top-1 { border-top-left-radius: 1rem!important; border-top-right-radius: 1rem!important; }
.round-border-btm-1 { border-bottom-left-radius: 1rem!important; border-bottom-right-radius: 1rem!important; }


/******\Layout******/

.main    { background-color: transparent;  margin: auto auto; position:relative; }
.maincontent { margin:auto auto; padding: 20px 10px; background-color:transparent; }

.centeredMedium { max-width: 850px; }
.centeredLarge { max-width: 1200px; }

.content { margin:20px; padding:20px; background-color:white; box-shadow: 0px 2px 6px rgba(240, 240, 240, 0.6); }

.light-grey { background-color:#eee; }
.mid-gray { background-color: :#ccc}
.dark-grey{ background-color:rgba(40,40,40,1); }

.whiteBackground { background-color:white; }
.shadowed { box-shadow: 2px 2px 6px rgba(100, 100, 100, 0.3); }
.shadowbase { box-shadow: 0px 25px 15px rgba(240, 240, 240, 0.4); }
.shadowed-light-dark { box-shadow: 0px 25px 15px rgba(40, 40, 40, 0.4); }
.shadowed-light { box-shadow: 0px 25px 15px rgba(255, 255, 255, 0.4); }

.anchor {
    display: block;
    position: relative;
    top: -135px;
    visibility: hidden;
}

.dropend, .dropdown-toggle {
  display: block;
}

/******Colors******/

.white { color:#FFFFFF; }
.black { color:#000000; }
.red { color:#AA0000; }
.red8 { color:#880000; }
.redA { color:#AA0000; }
.redC { color:#CC0000; }

.green8 { color:#008800; }

.blue8 { color:#000088; }

.grey5 { color:#555555; }
.grey7 { color:#777777; }
.grey8 { color:#888888; }
.grey9 { color:#999999; }
.greyD { color:#DDDDDD; }

.yelC5 { color:#CCCC55; }

.bnone { background-color: transparent; }
.bwhite { background-color:#FFFFFF; }
.bgrey4 { background-color:#444444; }
.bgrey9 { background-color:#999999; }
.bgreyD { background-color:#DDDDDD; }


.sh25-15-grey4 { box-shadow: 0px 25px 15px rgba(40, 40, 40, 0.4); }
.sh25-15-greyE { box-shadow: 0px 25px 15px rgba(240, 240, 240, 0.4); }
.sh25-15-greyF { box-shadow: 0px 25px 15px rgba(255, 255, 255, 0.4); }

.sh-25-15-grey9 { box-shadow: 0px -25px -15px rgba(144, 144, 144, 0.4); }

.darkerBack { background-color: #999; }
.whiteBox { border-radius:5px; margin:20px; padding:20px; background-color:white; box-shadow: 0px 25px 15px rgba(240, 240, 240, 0.4); }

.whiteBack { background-color: white; }
.grayBox {  border-radius:5px; margin:20px; padding:20px;  background-color:#DDDDDD; box-shadow: 0px 25px 15px rgba(40, 40, 40, 0.4); } //alias bd5 bx20 sh25-15-grey4 bgreyD

.darkBack { background-color:rgba(40,40,40,1); }
.lightedGrayBox { border-radius:5px; margin:20px; padding:20px; background-color:#DDDDDD; box-shadow: 0px 25px 15px rgba(255, 255, 255, 0.4); }

.darkenedGrayBox { border-radius:5px; color:white; margin:20px; padding:20px; background-color:#555; box-shadow: 0px 25px 15px rgba(40, 40, 40, 0.4); }

/******\Colors******/

.img-tsr-1
{
    margin:auto;
    height:300px;
    width: 350px;
    opacity:0.85;
	display:block;
}

.img-tsr-2
{
    height:220px;
    max-width: 600px;
    opacity:0.85;
	display:inline-block;
}
.row-element{}
.row-item { max-width:70em; height:50em; }

@media(min-width:70em)
{
	.row-item { max-width:100em; height:20em; }
}


.yRow { min-height: 150px; max-height:400px; background-color: rgb(220, 220, 80); }
.rRow { min-height: 150px; max-height:400px; background-color: rgb(220, 80, 80); }
.gRow { min-height: 150px; max-height:400px; background-color: rgb(80, 220, 80); }
.bRow { min-height: 150px; max-height:400px; background-color: rgb(80, 80, 220); }

.grey1Row { min-height: 150px; max-height:400px; background-color:#CCCCCC; }
.aRow { min-height: 150px; max-height:400px; background-color: transparent; }
.aRow-bordered{ min-height: 150px; max-height:2550px; background-color: transparent; border-top: 2px solid rgba(255,255,255, 0.7); border-bottom: 2px solid rgba(255,255,255, 0.7); box-shadow: 0px 2px 6px rgba(240, 240, 240, 0.6);  }

a { color:#DDD; text-decoration:none; }
a:hover { color:#AAA; }
/*a :visited { color:#DDD; } */

/* a.nav-link:visited { color: #770000 } */
a.nav-link.redC:hover { color: #FF0000; transform: scale(1.5); }
a.nav-link[data-selected="true"] { color: #FF0000; transform: scale(1.5); }

a.static, a.static:hover, a.static:after {
  color:#000!important;
}

.sidebar_link {
    padding:0.25rem;
}

.banner
{
    min-height: 290px;
    margin-bottom:20px;
    background-image: url(../../resources/img/FineWall_04.png);
    background-repeat: repeat-x;
	background-attachment: scroll;
    background-size: 560px 290px;
	background-color:rgb(240,240,240);
}

.chev-up
{
    height: 16px;
	width: 16px;
    background-image: url(../../resources/icon/chevron-up.png);
    background-size: 16px 16px;
	background-position:center;
}

.chev-down
{
    height: 16px;
	width: 16px;
    background-image: url(../../resources/icon/chevron-down.png);
    background-size: 16px 16px;
	background-position:center;
}

.img-label-1
{
    margin:auto;
    height:60px;
    max-width: 650px;
    opacity:0.85;
	display:block;
}

.logo-1
{
    margin:auto;
    height:200px;
    max-width: 200px;
    opacity:0.85;
	display:block;
}

#banner
{
    height: 310px;
    margin-bottom:20px;
    background-image: url(../../resources/img/FineWall_04.png);
    background-repeat: repeat-x;
	background-attachment: scroll;
    background-size: 600px 310px;
	background-position:center;
}

#logo
{
    margin:auto;
    height:250px;
    width: 250px;
    opacity:0.85;
	display:block;
}

#title
{
    margin:auto;
    height:60px;
    width: 650px;
	top:-30px;
    opacity:0.85;
	display:block;
}

#footerbanner
{
    background-image: url(/resources/img/FineWall_04.png);
    background-repeat: repeat-x;
    background-size: 100% 100%;
    background-position:center;
}

#footer
{
    background-color:#555;
    background-image: linear-gradient(#555,#000);
    clear: both;
    height: 80px;
    margin-top: 20px;
}

.bg-img
{
    width:100%;
    height:auto;
    background-repeat: repeat-none;
    background-size: 100% 100%;
    background-position:center;
}

.borderless { border: 0px!important; }

ul.round-item, div.round-items {

    margin: 0;
    gap: 1rem;
    padding: 0;
    display: flex;
    list-style: none;
    place-items: center;
    flex-direction: column;
}

li.round-item, div.round-item {

    width: 100%;
    text-align: center;
    border-radius: 1rem!important;
    padding: 1.1rem 1.5rem 1.1rem 1.5rem;
}

li.arrowed {
  list-style-type: disclosure-closed;
}

ul.stripe {
  width: min(100%, 60rem);
  overflow: hidden;
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 4rem);
  list-style: none;
  perspective: 1000px;
  display: grid;
  row-gap: 0.5rem;
}
ul.stripe li.card{
  position: relative;
  padding-block: 1.5rem;
  padding-inline: 2rem;
  background-color: var(--bg-color);
  background-image: linear-gradient(to right, rgb(0 0 0 / .15), transparent);
  transform-style: preserve-3d;
  color: var(--color);
  
  display: grid;
  /*grid-template: 'icon' 'title' 'content';*/
  row-gap: 0.5rem;
  column-gap: 2rem;
}
ul.stripe li.card::before, ul.stripe li.card::after {
  --side-rotate: 60deg;
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  transform-origin: calc(50% - (50% * var(--ry))) 50%  ;
  transform: rotateY(calc(var(--side-rotate) * var(--ry)));
  background-color: inherit;
  background-image: linear-gradient(calc(90deg * var(--ry)), rgb(0 0 0 / .25), rgb(0 0 0 / .5));  
}
ul.stripe li.card::before {--ry: -1; right: 100% }
ul.stripe li.card::after {--ry: 1; left: 100% }

ul.stripe li.card .icon {
  grid-area: icon;
  display: grid;
  place-items: center;
}
ul.stripe li.card .icon i {
  font-size: 2rem;
}
ul.stripe li.card .title{
  grid-area: title;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}
ul.stripe li.card .content{
  grid-area: content;
}

@media (min-width: 30rem){
  ul.stripe li.card {
    /*grid-template: 'icon title' 'icon content';*/
    text-align: left;
  }
  ul.stripe li.card .title { text-align: left }
}

p,li {
  font-size: 1.2rem;
}

.font-medium {
  p,li {
     font-size : 1.5rem; 
  }
}

:root {
  --grey_grd : background-color:#ccc;background-image:linear-gradient(to top, #eee, #ccc);
  --white_grd : background-color: #fff;
}

.grey-grd {
  background-color:#ccc;background-image:linear-gradient(to top, #eee, #ccc);
}

/*
1,2,3 ,7,8,9 ,13,... 6n+1, 6n+2,6n+3
4,5,6 ,10,11,12, 16,... 6n, 6n-1, 6n-2, 

always 3 + 6
*/
.carddiv div:nth-child(6n+1 of .carded)
,.carddiv div:nth-child(6n+2 of .carded) 
,.carddiv div:nth-child(6n+3 of .carded) {
    background-color: #fff;

    .content-card, .content-card-head {
        background-color:#ccc;background-image:linear-gradient(to top, #eee, #ccc);
    }

    .content-card-r, .content-card-head-r {
        background-color:#ccc;background-image:linear-gradient(to left, #eee, #ccc);
    }
}

.carddiv div:nth-child(6n of .carded)
,.carddiv div:nth-child(6n-1 of .carded)
,.carddiv div:nth-child(6n-2 of .carded) {

  background-color: #fff;

    .content-card, .content-card-head {
        background-color:#ccc;background-image:linear-gradient(to top, #eee, #ccc);
    }

    .content-card-r, .content-card-head-r {
        background-color:#ccc;background-image:linear-gradient(to left, #eee, #ccc);
    }

  /*
    background-color: #eee;

    .content-card, .content-card-head {
        background-color:#eee;background-image:linear-gradient(#fff, #bbb);
    }

    .content-card-r, .content-card-head-r {
        background-color:#eee;background-image:linear-gradient(to right, #fff, #bbb);
    }
    */
}

.card-group div:nth-child(n of .striped-listing):nth-child(1)
{
  ul{
    padding-left:0px!important;    
  }
}

.card-group div:nth-child(n of .striped-listing):nth-child(2)
{
ul{
    padding-right:0px!important;
  }
}

/*
.carddiv div:nth-child(4n+1 of .content-card) {
    background-color:#AAA;background-image:linear-gradient(#eee, #aaa);
}

.carddiv div:nth-child(4n+2 of .content-card) {
    background-color:#AAA;background-image:linear-gradient(#eee, #aaa);
}

.carddiv div:nth-child(4n+3 of .content-card) {
    background-color:#fff;background-image:linear-gradient(#fff, #ddd);
}

.carddiv div:nth-child(4n of .content-card) {
    background-color:#fff;background-image:linear-gradient(#fff, #ddd);
}

*/

/*li,p {font-size:1.2rem;}*/