﻿body{
  background: #EEE;
  text-align: center;
  
  /*overflow: hidden;*/
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  cursor: default;
}

body:after{
  content: "";
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCI+PHJlY3QgeD0iMjMuODQ2IiB5PSIwLjMzMSIgdHJhbnNmb3JtPSJtYXRyaXgoMC43MDczIC0wLjcwNjkgMC43MDY5IDAuNzA3MyAtMTAuNDM3MiAyNC45ODY3KSIgd2lkdGg9IjIuMjIxIiBoZWlnaHQ9IjQ5LjUzMiIvPjxyZWN0IHg9IjIzLjg0NSIgeT0iMC4zMzIiIHRyYW5zZm9ybT0ibWF0cml4KDAuNzA2OSAwLjcwNzMgLTAuNzA3MyAwLjcwNjkgMjUuMDY3NSAtMTAuMjk1MykiIHdpZHRoPSIyLjIyMSIgaGVpZ2h0PSI0OS41MzIiLz48L3N2Zz4=);
  opacity: 0.020;
  
 
  
  top:0; left:0; bottom:0; right:0;
  position: absolute;
  z-index: -1;
}

/*@keyframes move {
  to{
    left: 0px;
    top: 0px;
  }
}*/

#container{
 top:50%;left:45%;
  margin-top: -200px; /*-1/2 of height*/
  margin-left: -125px; /*-1/2 of width*/
  position: fixed;
}

#avatar{
  border: white solid 7px;
  box-shadow: 0px 1px 0px rgba(0,0,0,0.25);
  /*box-shadow: 0px 2px 3px rgba(0,0,0,0.25);*/
  /*transition: all 0.5s cubic-bezier(0.19,1.0,0.22,1.0);*/
  border-radius: 50%;
  animation: bounce cubic-bezier(0.19,1.0,0.22,1.0) 1.5s alternate infinite;
  -webkit-animation: bounce cubic-bezier(0.19,1.0,0.22,1.0) 1.5s alternate infinite;
  /*maxthon duplicate*/
    background: #2fa2bd;
    background: -webkit-linear-gradient(top, #2fa2bd 0%,#42b8d4 47%,#64cfe8 100%);  
   overflow: hidden;
width: 400px;
}

@keyframes bounce {
	to{
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0px 5px 10px rgba(0,0,0,0.15);
  }
}
@-webkit-keyframes bounce { /*maxthon duplicate*/
	to{
    -webkit-transform: translateY(-12px) scale(1.03);
    box-shadow: 0px 5px 10px rgba(0,0,0,0.15);
  }
}

/*#avatar:hover{
  transform: translateY(-7px) scale(1.05);
  -webkit-transform: translateY(-7px) scale(1.05); /*maxthon
  box-shadow: 0px 5px 10px rgba(0,0,0,0.15);
}*/

#text{
  margin-top: 7px;
}

h1, p{
  margin: 0;
  padding: 0;
  
  font-family: Segoe UI, sans-serif;
  font-weight: 100;
  font-style: normal;
  color: rgba(0,0,0,1);
}

h1{
  color: rgba(1,106,154,0.75); /*#016A9A;*/
  text-shadow: 0px 1px 0px rgba(255,255,255,1.0);
}

p{
  color: rgba(0,0,0,0.25);
  text-shadow: 0px 1px 0px rgba(255,255,255,0.75);
}
 h3{color: white;font-size: 49px;margin-top: 46%;margin-bottom: 27%;}

@media only screen and (max-width: 600px) {
 #avatar{
width: 300px !important;
}
 h3{
color: white;font-size: 42px;margin-top: 44%;margin-bottom: 23%;
}

#container{
 left:41% !important;
}

}