:root {
    --margin:4em;
	--col1:rgb(237,0,86);
	--col2:rgb(140,198,63);
	--col3:rgb(41,171,226);
	--col4:rgb(80,80,90);
    --boxshad:rgba(0,0,0,0.3);
    --iconH:44px;
    --brdRad:4px;
}
*{ 
    box-sizing: border-box; 
    white-space: normal;
}
@font-face{
    font-family:'Montserrat';
    font-weight: 100 800;
    font-style: normal;
    src: url('https://cdn.rcdigi.com/fonts/montserrat/Montserrat-VariableFont_wght.ttf') format("truetype");
}

html{	   
	height:100%;    
    background: white;
    font-family: Montserrat, sans-serif;
}
body {
	color:rgba(80,80,90,0.8);
    margin:0px;
	height:100%;
    overflow-y: hidden;
    overflow-x: hidden;
}
/* headings *********************************************/
h1{
	font-size: 1.6em;
    font-weight:800;
    margin:0px;
    padding:16px;
}
h2{
    font-size:1.2em;
    font-weight:800;
    margin:0px;
    padding:16px;
}
h4{
    font-size: 1.0em;
	font-weight:600;	
    margin:0px;
    padding:16px;
}
p{
    font-size: 1.2em;
	font-weight:400;	
    margin:0px;
    padding:16px;
}
a{
    color:white;
    text-decoration: none;
}
b{
    font-weight:600;
}
span{
	display:inline-block;
}


.page{	
	margin: 0px auto 0px auto;
	position:relative;
	width:100svw;
	height:100svh;
}
.indexContainer{
    overflow-y:auto;
    overflow-x:hidden;
    min-width: 290px;
    max-width: 1720px;
    min-height: 100%;
    height:100svh;
	max-height:100svh;
    margin: auto auto;
    padding: 0px;
    background:#fff;
    box-shadow: 0px 2px 100px var(--boxshad);
}
.bannerBG{
	position:relative;
	display:flex;
	align-items: center;
	justify-content:center;
    width: 100%;
    height:120px;
    color:#fff;
	background: var(--col4);
    z-index:1;
	box-shadow:0px 1px 3px var(--boxshad);
}
.bannerLogo{
	display:flex;
	align-items: center;
	justify-content: center;
    background: var(--col4);
    width:clamp(120px, 50%, 240px);
	height:100%;
    margin-right:32px;
    cursor:pointer;  
    background-image:url(https://cdn.rcdigi.com/global/images/RCD_Logo_Col_Neg.svg);
    background-repeat:no-repeat;
    background-size:100%;
    background-position:50% 50%;
}
.titleBG{
	display:flex;
	align-items:center;
	justify-content:left;
	height:100%;
	width:100%;
    font-size:0.8em;
    font-weight:100;
    z-index:1;
    
    background: var(--col4);
	color:#fff;
}
.rwd-break{
	display:none;
}
sup{
    vertical-align: super;
	font-size:0.6em;
    top: -0.4em;
}
sub { 
  top: 0.2em; 
}
sup, sub {
	vertical-align: baseline;
	position: relative;
	font-size:0.8em;
	text-transform: lowercase;
}
.noBreak{
	display:inline-block;
	white-space: nowrap;
}
.footer{
	display:none;
	position:absolute;
    left:0px;
    bottom:0px;
    width: 100vw;
    height:74px;
    background-color:rgb(0,0,0);
    z-index:1;
}
.scroll2Top{
	display:flex;
	align-items: center;
	justify-content: center;
	position:fixed;
	bottom:0px;
	right:0px;
	background: rgba(255,255,255,0.7);
	border-radius:2px;
	z-index: 9001;
}
.scroll2Top i{
	color:rgb(80,80,90,0.5);
	margin:6px 2px 4px 2px;
	font-size:1.4em;
	padding:0px 4px;
	cursor:pointer;
}
.scroll2Top i:hover{
	color:rgb(80,80,90,0.9);
}
hr{
    border-style:solid;
    border-width:0.5px;
    width:80%;
    border-color:rgba(255,255,255,0.3);
}

.holder{
    position:relative;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap:wrap;
    padding:32px;
    min-height:240px;
}
.redBG, .greenBG, .blueBG, .greyBG{
    background-repeat:no-repeat;
    background-size:60%;
    background-position:100% 50%;
    clip-path: inset(0px 0px 0px 0 round 0px);
}

.redBG{
    background-color:var(--col1);
    color:#fff;
}
.redBG::before{
    background-repeat:no-repeat;
    background-size:60%;
    background-position:100% 50%;
    clip-path: inset(0px 0px 0px 0 round 0px);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity:0.4;
    background-image:url(https://cdn.rcdigi.com/global/images/RCD_rings.svg);
    content:"";
    z-index:-1;
}
.greenBG{
    background-color:var(--col2);
    color:var(--col4);
    /*background-image:url(https://cdn.rcdigi.com/global/images/RCD_4blobs.svg);*/
}
.greenBG *{
    color: rgb(255,255,255) !important;
}
.blueBG{
    background-color:var(--col3);
    color:#fff;
    background-image:url(https://cdn.rcdigi.com/global/images/RCD_plus.svg);
    background-position:120% 50%;
}
.greyBG{
    background-color:var(--col4);
    /*max-height:450px;*/
}
.whiteBG{
    background-color:white;
    color:var(--col4);
}
.whiteBG * {
    color: var(--col4);
}
.green{
    color:var(--col2) !important;
}

.blobImage{
    position:absolute;
    top: 50%;
    right: -2%;
    transform: translate(10%, -50%);
    background-size:100%;
    background-color:var(--col4);
    background-repeat:no-repeat;
    background-size:60%;
    background-position:50% 50%;

    border-radius:50%;
    width:clamp(180px, 120%, 640px);
    aspect-ratio:1/1;
    box-shadow: 0px 8px 16px var(--boxshad);
}
.pclip1{
    background-image:url(https://cdn.rcdigi.com/global/images/patrick-ladner-dEqlxNDeP1Q-unsplash.jpg);
    background-size:cover;
    background-position:50% 50%;
}
.code1{
    background-image:url(https://cdn.rcdigi.com/global/images/luca-bravo-XJXWbfSo2f0-unsplash.jpg);
    background-size:cover;
    background-position:50% 50%;
}
.flx{
    position:relative;
	display:flex;
    flex-direction:row;
    flex-basis: 100%;
    gap:16px;
    width:100%;
    padding:32px;
}
.flx1{
	align-items: stretch;
    justify-content: flex-start;
}
.flx2{
    flex-wrap:nowrap;
	align-items: flex-start;
    justify-content: flex-start;
    /*background-color: rgba(255,255,255, 0.3);*/
}
.break{
  flex-basis: 100%;
  height:0;
}
.icon_space{
	align-items: flex-start;
    justify-content: center;
    display: flex;
    width: clamp(60px, 16%, 80px);
    height: 100%;
    padding:16px 0px;
    margin-right:16px;
    background: white;
    border-radius: 16px;
}
.icon_space img{
    aspect-ratio:1/2;
}
hr{
    border-color:var(--col1);
}
.txt_space{
    width:60%;
    height:auto;
    color:#fff;
    padding-right:16px;
    flex-grow: 3;
}
.flx2 .txt_space{
    width:100%;
}
.img_space{
    position:relative;
    width:423px;
}
.largeNum{
    padding:0px 8px;
    font-size:5.6em;/*change to clamp*/
    font-weight:800;
    margin:0px;
    color:var(--col2) !important;
}
.figtext{
    padding: 0px 0px 16px 0px;
    margin:0px;
    font-size:1em;
    font-weight:400;
    line-height:1em;
    text-align: center;
}
.mobFrame{
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:16px 32px 32px 32px;
}
.linktext{
    display:none;
}

iframe{
    width: 100%;
    height: 100%;
}
.marvel-device{
    box-shadow:0px 4px 8px var(--boxshad), inset 0 0 3px 0 rgba(0, 0, 0, 0.2)!important;
}

.marvel-device.kiosk{
    width:360px;
    height:540px;
    padding:25px 25px 300px 25px ;
    background: linear-gradient(135deg,  rgb(76,76,76) 0%,rgb(89,89,89) 12%,rgb(102,102,102) 25%,rgb(71,71,71) 39%,rgb(44,44,44) 50%,rgb(0,0,0) 51%,rgb(17,17,17) 60%,rgb(43,43,43) 76%,rgb(28,28,28) 91%,rgb(19,19,19) 100%);

    border-radius:4px;
}
.marvel-device.kiosk .camera{
    display:none;
}
.marvel-device.kiosk .screen{
    position:relative;
    width:200%;
    height:200%;
    transform:translate(-25%, -25%) scale(50%);
    z-index:3;
    background: white;
    overflow:hidden;
    display:block;
    border-radius: 1px;
    -webkit-box-shadow: 0 0 0 3px #111;
    box-shadow: 0 0 0 3px #111;
}
.marvel-device.kiosk .top-bar{
    display:block;
    position:absolute;
    bottom:0px;
    left:-16px;
    height:32px;
    width:442px;
    background:rgb(19,19,19);
    border-radius:4px;
    box-shadow:0px 4px 8px var(--boxshad), inset 0 0 3px 0 rgba(0, 0, 0, 0.2)!important;
}

.container{
    border-radius:8px;
    background-color: white;
    padding:32px;
    margin: 16px;
    max-width: 600px;
}
.container form :where(input[type=text], select, textarea, input[type=date] , input[type=submit])  {
  width:100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}
.container form :where(input[type=submit]) {
  background-color:var(--col1);
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.container form :where(input[type=submit]:hover){
  background-color:var(--col1);
}
.container form :where(label){
    color:var(--col4);
}

.head{
display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--col4);
}
.head h1{
    font-size:2.4em;
    text-align:left;
    margin: 0;
}
.logo{
    height: 60px;
    width: auto;
}

.menu{
    position: relative;
    z-index:999;
    width:var(--iconH);
    height:var(--iconH);
    margin: 32px;
}
.menuIcons,
.menuTOC{
    position:absolute;
    left:0px;
    padding:0px;
    text-align:center;
    font-size:1.8em;
    border-radius:calc(var(--brdRad) / 2);
    z-index:1;
}
.menuIcons{
	margin:2px;
}
.menuLang_sub,
.menuTOC_sub{
    right:43px;
}
.menuTOC,
.menuTOC_sub{
    background-color:rgba(255,255,255,0.95);   
    width:max-content;
    max-width:360px;
    box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.3);
}
.menuTOC{
    top:var(--iconH);
    left:2px;
}
.menuIconHolder,
.menuDD{
    display:flex;
    justify-content:center;
    align-items:center;
	flex-direction:column;
    width:auto;
    margin:0px;
    padding:0px;
    border-spacing:0px;
}                                                                
.menuIcon{
	display:flex;
    justify-content:center;
    align-items:center;
    min-width:calc(var(--iconH) - 4px);
    height:calc(var(--iconH) - 4px);
    padding:0px;
    text-align:center;
    font-size:calc(var(--iconH) - 16px);
    color:rgb(140,140,140);
    background:#fff;
    cursor:pointer;
    border-radius:var(--brdRad);
    border:1px solid rgba(120,120,120,0.2);
}
.menuIconHolder{
    display:flex;
    position:relative;
    background-color:rgba(255,255,255,0.95);
    border-radius:var(--brdRad);
    width:auto;
    max-width:360px;
    box-shadow:0px 10px 20px var(--boxshad);
    z-index:1;
}
.menuList{
    width:auto;
    list-style:none;
    margin:0px;
    padding:0px;
    border-radius:var(--brdRad);
    background-color:rgba(255,255,255,1);
}
.menuList li{
    list-style:none;
    display:flex;
    justify-content: flex-start;
    align-items: center;
    min-height: calc(var(--iconH) - 3px);
    border-bottom: 1px solid var(--boxshad);
    width: auto;
    margin: 0px;
    padding:8px 12px;
    cursor: pointer;
    color: var(--col4);
    font-size: clamp(0.5em, calc(0.2vw + 0.5vh + 2vmin), 16px);
    text-align: left;
}
.menuList li a{
    color: var(--col4);
    font-size: clamp(0.5em, calc(0.2vw + 0.5vh + 2vmin), 16px);
    text-decoration: none;
}
.menuList :first-child{
    border-radius: var(--brdRad) var(--brdRad) 0px 0px;
}
.menuList :last-child{
    border-radius: 0px 0px var(--brdRad) var(--brdRad);
}
.menuList li:hover{
    background-color:rgba(200,200,200,0.2);
}
.menuList li:last-child{
    border-bottom-width:0px;
}


@media screen and (max-width:1260px){
    .marvel-device.macbook{
        display:none; 
    }
    .flx2{
        flex-wrap:wrap;
    }
}

@media screen and (max-width:640px) {
    *{ 
        font-size:1em !important;
    }
    .holder{
        padding:8px;
    }
    .greyBG{
        max-height:none;
    }
    .flx{
        padding:8px;
    }
    .flx2{
        flex-wrap: wrap;
    }
    .icon_space{
        display:none;
    }
    .txt_space{
        width:auto;
        z-index:1;
    padding-right:0px;
    }
    .img_space{
        position:relative;
        width:10%;
        opacity:0.2;
    }
    .redBG, .redBG::before, .blueBG, .greyBG{
        background-image:none;
    }
    .mobFrame{
        display:none;
    }
    .linktext{
        display:block;
    }
    .figtext{
       display:none; 
    }
    .marvel-device.macbook{
        display:none; 
    }
}

@media screen and (orientation: landscape) and (max-height:450px) {
    .mobFrame{
        display:none;
    }
}

/*Accessibility switching */
/*@media (prefers-contrast: more){
    .redBG, .greenBG, .blueBG, .greyBG{
        background-image:none;
        background-color:var(--col4);
    }
    .container{
        background-color:var(--col4);
        border:1px solid white;
    }
    input[type=submit] {
        background-color: black;
    }
}*/
/* and (forced-colors: active) */