.hidden {
  display: none !important;
}

.transparent {
  opacity: 0.2;
}

.placehold {
  background-color: rgba(180, 180, 180, 0.72);
}

a, a:visited, a:hover, a:active {
  color: inherit;
  text-decoration: none !important;
}

/* @media (min-width: 450px) {
} */
#info {
  margin-top: 40vh;
}

#name {
  font-size: 5.5vw;
  font-family: "Roboto",sans-serif;
  font-weight: 100;
  color: #585858;
  white-space: nowrap;
}

.links {
  text-align: right;
}

#link {
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  border-right: 1px solid #ECECEC;
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  color: #757575;
  letter-spacing: 1px;
  font-weight: 100;
}

#link:last-of-type {
  padding-right: 0px;
  border-right: 0px;
}


span.focus {
  filter: blur(7px);
  -webkit-filter: blur(7px);
}

span.hello {
  font-size: 6vmax !important;
}

span.intro {
  font-size: 51px;
  color: #323232;
  font-family: "Roboto",sans-serif;
  font-weight: 100;
  -moz-osx-font-smoothing: grayscale;
  transition: 1s all ease;
}
span.bold {
  font-weight: 300;
  filter: blur(0px);
  -webkit-filter: blur(0px);
}

.intro-text{
  transition: 1s all ease;
}

.intro-container {
  margin-top: 42vh;
}

.page {
  z-index: 1;
}

.loading {
  border-radius: 50%;
  position: relative;
  width: 1.5vmax;
  height: 1.5vmax;
  background-color: rgb(177, 177, 177);
  margin-left: auto;
  margin-right: auto;
  margin-top: 45vh;
  animation: load-in 1s ease 5;
  -webkit-animation: load-in 1s ease 5;
  -moz-animation:  load-in 1s ease 5;
}

@-webkit-keyframes load-in {
  50%{
    filter: blur(20px);
    -webkit-filter: blur(20px);
  }
}
@-moz-keyframes load-in {
  50%{
    filter: blur(20px);
    -webkit-filter: blur(20px);
  }
}
@keyframes load-in {
  50%{
    filter: blur(20px);
    -webkit-filter: blur(20px);
  }
}


.bg-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position:fixed;
  top:0;
  left:0;
  transition: 1s all ease;
}

.hello-message {
  position: absolute;
  font-family: "Roboto",sans-serif;
  font-size: 5vmax;
  font-weight: 100;
  color: rgb(88, 88, 88);
  right: 34%;
  top: 40%;
  transition: .8s all ease;
}

.speck{
  border-radius: 50%;
  position: absolute;
  transition: .4s all ease;
}

.special-speck{
  border-radius: 50%;
  position: absolute;;
  background: url('imgs/hello-001.gif') center center no-repeat;
  background-size: cover;
}

.special-speck-2{
  border-radius: 50%;
  position: absolute;;
  background: url('imgs/me.jpg') center center no-repeat;
  background-size: cover;
}


#spot1 {
  background-size: cover;
}


.size-1 {
  width: 3vmax;
  height: 3vmax;
  background-color: rgb(238, 238, 238);
  filter: blur(9px);
  -webkit-filter: blur(9px);
}
.size-2 {
  width: 8vmax;
  height: 8vmax;
  filter: blur(12px);
  -webkit-filter: blur(12px);
  background-color: rgb(236, 236, 236);

}
.size-3 {
  width: 15vmax;
  height: 15vmax;
  filter: blur(14px);
  -webkit-filter: blur(14px);
  background-color: rgb(223, 223, 223);
}
.size-3-hello {
  width: 15vmax;
  height: 15vmax;
  background-color: rgb(218, 218, 218);
}
.size-4 {
  width: 18vmax;
  height: 18vmax;
  filter: blur(22px);
  -webkit-filter: blur(22px);
  background-color: rgb(199, 199, 199);
}
.size-5 {
  width: 27vmax;
  height: 27vmax;
  filter: blur(35px);
  -webkit-filter: blur(35px);
  background-color: rgb(180, 180, 180);

}

#iam1{
  opacity: 1;
}
#iam2{
  opacity: 0;
}
#iam3{
  opacity: 0;
}
#face{
  opacity: 0;
}


.delay-1 {
  animation-delay: .5s !important;
}
.delay-2 {
  animation-delay: .1s !important;
}
.delay-3 {
  animation-delay: 1.4s !important;
}
.delay-4 {
  animation-delay: 1.8s !important;
}



.in-focus {
  filter: blur(0px) !important;
  -webkit-filter: blur(0px) !important;
  opacity: 1;
}

.add-blur {
  filter: blur(8px);
  -webkit-filter: blur(8px);
}
.add-blur-slight {
  filter: blur(4px);
  -webkit-filter: blur(4px);
}


.highBlur {
  opacity: 0.5 !important;
  filter: blur(20px) !important;
  -webkit-filter: blur(20px) !important;
}




video.addImg {
  display: block;
  height: 100%;
  width: auto;
  margin-left: -31%;
}

img.addImg {
  width: 100%;
  transition: 1s all ease;
  -moz-transition: 1s all ease;
}

.imgtest {
  animation: bgIn 1.5s ease 1;
  -moz-animation: bgIn 1.5s ease 1;
}
@-moz-keyframes bgIn { from { opacity:0; } to { opacity:1; } }
@keyframes bgIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}





.floating {
  animation: float 8s ease infinite;
}

@keyframes float {
  50% {
     transform: translate(0, 35px);
  }
}


.blurOut {
  animation: blur-in 3s ease-out 1;
  -webkit-animation: blur-in 3s ease-out 1;
  -moz-animation:  blur-in 3s ease-out 1;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
}



.blurIn-low {
  animation: blur-in-low 3.5s ease 1;
  -webkit-animation: blur-in-low 3.5s ease 1;
  -moz-animation:  blur-in-low 3.5s ease 1;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}

@keyframes blur-in-low {
  0% {
     filter: blur(25px);
     -webkit-filter: blur(25px);
     opacity: 0.6;
  }
  100% {
    filter: blur(0px);
    -webkit-filter: blur(0px);
    opacity: 1;
  }
}


.blurIn {
  animation: blur-in 3.5s ease 1 !important;
  -webkit-animation: blur-in 3.5s ease 1 !important;
  -moz-animation:  blur-in 3.5s ease 1 !important;
}

@keyframes blur-in {
  0% {
     transform: scale(9, 9);
     -webkit-transform: scale(9, 9);
     filter: blur(30px);
     -webkit-filter: blur(30px);
     -moz-filter   : blur(30px);
     opacity: 0;
  }
  /*70%, 80% {
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    filter: blur(0px);
    -webkit-filter: blur(0px);
    -moz-filter   : blur(0px);
    opacity: 0.8;
  }
  87% {
    transform: scale(0.9, 0.9);
    -webkit-transform: scale(0.9, 0.9);
    filter: blur(15px);
    -webkit-filter: blur(15px);
    -moz-filter   : blur(15px);
  }
  90% {
    filter: blur(0px);
    -webkit-filter: blur(0px);
    -moz-filter   : blur(0px);
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    opacity: 0.9;
  }
  95% {
    transform: scale(1.5, 1.5);
    -webkit-transform: scale(1.5, 1.5);
    filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter   : blur(10px);
    opacity: 0.8;
  }*/
  100% {
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    filter: blur(0px);
    -webkit-filter: blur(0px);
    -moz-filter   : blur(0px);
    opacity: 1;
  }

}




.blurOutSubtle {
  animation: blur-out-subtle 1.2s ease-out 1;
  -webkit-animation: blur-out-subtle 1.2s ease-out 1;
  -moz-animation:  blur-out-subtle 1.2s ease-out 1;
}

.blurInSubtle {
  animation: blur-out-subtle 1s ease 1;
  -webkit-animation: blur-out-subtle 1s ease 1;
  -moz-animation:  blur-out-subtle 1s ease 1;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}
.blurInFast {
  animation: blur-out-subtle .4s ease 1;
  -webkit-animation: blur-out-subtle .4s ease 1;
  -moz-animation:  blur-out-subtle .4s ease 1;
  -webkit-animation-direction: reverse;
  animation-direction: reverse;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}


@keyframes blur-out-subtle {
  0% {
    filter: blur(0px);
    -webkit-filter: blur(0px);
    -moz-filter   : blur(0px);
    opacity: 1;
  }
  100% {
     filter: blur(30px);
     -webkit-filter: blur(30px);
     -moz-filter   : blur(30px);
     opacity: 0;
  }

}



.fade-out {
  -webkit-animation:fadeOut 1s ease-out 1,float 8s ease infinite;
  -moz-animation:fadeOut 1s ease-out 1, float 8s ease infinite;
  animation: fadeOut 1s ease-out 1, float 8s ease infinite;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}

@-webkit-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }




@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
	opacity:0;
	-webkit-animation:fadeIn 1.5s ease-in 1, float 8s ease infinite;
	-moz-animation:fadeIn 1.5s ease-in 1, float 8s ease infinite;
	animation: fadeIn 1.5s ease-in 1, float 8s ease infinite;

	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

}

.fade-in.fast {
  opacity:0;
  -webkit-animation:fadeIn .5s ease-in 1;
  -moz-animation:fadeIn .5s ease-in 1;
  animation: fadeIn .5s ease-in 1;
  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}


.fade-in-long {
	opacity:0;
  -webkit-animation:fadeIn 1s ease-in 1, float 8s ease infinite;
	-moz-animation:fadeIn 1s ease-in 1, float 8s ease infinite;
	animation: fadeIn 1s ease-in 1, float 8s ease infinite;

	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

}

.fade-in.zero {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
animation-delay: 0.s;
}

.fade-in.one {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}

.fade-in.two {
-webkit-animation-delay: 0.9s;
-moz-animation-delay:0.9s;
animation-delay: 0.9s;
}

.fade-in.three {
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
animation-delay: 1.2s;
}