body {
    border-top:solid 10px #8383A3;
    background:#ffffff;
    font-family: arial;
        margin: 0px;
}
h2 {
    font-size:2rem;
}
h3 {
    font-size: 1.5rem;
}
h4 {
    font-size:1.5rem;
}
.main-cnt-wrp-w-dec {
    display: grid;
grid-template-columns: 10% 80% 10%;
background-image: url(/images/web/home/web.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
.side-highlight-wrap {
    display:grid;
    grid-template-columns:repeat(4, 25%);
}
.side-highlight-wrap-r {
    display:grid;
       
}
.highlights-aj {
 	background: linear-gradient(-45deg, #F5F5F5, #ACACBF);
	-webkit-animation: highlt 4s ease infinite;
	-moz-animation: highlt 4s ease infinite;
	animation: highlt 4s ease infinite;
}
.button {
    background:#555572;
    color:#fff;
    padding:5px 10px;
    border-radius:1rem;
    text-decoration: none;
}
.button:hover, .button:focus, .button:active {
    background: #fff;
    color:#555572;
    border: solid 2px #555572;
}
section img {
    display: flex;
    margin:0px auto;
}
@keyframes highlt {
 /* 0% {
    background: #fff;
  }
  /* Adding a step in the middle */
  /*20% {
      background: #F5F5F5;
    
  }
  40% {
      background: #D4D4DC;
  }
  60% {
    background: #ACACBF;
  }
  80% {
    background: #D4D4DC;
  }
  100% {
    background: #fff;
  }*/
  0%, 100% {
      background:#D4D4DC;
  }
  50% {
      background:#ACACBF;
  }

  
}

.home-intr {
    display: grid;
    text-align: center;
    justify-content:center;
    align-items: center;
}
.jb-type {
    font-size:4rem;
    color: #000;
    padding: 50px;
    background-image: -webkit-linear-gradient(left, #000, #888);
    background-image: -moz-linear-gradient(left, #000, #888);
    background-image: -ms-linear-gradient(left, #000, #888);
    background-image: -o-linear-gradient(left, #000, #888);
    background-image: linear-gradient(to right, #000, #888);
    color: transparent !important;
    -webkit-background-clip: text;
    background-clip: text;
}
.art-background {
    display: grid;
    grid-template-columns: 80%;
    margin:0px auto;
    background:#8383A3;
    color:#fff;
    padding:30px;
}
@media (min-width:768px) {
.seventy-thirty {
    display:grid;
    grid-template-columns: 70% 30%;
}
.fifty-fifty {
    display:grid;
    grid-template-columns: 50% 50%;
}
}
/*@-webkit-keyframes highlt {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes highlt {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes highlt {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}*/

.border-bttm-hdr {
    height:5px;
    background:#D4D4DC;
    height:5px;
    border-radius:5px;
    margin-top: 8px;
}

.sprk-one {
    height:100%;
    width:40%;
}
.sprk-two {
    margin-top: 20%;
    height:30%;
    width:20%;
    margin-top:100%;
    border-radius: 5px;
}
.sprk-three {
    height:30%;
    width:10%;
    margin-top: 350%;
    border-radius: 5px;
}
.sprk-four {
    height:20%;
    width:15%;
    margin-top:50%;
    border-radius: 5px;
}
.sprk-eight {
    height:100%;
    width:40%;
    display: grid;
    align-item:end;
}
.sprk-seven {
    margin-top: 20%;
    height:30%;
    width:20%;
    margin-top:100%;
    border-radius: 5px;
}
.sprk-six {
    height:30%;
    width:10%;
    margin-top: 350%;
    border-radius: 5px;
}
.sprk-five {
    height: 100%;
width: 100%;
}
.type-wrp {
    display: grid;
        grid-template-columns: repeat(2,auto);
    grid-gap: 50px;
}
header {
display:grid;
}
h1 {
    font-size: 3em;
    margin-bottom:0px !important;
}

.lgo-ttl {
    text-decoration: none !important;
    font-family: arial;
    font-size:3.5em;
    color:#505050
}
.lgo-ttl:hover, .lgo-ttl:active, .lgo-ttl:focus {
    color:#555572;
}
/*nav {
     display: grid;
grid-template-columns: 20% 60% 20%;

}*/
/*.abt-tp-sctn {
    display: grid;
        grid-template-columns: 20% 60% 20%;
        
}*/

.mobile-men {
    display: none;
}
.nav-ul-top li {
    list-style-type:none !important;
    display: grid;
    background: rgba(212,212,220, .7);
}
.nav-ul-top {
display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: right;
    grid-area: 1/2;
    margin: 0px;
    padding: 0px;
}
.ex-images ul li img, .ex-images ul li video {
    max-width:350px;
}
nav a {
    padding:10px 20px;
    text-decoration: none !important;
    color: #555572;
    font-size: 1.2em;
}
nav a:hover {
    background: #555572;
    color:#ffffff;
}
.only-mb{
    display: none;
  
    
}
section {
    width:80%;
    margin:0px auto;
}
.gry {
    background: #F5F5F5;
}
video {
height:400px;
}
img {
    max-width:100%;
}
/*.ex-ul li h4 {
    font-size: 1.5rem;
}*/
.intro-txt {
    padding:50px 0;
    font-size:1.5rem;
    margin: 0px auto;
}
@media (max-width: 768px) {
    .intro-txt {
        font-size: 1rem;
    }
    .jb-type {
        font-size:1.5rem;
    }
    nav a {
        padding:5px;
    }
    .type-wrp {
        display:block;
    }
    .wid-nv {
    display: block;
}
.lgo-ttl {
    font-size: 2rem;
}
video {
height:300px;
}
.main-cnt-wrp-w-dec {
     grid-template-columns: 5% 90% 5%;
}
header {
display:block;
}
/*.only-mb{
    display: block;
    height: 270px;
    
}*/

.nav-ul-top {
    display: grid;
    grid-template-columns: repeat(3, auto);
    margin: 0px;
    padding: 0px;
}
.menu-icon-mobile .navicon {
    background: #F5F5F5;
    display: block;
    height: 6px;
    position: fixed;
    transition: background .2s ease-out;
    width: 35px;
    float: right;
    z-index: 99;
    right: 0;
    margin-right: 30px;
}
.label-fix {
    position: fixed !important;
    left: 0px !important;
    top: 0px;
    z-index: 9;
    background: #2a2a2a;
    height: 110px;
    border-bottom: solid #fff 7px;
}
.menu-icon-mobile {
    cursor: pointer;
    display: inline-block;
    float: left;
    padding: 32px 0px;
    position: fixed;
    user-select: none;
    margin-bottom: 0px;
}
/*.menu-btn-mobile {
    display: none;
}*/
.menu-btn-mobile:checked ~ .menu-icon-mobile .navicon {
    background: transparent;
    -webkit-transition: width 3s ease;
    -moz-transition: width 3s ease;
    -o-transition: width 3s ease;
    -ms-transition: width 3s ease;
    transition: width 3s ease;
    margin-left: 5px;
}
input[type=checkbox]:checked ~ .menu-mobile {
    background: #F5F5F5;
    z-index: 999;
    display: block;
    position: fixed;
    width: 240px;
    -webkit-transition: width 3s ease;
    -moz-transition: width 3s ease;
    -o-transition: width 3s ease;
    -ms-transition: width 3s ease;
    transition: width 3s ease;
    height: 100%;
    top: 87px;
    box-shadow: 0px 25px 26px -2px #000;
}
.abt-tp-sctn {
    display: block;
        padding: 0px 20px;
}

}
.spacer {
   margin-bottom: 3rem;
}
.link-image-hover {
  position: relative;
}
.link-image-background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .7s ease;
  background-color: rgba(85, 85, 114, .9);
}

.link-image-hover:hover .link-image-background, .link-image-hover:active .link-image-background, .link-image-hover:focus .link-image-background {
  opacity: 1;
}

.link-image-text {
  color: #fff;
  font-size: 2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  /* background: #fff; */
  padding: 1rem;
  border-radius: 1rem;
}
/*a:hover img, a:active img, a:focus img {
    border: solid 3px  #8383A3;
}*/
footer {
    padding:1rem;
}
footer .to-top-container {
    display:grid;
    justify-content:end;
}
footer .to-top-button {
    width: max-content;
}