* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a {
	transition: background-color 0.5s;
	text-decoration: none;
	opacity: 1;
}

a:link {
	color: #696969;
}

a:visited {
	color: #808080;
}

a:hover {

}

body {
	background-color: #FAFAFA;
	font-family: Arial, Helvetica, sans-serif;
    line-height: 2;
    color: #696969;
    font-size: 13px;
    margin: 0;
    padding: 0;
    letter-spacing: 0.05em;
    text-align: center;
}

iframe{
	border: none;
    width:100%;
}

img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
    margin-bottom: 80px;
}

.splash-container {
	background-image: url(img/b-demo.jpg);
	background-repeat: no-repeat;
	background-size: cover;
    z-index: 1;
    overflow: hidden;
    width: 100%;
    height: 100% !important;
    top: 0;
    left: 0;
    position: fixed !important;
    opacity: 0.3;
}

.splash {
    width: 100%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    text-align: left;
}

.box {
	max-width: 530px;
	height: auto;
	padding: 0 20px 50px;
	margin: auto;
	text-align: left;
	}

button {
	border: none;
	margin: 0;
}

.bttn-bgcolor {
    display: inline-block;
    font-size: 15px;
    line-height: 30px;
    height: 38px;
    color: #fff;
    min-width: 100%;
    background-color: #008080;
    text-align: center;
    border-radius: 50px;
    max-width: 100%;
}

.bttn-bgcolor:hover {
	background-color: #20B2AA;
}

.bttn-bgcolor:active {
	opacity: 0.8;
}

.bgcolor a:hover {
	background-color: #696969;
    color: #FFF;
}

.logo {
	width: 130px; 
	height: auto;
	margin: 24px 0 0 0;
	opacity: 0.6; 
	transform: rotate(3deg);
	position: relative;
}

.logo img {
  height: auto;
  left: ;
  position: absolute;
  width: 130px;
}

.logo img:last-of-type {
  opacity: 0;
  transition: opacity .8s;
}

.logo:hover img:first-of-type {
  opacity: 0;
}

.logo:hover img {
  opacity: 1;
}

.content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 8%;
    z-index: 2;
    margin: 0;
    font-size: 15px !important;
}

.border-box {
	width: 100%;
	height: 50px;
}

.content {
    padding: 2em 2em 2em 2em;
    max-width: 720px;
}

.container {
	position: relative;
	width: 100%;
	max-width: 720px;
	margin: auto;
	padding: 20px;
	box-sizing: border-box; 
}

.column,
.columns {
	width: 100%;
	float: left;
	box-sizing: border-box; 
}

.wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0px;
	grid-auto-rows: minmax(100px, auto);
	position: relative;
	max-width: 720px;
	margin: auto;
	padding: 20px;
}

.bg-ptn1 {
  --s: 130px; /* control the size*/
  --c1: #feffff;
  --c2: #38c7b2;
  
  --_g: var(--c1) 90deg,#0000 90.5deg;
  background:
   conic-gradient(from -45deg,var(--_g)),
   conic-gradient(from 135deg,var(--_g)) calc(var(--s)/2) 0,
   var(--c2);
  background-size: var(--s) var(--s)
}

.bg-ptn2{
	background-image:repeating-linear-gradient(135deg, #e6e6fa 0, #e6e6fa 1px, transparent 0, transparent 50%);
	background-size:25px 25px}
}

.bg-ptn3 {
	background-image:repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor),
	repeating-linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%, currentColor);
	background-position:0 0,25px 25px;
	background-size:calc(2 * 25px) calc(2 * 25px)
}

.bg-ptn4 {
	background-image:repeating-linear-gradient(45deg, #e6e6fa 25%, 
	transparent 25%, 
	transparent 75%, 
	#e6e6fa 75%, 
	#e6e6fa),
	repeating-linear-gradient(45deg, #e6e6fa 25%, 
	transparent 25%, 
	transparent 75%, 
	#e6e6fa 75%, 
	#e6e6fa);
	background-position:0 0,25px 25px;background-size:calc(2 * 25px) calc(2 * 25px)
}

.bg-ptn5 {
	background:repeating-linear-gradient(45deg, transparent, transparent 25px, #fafafa 25px, #fafafa calc(2 * 25px))
}

.tx {
	border: solid thin #c0c0c0;
	padding: 50px; 
	font-family: sans-serif; 
	text-align: left; 
	line-height: 1.5; 
	border-radius: 10px
}

.left {
	margin:0 auto 0 0;
}

.right {
	margin:0 0 0 auto;
}

.one {
	grid-column: 1 / 3;
	grid-row: 1
}

.two {
	grid-column: 2;
	grid-row: 1;
}

.three {
	grid-column: 3;
	grid-row: 1;
}

@media (min-width: 300px) {
	section.container {
		width: 100%;
		padding:0; }
	.box {
		width: 95%; 
		padding: 0 25px 50px; }
	.wrapper {
		width: 95%; }
	.container {
		width: 95%;
		padding: 20px; }
}

@media (min-width: 400px) {
	section.container {
		width: 95%;
		padding: 0; }
	.box {
		width: 85%;
		padding: 0 20px 40px; }
	.wrapper {
		width: 85%; }
	.container {
		width: 85%;
		padding: 15px; }
}

@media (min-width: 700px) {
	.box {
		width: 85%; }
	.wrapper {
		width: 85%; }
	.container {
		width: 85%;
		padding: 20px; }
	.column,
	.columns {
		margin-left: 4%; }
	.column:first-child,
	.columns:first-child {
		margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 46%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}