a:link{
  color:white;
  text-decoration: none; 

}


.xlarge{
  font-size:24px!important
  
  }
.section,.code{
  margin-top:16px!important;margin-bottom:16px!important
  }
  .hover-opacity:hover{
    opacity:0.9;;
    color: rgb(81, 202, 101);

    }
    .opacity-off,.hover-opacity-off:hover{opacity:1}
.round-xlarge
{border-radius:16px}
.teal,.hover-teal:hover
{color:#fff;background-color:#009688 }
.light-grey,.hover-light-grey:hover,.light-gray,.hover-light-gray:hover
{color:#000;background-color:#000000}

  *, *:after, *:before {
    padding: 0;
    /* padding: 5px;*/-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow: hidden;
  font-family: "Poppins";
  padding:1px;
}

.background {
  width: 100vw;
  height: 100vh;
  background: #3E1E68;
}

.background span {
  width: 20vmin;
  height: 20vmin;
  border-radius: 20vmin;
  backface-visibility: hidden;
  position: absolute;
  animation-name: move;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.background span:nth-child(1) {
  color: #583C87;
  top: 39%;
  left: 48%;
  animation-duration: 32.9s;
  animation-delay: -9.5s;
  transform-origin: 17vw 0vh;
  box-shadow: 40vmin 0 9.153991901vmin currentColor;
}
.background span:nth-child(2) {
  color: #E45A84;
  top: 24%;
  left: 42%;
  animation-duration: 34.6s;
  animation-delay: -9.6s;
  transform-origin: 2vw -18vh;
  box-shadow: 40vmin 0 14.3547109652vmin currentColor;
}
.background span:nth-child(3) {
  color: #E45A84;
  top: 47%;
  left: 20%;
  animation-duration: 31.3s;
  animation-delay: -11.3s;
  transform-origin: -17vw 24vh;
  box-shadow: 40vmin 0 10.7173870958vmin currentColor;
}
.background span:nth-child(4) {
  color: #FFACAC;
  top: 78%;
  left: 56%;
  animation-duration: 33.7s;
  animation-delay: -12.8s;
  transform-origin: 13vw 17vh;
  box-shadow: 40vmin 0 11.202873549vmin currentColor;
}
.background span:nth-child(5) {
  color: #583C87;
  top: 27%;
  left: 88%;
  animation-duration: 33s;
  animation-delay: -4.1s;
  transform-origin: -4vw 4vh;
  box-shadow: -40vmin 0 7.9005941357vmin currentColor;
}
.background span:nth-child(6) {
  color: #E45A84;
  top: 25%;
  left: 99%;
  animation-duration: 30.4s;
  animation-delay: -3.3s;
  transform-origin: 12vw -5vh;
  box-shadow: -40vmin 0 13.3362877696vmin currentColor;
}
.background span:nth-child(7) {
  color: #E45A84;
  top: 8%;
  left: 90%;
  animation-duration: 34.3s;
  animation-delay: -9.6s;
  transform-origin: -22vw -21vh;
  box-shadow: 40vmin 0 8.461221316vmin currentColor;
}
.background span:nth-child(8) {
  color: #E45A84;
  top: 29%;
  left: 8%;
  animation-duration: 32.6s;
  animation-delay: -9.7s;
  transform-origin: -2vw -3vh;
  box-shadow: 40vmin 0 14.4243884874vmin currentColor;
}
.background span:nth-child(9) {
  color: #583C87;
  top: 3%;
  left: 39%;
  animation-duration: 30.5s;
  animation-delay: -7s;
  transform-origin: -24vw 12vh;
  box-shadow: -40vmin 0 14.422030633vmin currentColor;
}
.background span:nth-child(10) {
  color: #E45A84;
  top: 27%;
  left: 4%;
  animation-duration: 30.9s;
  animation-delay: -15.7s;
  transform-origin: -16vw 1vh;
  box-shadow: -40vmin 0 13.4290572858vmin currentColor;
}
.background span:nth-child(11) {
  color: #E45A84;
  top: 55%;
  left: 45%;
  animation-duration: 30.6s;
  animation-delay: -11.5s;
  transform-origin: 3vw -13vh;
  box-shadow: 40vmin 0 8.2266288803vmin currentColor;
}
.background span:nth-child(12) {
  color: #583C87;
  top: 33%;
  left: 46%;
  animation-duration: 32s;
  animation-delay: -14.9s;
  transform-origin: 1vw 21vh;
  box-shadow: 40vmin 0 6.9349456097vmin currentColor;
}
.background span:nth-child(13) {
  color: #E45A84;
  top: 96%;
  left: 55%;
  animation-duration: 30.4s;
  animation-delay: -12.9s;
  transform-origin: -16vw -20vh;
  box-shadow: -40vmin 0 14.4630434006vmin currentColor;
}
.background span:nth-child(14) {
  color: #FFACAC;
  top: 61%;
  left: 37%;
  animation-duration: 32.7s;
  animation-delay: -1.3s;
  transform-origin: -21vw 4vh;
  box-shadow: -40vmin 0 6.5985792411vmin currentColor;
}
.background span:nth-child(15) {
  color: #E45A84;
  top: 7%;
  left: 9%;
  animation-duration: 36s;
  animation-delay: -14.2s;
  transform-origin: -16vw 2vh;
  box-shadow: -40vmin 0 11.6635249894vmin currentColor;
}
.background span:nth-child(16) {
  color: #583C87;
  top: 34%;
  left: 99%;
  animation-duration: 35.6s;
  animation-delay: -8.7s;
  transform-origin: 11vw 5vh;
  box-shadow: -40vmin 0 6.5196588844vmin currentColor;
}
.background span:nth-child(17) {
  color: #FFACAC;
  top: 62%;
  left: 72%;
  animation-duration: 31.6s;
  animation-delay: -14.4s;
  transform-origin: -22vw 2vh;
  box-shadow: -40vmin 0 14.2003481587vmin currentColor;
}
.background span:nth-child(18) {
  color: #583C87;
  top: 92%;
  left: 21%;
  animation-duration: 30.9s;
  animation-delay: -13.5s;
  transform-origin: 11vw 8vh;
  box-shadow: -40vmin 0 8.5680940479vmin currentColor;
}
.background span:nth-child(19) {
  color: #E45A84;
  top: 45%;
  left: 88%;
  animation-duration: 32.7s;
  animation-delay: -5.3s;
  transform-origin: 19vw 6vh;
  box-shadow: -40vmin 0 5.269720656vmin currentColor;
}
.background span:nth-child(20) {
  color: #583C87;
  top: 66%;
  left: 19%;
  animation-duration: 31s;
  animation-delay: -14.1s;
  transform-origin: -8vw 3vh;
  box-shadow: -40vmin 0 6.1676537539vmin currentColor;
}

@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}


/* GRID 
.grid-container {
  
}*/
.grid-container:after {
  content: "";
  display: table;
  clear: both;
}
[class*='col-'] {
  float: left;
  /*border: 1px solid #000;*/
}
.col-1-2 {
  width: 50%;
}
.col-1-3 {
  width: 33.33%;
}
.col-1-4 {
  width: 25%;
}
.col-1-5 {
  width: 20%;
}
.col-1-6 {
  width: 16.666%;
}
.col-1-10 {
  width: 10%;
  border-radius: 5px
}

/* GRID */
.main {
  position: fixed;
  left: 0;
  top: 0;
  display: table;
  width: 100%;
  height: 100%;
}
.container {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  padding: 10px;
  
  /*text-align: center;*/
}
.content {
  max-width: 1280px;
  margin: 0 auto;
  /*background-color: red;*/
}
.col- main-content::after{
  content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 10px;
    width: 700px;
    height: 200px;
    background: #ffffff;
    transform: rotate(12deg);
    -webkit-transform: rotate(12deg);
    -moz-transform: rotate(12deg);
    -o-transform: rotate(12deg);
    z-index: inherit;
}
.sidebar {width: 6%;
  font-size: 18px;
  margin-right: 10px;
  margin-top: 2%;
  color:#000000 ;
  background-color:white;
  position: relative;
  overflow: unset;
  

  
}

.main-content {
  width: 37%;
  
  background-size: cover;
  background-color:rgb(255, 255, 255);
  background-size: 100% 55%;
  background-repeat: no-repeat;
  top: 0;
  left: 0;
  padding: 10%;
  position: relative;
  border-radius: 8px
}


.right-card {
  width: 38%;
  overflow: hidden;
  vertical-align: middle;
  height: 100%;
  height: 470px;
  margin-top: -235px;
  top: 50%;
  position: absolute;
  display: inline-block;
  
}
.right-card .card {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  opacity: 0;
  transition: left .3s, opacity .3s;
  padding: 5%;
}

.card.A {
  background-color: white;
  overflow-y: scroll;

} 
.card.B {
  background-color: white;
  overflow-y: scroll;

}
.card.C {
  background-color: white;
  overflow-y: scroll;

}
.card.D {
  background-color: white;
  overflow-y: scroll;
  
}
.card.E {
  background-color: white;
  overflow-y: scroll;

}

/*@keyframes open-card {
  0% {
    width: 0;
    opacity: 0
  }
  100% {
    width: 45%;
    opacity: 1
  }
}*/
.card.selected {
  left: 0;
  opacity: 1;
}
.card.nonselected {
  left: -100%;
  opacity: 1;
}

/*sidebar*/


 li{
   list-style-type: none;
   list-style: none;
   padding: 15% 0px ;
   text-align: center center;
   cursor: pointer;
   display: grid; 
   font-size: 13px;
   font-weight: 500;
   text-transform: uppercase;
   margin: 0
  
}  


  



.imag{
  
  width: 124px;
  height:124px;
  position: center;
  overflow: hidden;
  size: cover;
  border: 3px solid #ffffff;
  border-radius: 100px; 
  border-radius: 100%;
}

.animate-bottom{position:relative;animation:animatebottom 0.4s}
@keyframes animatebottom{from{bottom:-300px;opacity:0} 
to{bottom:0;opacity:1}}

.animate-right{position:relative;animation:animateright 0.4s}
@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}

/*------------------------------------*/
.slide
{width: 45%;
  height: auto;
  background-size: cover;
  background-color: white;
  background-size: 100% 50%;
  background-repeat: no-repeat;
  background-position: center;
  top: 0;
  left: 0;
}

.title {
	margin: 0 0 10px 0;
	font-size: 32px;
	color: #171717;
	line-height: 32px;
	font-weight: 400;
}
.title::before{
    content: '';
    position: absolute;
    left: 22px;
    top: px;
    width: 30px;
    height: 30px;
    background: -webkit-linear-gradient(-45deg, rgba(46, 202, 127, 0.4) 0%, rgba(46, 202, 127, 0.01) 100%);
    border-radius: 30px;
    
}
.title::after{
  content: '';
  position: absolute;
  left: 0px;
  bottom: 403px;
  width: 95%;
  height: 1px;
  background: -webkit-linear-gradient(-45deg, rgba(46, 202, 127, 0.4) 0%, rgba(46, 202, 127, 0.01) 100%);

}
.frm{
  height: 60px;
  width: 100%;
  border: none;
  border-bottom: 1px solid #d8dbe2;
  
}

.pht{
  width: 124px;
  height: 124px
}
.pht::before{
  content: '';
  position: absolute;
  left: 15px;
  top: 28px;
  width: 124px;
  height: 124px;
  background: -webkit-linear-gradient(-45deg, rgba(46, 202, 127, 0.4) 0%, rgba(46, 202, 127, 0.01) 100%);
  border-radius: 30px;
}
.card::before{
  content: '';
    position: absolute;
    left: 21px;
    top: 67px;
    width: 1px;
    height: 100%;
    background: -webkit-linear-gradient(-45deg, rgba(46, 202, 127, 0.4) 0%, rgba(46, 202, 127, 0.01) 100%);
    z-index: 1;
}
/*Filter*/
.d{
  width: 100%; 
  z-index: 1;position: fixed;top: 0;
  background-color: #2c6963;
}
.dd{
  float:left;
  
  margin-right: 10px;
  margin-left: 4px;
}
option {
  font-family: "Poppins";
}
button{
  font-family: "Poppins";
}
/*slide*/
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
  
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

li::after{
    content: '';
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: -moz-radial-gradient(right, ellipse cover, rgba(197, 202, 213, 0.7) 0%, rgba(255, 255, 255, 0) 70%);
    background: -webkit-radial-gradient(right, ellipse cover, rgba(197, 202, 213, 0.7) 0%, rgba(255, 255, 255, 0) 70%);
}