body {
	display: grid;
	grid-template-rows: 1fr auto;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 52px;
    color: #FFFF00;
    text-align: center;
}

h2 {
    font-size: 32px;
    color: #0096c7;
    text-align: center;
	padding: 2%;
}

a {

    text-decoration: none;
    color: #000000;
}

a:hover {
    font-weight: bold;
	color: #04B486;
}

.max-width-img {
    max-width: 240px;
    height: auto;
	}
	
.gear-list {
    list-style: none;
    margin: 0 auto;
    padding: 20px;
	}
	
.no-margin {
   
    padding:1%;
	border: none;
	}
	
.welcome-background {
    margin: 0;
    padding: 0
    height: 100vh;
    background: radial-gradient(circle at top left, 
        #ff9999,
		#ffcc99,
		#ffffcc,
		#99ffcc,
		#99ccff,
		#cc99ff,
		#e6ccff
    );
    background-size: 150% 150%;
    background-position: 0% 0%;
}
	
.hoverable:hover .info {
  display: inline;
}

 .hoverable.clicked img {
            display: block !important;
        }
		
a.span {
        text-decoration: none;
        color: #6f42c1;
        position: relative;
        transition: color 0.3s ease;
      }

      a.span:hover {
        color: #6f42c;
      }

      .hoverable .pop-up-text {
        position: absolute;
        top: 100%;
		top: 2.33333em;
        left: 2em;
        display: none;
        padding: 10px;
        background-color: #f8f9fa;
        border: 1px solid #ced4da;
        border-radius: 5px;
        z-index: 0.3333;
		font-size:50%;
      }

      .hoverable:hover .pop-up-text {
        display: block;
		
      }
	  
.container {
    max-width: 2040px;
    margin: 0;
    padding: 2%;
}

.new-container {
    max-width: 100%;
    margin: auto ;
    padding: 0;
	 font-size: 50%;
}

.new-container h2 {
    font-size: 100%;
}

ul {
    list-style-type: none;
}

li {
    margin-bottom: 10px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  text-align: center;
}	

.card-img,
.card-img-top {
    max-width: 100%;
    width: auto;
    max-height: 181px;	
}

.card-title {
    font-size: auto;
    color: #04B486;
    text-align: center;
}

.card {
    background-color: #565c64;
    color: #fff;
    width: 100%;
    max-width: 100%;
    margin-bottom: 2%;
}

.card-text {
    color: #fff;
}

.title {
    font-size: 64px;
    color: #1f67e4;
    text-align: center;
	padding: 2%;
	padding-top: 5%;
}

.text{
    font-size: auto;
	font-weight: bold;
    color: black;
    text-align: center;
	margin: 1%;
}
 
.split {
    font-size: 200%;
    color: #04B486;
    text-align: center;
	margin-bottom: 4%;
}

.split-nav {
    font-size: 100%;
    text-align: center;
	margin-bottom: 1%;
	margin-top: 1%;
	color: #04B486;
}

.footer{
   bottom: 0;
   margin: 2%;
   margin-top: 4%;
   width: auto;
   grid-row: span 1;
   padding-top: auto;
}

.puls  {
		font-size: 170%;
		color: #04B486;
		text-align: center;
        display: inline-block;
		padding: 1%;
        border: 8px solid black;
        animation: pulse 0.5s infinite;
		margin: 0;
      }

      @keyframes pulse {
        0% {
          border-color: black;
        }
        50% {
          border-color: transparent;
        }
        100% {
          border-color: black;
        }
      }
	  
.img {
         margin: 2%;
		  }
		  
.span{
		color: #6f42c1;
		font-size: 100%;
      }
	  
.sequence {
        list-style-type: none;
		counter-reset: sequence-counter;
        padding: 10px;
		color: #6f42c1;
		padding-top: 1%;
		padding: 5%;
		font-size: 200%;
      }
	  
.sequence li {
  position: relative;
  counter-increment: sequence-counter;
  margin: 20px;
  margin-top: 20px;
  font: 200%;
}

.sequence img {
  margin: 20px;
  margin-top: 20px;
}

.sequence li:before {
  content: counter(sequence-counter)".";
  color: #6f42c1;
  padding: 10px;
  font-weight: bold;
  margin-right: 2%;
  position: absolute;
  left: -1.33333em;
  top: -0.333333em;
}

.sequence li span {
  display: inline-block;
  vertical-align: middle;
}

.info {
        padding: 10px;
		color: #6f42c1;
		margin-bottom: 50px;
		font-size: 70%;
}

.dropdown-menu {
    background-color: #04B486;
	}
	
.customized {
    background-color: #f4f4f4!important;
}

.custom-box {
    height: auto;
	width: 100%;
}
.box-link1, .box-link2 {
    height: 100%;
    padding: 15px;
    text-decoration: none;
    display: block;
    text-align: center;
    border-radius: 4.5%;
    margin-bottom: 5%;
	margin-top: 3%;
    width: 100%;
}

.box-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 352px;
    width: 100%;
}

.logo {
    margin: 0 auto;
	max-height: 350px;
	height: auto;
	width: auto;
	vertical-align: bottom;
}

.box-link1 {
    background: linear-gradient(to right, #4285F4, #4285F4, #0F9D58, #F4B400, #DB4437); 
    color: #fff;
}

.box-link2 {
    background: linear-gradient(to right, #0070c9, #0047A0, #3498db, #55ACEE);
    color: #fff;
}

@media (min-width: 151px) {
    .box-link1, .box-link2 {
        width: 48%;
        float: left;
        margin-right: 2%;
    }
}
    </style>