:root {
  --cardW: 25.5vw;
  --cardH: 34vw;
  
  
}








body4 {

  font-family: Arial, Helvetica, sans-serif;
  
  
	
  

    -webkit-animation: bg1001 22s ease infinite;
    animation: bg1001 22s ease infinite;
	
	
	background: url("exp/13.svg");
	 
	 
	 animation: bg1001 22s ease infinite;
	

  overflow:hidden;
     
}

body2 {
background-image: url("img/bg12.jpeg");
background-repeat: no-repeat;
background-size: contain;
}

@media screen and (max-width: 268px) {
  body {
    display: none; /* or any other value for mobile screens */
  }
}

@media (orientation: portrait) {
body {
    display: none; 
  }
}

body{
	min-height:100%;
      min-width:100%;
background:url('bg590.jpeg');

background:url('bg4/bg2/416.jpeg');


background-repeat:no-repeat;

background-position: 20% 20%;
background-size:cover;
overflow:hidden;
background-color:#000;
}



.fontstyle100{
font-size:18px;
font-size:1.55vw;
font-family: "Alegreya Sans SC", sans-serif;
  font-weight: 700;
  
}

.fontstyle102{
font-size:8px;
color:#fff;
}

.fontstyle104{
font-size:20px;
font-size:1.72vw;
color:#000;
color:#e6f2ff;
font-family: "Alegreya Sans SC", sans-serif;
 font-weight: 700;
}


.cardclass1 {
  background-color: transparent;
 
  
  margin-left:350px;
  margin-left:30.1vw;
  
  margin-top:20px;
  margin-top:1.72vw;
  
  width: 300px;
  height: 400px;
  
  width: 24vw;
  height: 32vw;
  
   width: 27vw;
  height: 36vw;
  
   width: 25.5vw;
  height: 34vw;
  

  
  perspective: 1600px;
  
  transition: transform 0.6s;
  animation-fill-mode: forwards;
}



.cardclassInside {
  position: relative;
  width: 100%;
  height: 100%;
  
    width: 300px;
  height: 400px;
  
  width: 24vw;
  height: 32vw;
  
  width: 27vw;
  height: 36vw;
  
   width: 25.5vw;
  height: 34vw;
  
 
  
  
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  
  -webkit-box-shadow: 14px 10px 27px -6px rgba(0,0,0,0.27);
-moz-box-shadow: 14px 10px 27px -6px rgba(0,0,0,0.27);
box-shadow: 14px 10px 27px -6px rgba(0,0,0,0.27);
}

.anim100{
transform: translateX(60px) scale(0.5) rotateY(-530deg) scale(1.7) translateX(0px);
}

.anim102{
transform:  rotateY(-120deg) ;
}
.anim103{
transform:  rotateY(10deg) ;
}
.anim104{
transform: translateX(370px) scale(0.5) scale(1.9) translateX(-360px);
}


.anim105{
transform:  rotateY(-80deg) ;
}
.anim106{
transform:  rotateY(39deg) ;
}
.anim107{
transform: translateX(370px) scale(0.5) rotate(3deg) scale(2.3) translateX(-360px);
}

.anim120{
transform:  rotateY(-130deg) ;
}
.anim121{
transform:  rotateY(19deg) ;
}
.anim122{
transform: translateX(370px) scale(0.5) rotate(7deg) scale(1.8) translateX(-360px);
}

.anim130{
transform:  rotateY(-130deg) ;
}
.anim131{
transform:  rotateY(-19deg) ;
}
.anim132{
transform: translateX(370px) scale(0.5) rotate(7deg) scale(1.8) translateX(-260px);
}

.anim140{
transform:  rotateY(-100deg) ;
}
.anim141{
transform:  rotateY(-5deg) ;
}
.anim142{
transform: translateX(370px) translateY(-70px) scale(0.5) rotate(-17deg) scale(1.8) translateX(-290px) translateY(-70px);
}

.anim150{
transform:  rotateY(-175deg) ;
}
.anim151{
transform:  rotateY(-5deg) ;
}
.anim152{
transform: translateX(370px) translateY(-70px) scale(0.5) rotate(-17deg) scale(1.8) translateX(-290px) translateY(-70px);
}

.anim160{
transform:  rotateY(-180deg) ;
}
.anim161{
transform:  rotateY(5deg) ;
}
.anim162{
transform: translateX(370px) translateY(-70px) scale(0.5) rotate(10deg) scale(1.7) translateX(-290px) translateY(50px);
}



.flip-cajrd:hover .cardclassInside {
  transform: translateX(370px) scale(0.5) rotateY(-180deg) scale(1.7) translateX(360px);
}

.cardclassFront, .cardclassBack {
  position: absolute;
  width: 100%;
  height: 100%;
  
    width: 300px;
  height: 400px;
  
   width: 24vw;
  height: 32vw;
  
 width: 27vw;
  height: 36vw;
  
    width: 25.5vw;
  height: 34vw;
  
 
 
  
  
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.cardclassFront {

   
  

  background:#000;
  border:0px solid #ddd;
  color: black;
  overflow:hidden;
}

#s2{
 
 background:#000;
background:#fff;
background:#fae5b6;
background:#92c4dd;

background: linear-gradient(to bottom right, #00009e 0%, #3870d1 100%);
background: linear-gradient(to bottom right, #5fa0ca 0%, #ff99cc 100%);


}

#s3{
cursor:pointer;
}

.cardclassBack {
  background-color: #efefef;
   border:0px solid #ddd;
  color: #222;
  transform: rotateY(180deg);

}

#b1,#b2,#b3,#b4,#b5,#b6,#b7,#b8,#b9,#b10,#b11,#b12,#b13,#b14{

cursor:pointer;
background:#ddd;
padding:6px;
padding:7px 9px 7px 9px;
padding:0.6vw 0.77vw 0.6vw 0.77vw;


border-radius:7px;
border-radius:100%;

font-size:10px;
font-size:0.87vw;

font-weight:600;
 border:1px solid #777;
 
 text-decoration:underline;
 text-underline-offset: 2px;
}

#cardRef{
color:#000;
font-size:18px;
font-size:1.54vw;
}

#b1{
background:#000;
color:#fff;
margin-right:7px;
margin-left:2px;
}

#b2{
background:#eeeeee;
}

#b3{
background:#ddd;
margin-right:7px;
}

#b4{
background:#eeeeee;
}

#b5{

background:#ddd;
margin-right:7px;
}

#b6{
background:#eeeeee;
}

#b7{
background:#ddd;
margin-right:7px;
}

#b8{
background:#fff;
border:1px solid #000;
}

#b9{
background:#ddd;
margin-right:7px;
}

#b10{
background:#fff;
border:1px solid #000;
}

#b11{
background:#ddd;
margin-right:7px;
}

#b12{
background:#fff;
border:1px solid #000;
}


.animButton1{
transform: rotate(359deg);
}


#tc1{
font-size:0.7vw;
font-weight:700;
}

#tc2{
font-size:0.7vw;
font-weight:700;
 background: linear-gradient(to right, #f32170, #ff6b08,#cf23cf, #eedd44);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
	
	text-decoration:underline;
	
}

#yay1{
position:absolute;
z-index:10;
transform-origin: 0% 0%;
}
#yay2{
position:absolute;
z-index:5;
transform-origin: 0% 0%;
} 

.smallCaps{
font-family: "Alegreya Sans SC", sans-serif;
  font-weight: 400;
  font-style: normal;

}

.spaceunderline{
text-underline-offset: 3px;
}

#tot1{
position:absolute;
z-index:1;
left:0%;
 -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

#scrollDiv{
position:absolute;
z-index:100;
cursor:pointer;
top:95%;
left:-12vw;
transition:0.5s;
user-select: none;
} 

#type1{
position:absolute;
top:5vw;
z-index:0;
left:-12vw;
transition:1s;
transition-delay:0.3s;
user-select: none;

}
#sideBar1,#sideBar2{
position:absolute;
width:100px;
width:8.6vw;
height:400px;
height:34.4vw;
left:-150px;
left:-12.9vw;

top:7.5vw;
border-radius:5px;
border-radius:0.43vw;
z-index:0;
padding:9px;
padding:0.77vw;
background:#111;
border:2px solid #222;
outline:2px solid #111;
overflow-x:hidden;
transition: 1s ease;

user-select: none;
}

#sideBar1::-webkit-scrollbar {
    display: none; /* for Chrome, Safari and Opera */
}

#sideBar1, #sideBar2{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#sideBar2::-webkit-scrollbar {
    display: none; /* for Chrome, Safari and Opera */
}


#sideBar2{
z-index:0;
background:#111;
padding:0px;
width:170px;
width:14.6vw;
height:300px;
height:25.8vw;
left:70%;

top:5vw;
color:#fff;
}

.sB1, .sB2{
float:left;
text-align:center;
width:41px;
width:3.5vw;
height:20px;
height:1.72vw;
background:#eee;
border-radius:2px;
margin-right:-2px;
color:#000;
border:2px solid #222;
}

#sB4{
width:36px;
width:3.1vw;
}

.cB1{
float:left;
padding-top:0.43vw;
text-align:center;
width:41px;
width:3.5vw;
height:16px;
height:1.4vw;
background:#000;
border-radius:2px;
margin-right:-2px;
color:#fff;
border:2px solid #777;
font-size:10px;
font-family: "Alegreya Sans SC", sans-serif;
  font-weight: 400;
  font-style: normal;
transition:0.0s;
}

.cB1:hover{
background:#eee;
color:#000;
text-decoration:underline;
text-underline-offset: 3px;
}

.showSide{
transform: translateX(190px);
transform: translateX(16.34vw);
}

[id^=ct]{
cursor:pointer;
padding:10px;
padding:0.86vw;
font-size:14px;
font-size:1.2vw;
color:#fff;
background:#000;
border:2px solid #777;
font-family: "Alegreya Sans SC", sans-serif;
  font-weight: 400;
  font-style: normal;
  
  margin-bottom:5px;
  margin-bottom:0.43vw;
  
  border-radius:3px;
  
  transition:0.3s;
  transition-delay: 120ms;
}

[id^=ct]:hover{
background:#eee;
color:#000;
font-size:16px;
font-size:1.37vw;
padding:0.86vw;
padding-left:0.86vw;
margin-bottom:20px;
margin-bottom:1.72vw;
margin-top:0.86vw;
}

#topLogo20{
position:absolute;

z-index:-1;
left:40px;
top:10px;
font-size:8px;

}

#topLogo{

font-size:8px;
font-size:0.65vw;
margin-right:10px;
}

#topBar,#topBar2{
position:absolute;
background-color:rgba(0,0,0,0.3);
z-index:0;
left:2%;
top:0.43vw;
width:36%;
border-radius:3px;
}

#topBar{
padding:0.43vw;
}

#topBar2{
z-index:1;
left:70%;
}

#credits1,#image1{
cursor:pointer;
font-family:Neucha;
color:#fff;
width:40px;
font-size:24px;
Outline:3px solid #444;
outline-offset:7px;
margin-left:15px;
text-align:right;
}

#image1{
background-color:#000;
display:none;
}

.logoText{
vertical-align:middle;
}

#tcontrol{
position:absolute;
left:55vw;
top:16vw;
border-radius:5px;
border-top-right-radius:20px;
z-index:120;
padding:9px;
background:#efefef;
border:2px solid #222;
outline:2px solid #fff;
user-select: none;

  -webkit-box-shadow: 14px 10px 27px -6px rgba(0,0,0,0.27);
-moz-box-shadow: 14px 10px 27px -6px rgba(0,0,0,0.27);
box-shadow: 14px 10px 27px -6px rgba(0,0,0,0.27);
}

#tcontrol2{
cursor:move;
z-index:121;
background:#ddd;
padding:5px;
padding-right:4px;
font-size:0.7vw;
font-weight:700;
border-top-right-radius:10px;
}

#tarea{
position:absolute;
left:0vw;
top:0vw;
width:100vw;
height:100vw;
z-index:118;

}

#greeting1{
cursor:move;
position:absolute;
top:3vw;
left:3vw;
top:7%;
left:10%;
z-index:20;
color:#fff;
letter-spacing:1px;

font-size:10px;
font-size:0.86vw;

font-family: "Alegreya Sans SC", sans-serif;
  font-weight: 700;
  
 
}

#greeting4{
position:absolute;
top:65%;
left:0%;
	
width:80%;
text-align:center;
padding-left:10%;
  
  overflow-wrap: break-word;
}

#greeting4,#greeting4a{
font-family:Allura;
}

#greeting4a,#greeting3{
position:absolute;
padding-left:10%;
z-index:30;
color:#fff;
width:80%;
text-align:center;
font-size:14px;
 font-size:1.2vw;
  overflow-wrap: break-word;
  
}

#greeting3{
cursor:move;
font-size:20px;
font-size:1.72vw;
top:30%;
left:0;
z-index:90;
}

#greeting4a{
cursor:move;
top:70%;
left:0;
z-index:32;
}

#tx1{
	position:absolute;
	top:30%;
	left:0;
	width:100%;
	text-align:center;
  background-image: linear-gradient(90deg,#fff,#64687D);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
	
	background-size: 200% auto;
  animation: textShine 2s ease-in-out infinite alternate;
}


@keyframes textShine {
  to {
    background-position: 200%; background-size: 50% auto;
  }
  
}  

.selections{
float:left;
}
.custom-select {
  
}

.sB1{
cursor:pointer;
background:#444;
color:#fff;
letter-spacing:-4px;
}

select {
  appearance: none;
  /* safari */
  -webkit-appearance: none;
  /* other styles for aesthetics */
  width: 100px;
  width: 8.6vw;
  font-size: 14px;
  font-size: 1.2vw;
  padding: 0.675em 0.7em 0.675em 0.7em;
  background-color: #fff;
  border: 1px solid #caced1;
  border-radius: 3px;
  color: #000;
  cursor: pointer;
  margin-left:3px;
  margin-right:1px;
}

#sel1,#sel3a,#sel4a,#sel5,#sel7{
background:#444;
color:#fff;
font-family:Alegreya Sans SC;font-weight:300;
}
#sel2,#sel4,#sel6,#sel8,#sel20,#sav20{
background:#444;
color:#fff;
width: 50px;
width: 4.3vw;
padding: 0.675em 0.7em 0.675em 0.7em;
font-family:Alegreya Sans SC;font-weight:300;
}

#sel20,#sav20{
border: 1px solid #caced1;
background:#222;
  border-radius: 3px;
  margin-left:3px;
  margin-top:10px;
  width: 70px;
  width: 6vw;
  font-size:1em;
}

#sav20{
	font-size:0.7em;
	width: 4vw;
}

#sel3{
background:#444;
color:#fff;
width: 50px;
width: 4.3vw;
padding: 0.1em 0.1em 0.1em 0.1em;
}

textarea {
white-space:pre;
background:#111;
color:#fff;
  width: 160px;
  width: 13.76vw;
  height: 4.3vw;
  padding: 0.675em 0.7em 0.675em 0.7em;
  box-sizing: border-box;
  border: 2px solid #777;
  border-radius: 4px;
  background-color: #111;
  font-family: "Alegreya Sans", sans-serif;
  font-family:Neucha;
  font-weight: 400;
  font-size: 12px;
  font-size: 1.03vw;
  margin-left:3px;
  margin-right:1px;
  resize: none;
 
}

.txrec{
height: 40px;
}

#txgreeting3{
height: 5vw;
margin-bottom:-.2vw;
}

#txgreeting1::-webkit-scrollbar {
   display: none; /* for Chrome, Safari and Opera */
}
#txgreeting2::-webkit-scrollbar {
   display: none; /* for Chrome, Safari and Opera */
}
#txgreeting3::-webkit-scrollbar {
   display: none; /* for Chrome, Safari and Opera */
}
#txgreeting4::-webkit-scrollbar {
   display: none; /* for Chrome, Safari and Opera */
}
#txrec1::-webkit-scrollbar {
   display: none; /* for Chrome, Safari and Opera */
}

#txgreeting1,#txgreeting2,#txgreeting3,#txgreeting4,#txrec1{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  
   
}


#divColSelect,#divColSelect2,#divColSelect3,#divColSelect4,#divColSelect5{
background:#444;
color:#fff;
display: inline-block;
vertical-align:middle;
margin-top:10px;
}

#tx1color,#tx1color2,#tx1color3,#tx1color4,#tx1color5{
background:#222;
color:#fff;
float:left;
width: 4.3vw;
height: 50px;
height: 4.3vw;
margin-left:3px;
  margin-right:1px;
 
  
}

#sendCard{
cursor:pointer;	
font-family:Neucha;
color:#fff;
text-align:right;
padding:5px;
background-color:#343434;
border-radius:5px;
font-size:1.3vw;

}

#tx1Hex,#tx1Hex2,#tx1Hex3,#tx1Hex4,#tx1Hex5,#textOutlineSelect1,#recsq1,#recsq2,#vid1{
background:#222;
color:#fff;
float:left;
width: 90px;
width: 7.74vw;
height: 40px;
height: 3.44vw;
padding: 0.2em 0.2em 0.2em 0.5em;
border: 2px solid #777;
  border-radius: 4px;
margin-left:3px;
 margin-right:1px;
  font-family:Alegreya Sans SC;font-weight:300;
font-size: 16px;
font-size: 1.37vw;
}

#recsq1,#recsq2,#vid1{
background-color:#111;
width: 2.44vw;
height: 2.44vw;

}

#info7 a:link{color:#aaa;}
#info7 a:visited{color:#aaa;}
#info7 a:hover{color:#fff;}
#info7 a:active{color:#aaa;}

#info7{background:#000;}

#arules a:link{color:#aaa;}
#arules a:visited{color:#aaa;}
#arules a:hover{color:#fff;}
#arules a:active{color:#aaa;}

@-webkit-keyframes bg1001 {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes bg1001 {
     0%{background-position:0% 50%}
    50%{background-position:100% 50%}
	
    100%{background-position:0% 50%}
}

#textOutlineSelect1{
margin-top:10px;
height: 30px;
font-size: 10px;
font-size: 0.86vw;
width: 150px;
padding-top:5px;
}

#to1{
outline:3px solid #444;
width: 16px;
height: 16px;
}
#to2{
outline:3px solid #fff;
width: 16px;
height: 16px;
margin-left:10px;
}
#to3{
outline:3px solid #000;
margin-left:10px;
width: 16px;
height: 16px;
}

.outlineWhite{
 -webkit-text-stroke: 1px #fff;
text-stroke: 1px #fff;
}
.outlineBlack{
 -webkit-text-stroke: 1px #000;
text-stroke: 1px #000;
}


#fselect1::-webkit-scrollbar {
    display: none; /* for Chrome, Safari and Opera */
}

#sel1::-webkit-scrollbar {
    display: none; /* for Chrome, Safari and Opera */
}

#sel7::-webkit-scrollbar {
    display: none; /* for Chrome, Safari and Opera */
}
#sel3a::-webkit-scrollbar {
    display: none; /* for Chrome, Safari and Opera */
}
#sel4a::-webkit-scrollbar {
    display: none; /* for Chrome, Safari and Opera */
}
#fselect1,#sel1,#sel7,#sel3a,#sel4a{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

select optgroup4{
font-size:1vw;
color:#478563;
}

/*

}
*/
#scrollDownDiv{
background-color:#559323;
width:1.6vw;
height:3.72vw;
}

#cardIssue a:link{
	padding:0.5vw;
	text-underline-offset:4px;

	border:1px solid #ddd;
	color:#fff;
	border-radius:3%;
}
#cardIssue a:visited{
	padding:0.5vw;
	text-underline-offset:4px;
	border:1px solid #ddd;
	color:#fff;
	border-radius:3%;
}
#cardIssue a:hover{
	padding:0.5vw;
	text-underline-offset:4px;
	border:1px solid #ddd;
	color:#fff;
	border-radius:3%;
	background:#444;
}
#cardIssue a:active{
	padding:0.5vw;
	text-underline-offset:4px;
	border:1px solid #ddd;
	color:#fff;
	border-radius:3%;
	
}



#dialogue1,#dialogue2,#dialogue3{

position:absolute;
font-family:Alegreya Sans SC;font-weight:300;
font-family:Neucha;
width:270px;
width:23.22vw;
height:24.94vw;
left:50%;
 margin-left: -135px;
  margin-left: -11.61vw;
top:5vw;
border-radius:5px;
z-index:4;
padding:0.77vw;;
color:#ffffff;
background:#111;
border:2px solid #222;
outline:2px solid #000;
overflow-x:hidden;
transition: 1s ease;

display:none;
cursor:pointer;
width:170px;
width:14.62vw;
height:11.61vw;
left:80%;
z-index:1400;
transition: 1s ease;
}

#dialText,#dialText3{
	background:#222;
font-family: Arial,"Poppins", sans-serif;
font-family:Neucha;
  font-weight: 300;
  font-style: normal;
  font-size:12px;
  font-size:1.23vw;
height:5.0vw;
padding:0.86vw;
overflow:hidden;

}

#im720,#im721 { pointer-events: none }



#dialText{
	height:6.0vw;
}

#dialText::-webkit-scrollbar {
    display: none; /* for Chrome, Safari and Opera */
}

#dialogue1::-webkit-scrollbar {
    display: none; /* for Chrome, Safari and Opera */
}
#dialogue2::-webkit-scrollbar {
    display: none; /* for Chrome, Safari and Opera */
}

#dialogue3::-webkit-scrollbar {
    display: none; /* for Chrome, Safari and Opera */
}

#dialogue1,#dialText,#dialogue2,#dialText3,#dialogue3{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

@keyframes dialogAnim {
     0%{transform:scale(0.5) translateY(-20px)}
    30%{transform:scale(1.1)translateY(10px)}
	
    100%{transform:scale(1.0)translateY(-10px)}
}

.dialogShow{
animation: dialogAnim 0.7s ease;
animation-fill-mode: forwards
}

#dialyes:hover{
color:#000;
font-weight:900;
background:#fff;
}
#dialno:hover{
color:#000;
font-weight:900;
background:#fff;
}

#warning{
position:absolute;
z-index:700;
width:100%;
height:100%;
background:#000;
color:#fff;
display:none;
}

#jswarning{
position:absolute;
z-index:701;
width:100%;
height:100%;
background:#000;
color:#fff;
display:none;
}