body {


background: var(--background)!important;
color: var(--foreground)!important;





}

/* .darkmode {


} */

/*=======================
liquid menu CSS styles
========================*/

a.menu-link {
   font-size: 1rem;
}

.contact {
/* font-family: var(--english-font-one); */
  /*font-family: var(--english-font-two);*/
  text-transform: uppercase;
}

/* .contact-JP {
font-family: var(--japanese-font-one);
} */

/* The Modal (background) */
.modal {
  display: none;
  position: absolute;
  z-index: 1;
  padding-top: 80px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: black;
}

/*==================
 Modal Image */
 
 /* Hide the slides by default */
.mySlides-contact {
  display: none;
}

.column-contact {
/* position: relative; */
  /* width: var(--variablevcardW); */
/* height: 100px; */
  /* border: 1px solid red; */
}

 img.demo-contact {
 	margin: 0 auto;
 }

 .modal-contact {
  display: none;
  position: absolute;
  z-index: 5;
  padding-top: 80px;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  background-color: black;
}

.modal-content-contact {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 1rem;
  width: 100%;
  /*max-width: 1200px;*/
}

/* The close-contact Button / close-text-contact */
span.close-contact, span.close-text-contact {
  color: white;
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 3rem;
  font-weight: bold;
  z-index: 11;
}

span.close-contact:hover,
span.close-contact:focus,
span.close-text-contact:hover,
span.close-text-contact:focus {
  color: var(--ms-red);
  text-decoration: none;
  cursor: pointer;
}

span.close-text-contact {
text-align: right;
padding-right: 2rem;
}

/*==================
v-card
====================*/

.all-data-container {
	position: relative;
	width: 800px;
	background: transparent;
margin: 0 auto;
}

.v-card-data {
--variablevcardH: 270px;
--variablevcardW: 550px;
position: relative;
      display: flex;
      flex-direction: column; /* Or row, depending on your layout */
      color: var(--black);
	background: #f9f9f9;
	/* box-shadow: 02px 02px 1px #dbdbdb; */
	height: var(--variablevcardH);
	width: var(--variablevcardW);
	text-align: center;
	border: 1px solid #c0c0c0;
	padding: 1rem;
	margin: 0 auto;
	align-items: center;
}

.v-card-data::before {
	position: absolute;
	content: " ";
	top: 2px;
	left: -2px;
	height: var(--variablevcardH);
	width: var(--variablevcardW);
	background: #ffffff;
	border: 1px solid #d3d2d2;
	opacity: 0.79;
	z-index: -1;
}

.v-card-data::after {
	position: absolute;
	content: " ";
	top:4px;
	left: -4px;
	height: var(--variablevcardH);
	width: var(--variablevcardW);
	background: #ffffff;
	border: 1px solid #d3d2d2;
	opacity: 0.79;
	z-index: -2;
}

.v-card-control {
	 display: flex;
      flex-direction: row;
	  justify-content: space-around;
	width: var(--variablevcardW);
	margin-top: 3rem;
	border: 4px ridge var(--clr-primary);
	border-radius: 8px;
	padding-top: 1rem;
	padding-bottom: 1rem;
	background: transparent;
}

.v-card-control > div {
display: flex;
justify-content: center;
width: 300px;
}

div.line1, div.line1JP {
position: relative;
top: 101px;
margin-bottom: 137px;
font-size: 2rem;
font-weight: 700;
}

.line2 > div {
	padding: 0.3rem;
}

div.line2 > div {
	position: relative;
	display: inline-flex;
	padding: 0 18px;
	font-size: .8rem;
	letter-spacing: .1rem;
}

#vcard, #titlevcard {
	visibility: hidden;
}



.v-card-container {
display: inline-flex;
justify-content: center;
width: 100%;
margin: 4rem auto 0;
}

.v-card-container > div {
	padding: 0 2rem;
}

.qrImage {
position: absolute;
top: 13px;
right: 10px;
width: 80px;
}


.v-card-link:link {
	color: var(--foreground);
	font-weight: 700;
}

.v-card-link:visited {
	color: var(--foreground);
	font-weight: 700;
}

.v-card-link:hover {
	color: var(--ms-red);
	font-weight: 900;
}

/* #directmail {
	
} */


#qrText {
	text-align: center;
}

#vcard {
font-family: var(--english-font-one);
	color: var(--link-font-dark-color);
	font-weight: 700;
	background-color: white;
	 margin: 0 auto;
 }


/*=======================================
=======================================*/

i.fa.fa-copy::before, i.fa.fa-envelope::before {
	margin-left: 5px !important;
	margin-right: 0;
	padding-right: 0;
	padding-left: 5px;
}

i.fa.fa-download::before {
	margin-left: 8px;
	margin-right: 0;
	padding-right: 0;
	padding-left: 0;
}



/* ==============================
=================================
=================================
        @MEDIA QUERIES
=================================
=================================
================================= */

/* ============= Small Mobile  320px - 480px =============*/
@media screen and (max-width: 480px) {

span.close-text-contact {
display: none;
}

.menu-contact-en-container {
 		margin-left: -4rem;
 	}

	.v-card-control {
	 display: flex;
      flex-direction: column;
	   width: fit-content;
	margin: 3rem 0 0 1.8rem;
}


   .v-card-data {
	height: 270px;
	width:  45%;
   	margin: 0;
   }


.v-card-data::before {
	display: none;
}

.v-card-data::after {
	display: none;
}

.v-card-link:link {
font-size: 2rem;
}

.qrImage {
	top: 17px;
	right: 113px;
	width: 118px;
}


div.line1, div.line1JP {
display: none;

/* position: relative; */
/* top: 101px; */
margin-bottom: 137px;
font-size: 2rem;
font-weight: 700;
}

.line2 {
position: absolute;
top: 168px;
}

div.line2 > div {
	display: flex;
	font-size: 2rem;
}

}

/* ============= Large Mobile / Tabletse (Portrait) 481px – 768px =============*/
@media screen and (min-width: 481px) and (max-width: 768px) {


}

/* ============= Tablets / Small Laptops 769px – 1024px =============*/
@media screen and (min-width: 769px) and (max-width: 1024px) {

}

/* ============= Desktops / Laptops 1025px and up =============*/
@media screen and (min-width: 1025px) {

}