﻿.the-div-text {
  color:#555; color: #FFFFFF;
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  font-weight:300;
  	font-size: clamp( 1rem, 1vw, 2.4vh); 
  7878background:linear-gradient(141deg, #ccc 25%, #eee 40%, #ddd 55%);    background: #17151d;
}

.the-div-text:first-of-type {    /* For increasing performance 
                       ID/Class should've been used. 
                       For a small demo 
                       it's okaish for now */
  animation: showup 7s infinite;
}

.the-div-text:last-of-type {
  width:0px;
  animation: reveal 7s infinite;
}

.the-div-text:last-of-type span {
  margin-left:-355px;  
  animation: slidein 7s infinite;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width: auto;}
    80% {opacity:1;}
    100% {opacity:0; width: auto;}
}









/**WELCOME NOTE STATUS**/
#welcome-note-status {
	background-color:transparent !important;
	}

#apps-card-framing { 
	width: 100% !important;
	box-sizing: border-box;  
	clear: both;     
	}

.channels-at-NSIM {
	padding: 0; 
	}

#welcome-to-my-site {
	width: 100%; 
    	display: flex;
    	flex-direction: row;
    	flex-wrap: wrap;
    	justify-content: center;
    	align-items: center;   
	}

#channel-intro-video {
	box-sizing: border-box;  
	clear: both;     
	}

#remove-border-radius {
	border-radius: 0 !important;
	cursor: default !important;
	}

#zero-padding {
	padding: 0 !important;
	}

.channel-video-introduction {
	width: 100% ; 
	height: 100%; 
	margin: 0;  
	padding: 0;
	}

#anchor-color-picker {
	color: #FFFFFF;
	text-decoration: none;
	}