/* mask */
.masking {
  margin: 0 auto;
  display: block;
  width: 100%;
  /*max-height: 400px;*/
  -webkit-mask-image: url(../img/slogan_w.png); 
  mask-image: url(../img/slogan_w.png); 
  -webkit-mask-position: top center;
  mask-position: top center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  mask-size: 100%;
 
 /*
  -webkit-mask-image: -webkit-gradient(linear, left top, right bottom, 
					color-stop(0.00,  rgba(0,0,0,1)),
					color-stop(0.45,  rgba(0,0,0,1)),
					color-stop(0.50,  rgba(0,0,0,0)),
					color-stop(0.55,  rgba(0,0,0,0)),
					color-stop(1.00,  rgba(0,0,0,0)))
 */
 /*
  -webkit-animation:spin 4s linear infinite;
  -moz-animation:spin 4s linear infinite;
  animation:spin 4s linear infinite;
  */
}
.maskin {
	
}

/* typing effect */
@-webkit-keyframes typing { from { width: 0; } }
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }

.type { 
    font: bold 300% Consolas, Monaco, monospace;
    border-right: .1em solid black;
    width: 16.5em; 
    width: 21ch;
    margin: 2em 1em;
    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: typing 2s steps(21, end),
               blink-caret .5s step-end infinite alternate;
}

/* hover rainbow effect */
/*onmouseover="this.src='services/d2.png'" onmouseout="this.src='services/d1.png'"*/
.rainbow 			{ margin: -50% 0 0 -5%; padding-top:0%; width:50%!important; opacity: 0; z-index:1000; position:relative; transition: opacity 1s ease-in-out!important; }
.links 				{ -webkit-filter: grayscale(100%); filter: grayscale(100%); -moz-filter: grayscale(100%); transition: all 2s  ease-in-out;}
.links:hover 		{ -webkit-filter: grayscale(0%); filter: grayscale(0%); -moz-filter: grayscale(0%);}
.links:hover .rainbow{ display:inline; opacity: 1; }

/* rotate */
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }