* {	
   box-sizing: border-box;	
}	

::-webkit-input-placeholder { 	
    color: #d1d1d1 !important; 	
}	

::-moz-placeholder { 	
    color: #d1d1d1 !important;	
}	

::-moz-selection {	
    color: #fff !important;	
    background-color: #a06ee1 !important;	
}	

::selection {	
    color: #fff !important;	
    background-color: #a06ee1 !important;	
}	

body {
    overflow: hidden;
}

#navbar {	
    //width: 100%;	
    display: flex; 	
    justify-content: center;	
    height: 76px;	
    background-color: #fff;	
    //position: fixed;	
    //top: 0;	
    /left: 0;	
    //right: 0;	
    //z-index: 1000;	
}	

#nav {		
    overflow: hidden;	
}	

#nav ul {	
    margin: 0;	
    padding: 0;	
    overflow: hidden;	
    float: left;	
}	

#nav ul li {	
    list-style-type: none;	
    margin-left: 8px;	
    float: left;	
}	

#nav a {	
    display: block;	
    font-family: "OpenSans-Semibold", sans-serif;	
    font-weight: normal;	
    font-size: 0.8em;	
    color: #969696;	
    border: 2px solid #969696;	
    border-radius: 8px;	
    text-decoration: none;	
    padding: 8px 2px;	
    margin-top: 18px;	
}	

#nav a:hover, #nav .active {	
    color: #a06ee1;	
    border-color: #a06ee1;	
    text-decoration: none;	
}	

#nav .active {	
    color: #fff;	
    background-color: #a06ee1;	
}	

#nav .active:hover {	
    color: #fff;	
}	

#skin-url {	
    width: 500px;	
    height: 42px;	
    color: #d1d1d1;	
    font-family: "OpenSans-Semibold", sans-serif;	
    font-size: 1em;	
    border-radius: 8px;	
    border: 2px solid #d1d1d1;	
    margin-top: 18px;	
    padding: 10px;	
}	

#hizliresim {	
    display: none;	
}	

.skins-wrapper {	
    overflow: hidden;	
    padding: 10px;	
    //margin-top: 40px;	
}	

.skin-box {	
    width: 140px;	
    height: 140px;	
    cursor: pointer;	
    float: left;	
}	

.skin-box img {	
    width: 100px;	
    height: 100px;	
    border: none;	
    border-radius: 50%;	
    margin: 20px;	
    transition: all linear 0.2s;	
}	

.skin-box:hover img {	
    width: 140px;	
    height: 140px;	
    border: none;	
    border-radius: 50%;	
    margin: 0;	

}	

#jim {	
  height: 100%;	
  margin: 0;	
  background-color: #e12835;	
  background-image: radial-gradient(#e12835 20%, #be2633 50%, rgba(0, 0, 0, 0.5) 100%);	
  background-size: 120%;	
  background-position: center;	
  font-family: "Barlow Condensed", sans-serif;	
  -webkit-animation: tighten-vinette ease-out 1800ms forwards;	
          animation: tighten-vinette ease-out 1800ms forwards;	
}	

.images {	
  pointer-events: none;	
  height: 100vh;	
  top: 0;	
  bottom: 0;	
  right: 0;	
  left: 0;	
  position: absolute;	
  opacity: .6;	
  z-index: 20;	
  background-size: cover;	
  background-position: center;	
  background-repeat: none;	
  background-image: url("https://raw.githubusercontent.com/jimboy3100/jimboy3100.github.io/master/banners/iconLc1.jpg");	
}	

.wrapper {	
  height: 100vh;	
  display: flex;	
  align-items: center;	
  justify-content: center;	
}	

.logo {	
  cursor: pointer;	
  text-align: center;	
}	
.logo:hover .restart {	
  opacity: .8;	
}	

.restart {	
  color: #fff;	
  margin-top: 20px;	
  font-size: 1.5rem;	
  text-transform: uppercase;	
  letter-spacing: -.08rem;	
  transition: opacity 150ms linear;	
}	

.marvel, .studios {	
  position: relative;	
  color: #fff;	
  text-transform: uppercase;	
  letter-spacing: -.2rem;	
  font-size: 5rem;	
  margin: .05rem .05rem .5rem;	
  padding: 0 0.4rem;	
  display: inline-block;	
}	

.studios {	
  font-weight: 500;	
  letter-spacing: -.3rem;	
  -webkit-transform: translateX(-95px);	
          transform: translateX(-95px);	
}	

.marvel {	
  z-index: 10;	
  font-weight: 800;	
  -webkit-transform: translateX(95px);	
          transform: translateX(95px);	
}	
.marvel:before {	
  z-index: -10;	
  content: '';	
  display: block;	
  background-color: #e12835;	
  border: solid rgba(255, 255, 255, 0.2) 1px;	
  height: 100%;	
  width: 100%;	
  position: absolute;	
  top: 0;	
  left: 0;	
}	

.studios:after, .studios:before {	
  content: '';	
  display: block;	
  height: 3px;	
  position: absolute;	
  background-color: #fff;	
  display: block;	
  left: 0.4rem;	
  right: 0.4rem;	
}	

.studios:before {	
  top: 0;	
}	
.studios:after {	
  bottom: 0;	
}	

.wrapper.run-animation {	
  -webkit-animation: shrink ease-out 4800ms forwards 600ms;	
          animation: shrink ease-out 4800ms forwards 600ms;	
}	
.wrapper.run-animation .marvel {	
  -webkit-transform: translateX(95px);	
          transform: translateX(95px);	
  -webkit-animation: slide-out-X 750ms ease forwards;	
          animation: slide-out-X 750ms ease forwards;	
}	
.wrapper.run-animation .studios {	
  -webkit-transform: translateX(-95px);	
          transform: translateX(-95px);	
  color: transparent;	
  -webkit-animation: slide-out-X 750ms ease forwards, show-text 300ms linear forwards 1500ms;	
          animation: slide-out-X 750ms ease forwards, show-text 300ms linear forwards 1500ms;	
}	
.wrapper.run-animation .studios:before {	
  -webkit-transform: translateY(2.9rem);	
          transform: translateY(2.9rem);	
  -webkit-animation: slide-out-Y 300ms ease forwards 750ms;	
          animation: slide-out-Y 300ms ease forwards 750ms;	
}	
.wrapper.run-animation .studios:after {	
  -webkit-transform: translateY(-2.9rem);	
          transform: translateY(-2.9rem);	
  -webkit-animation: slide-out-Y 300ms ease forwards 750ms;	
          animation: slide-out-Y 300ms ease forwards 750ms;	
}	
.wrapper.run-animation .restart {	
  opacity: 0;	
  -webkit-animation: fade-down 1200ms ease 3600ms forwards;	
          animation: fade-down 1200ms ease 3600ms forwards;	
}	
.wrapper.run-animation ~ .images {	
  -webkit-animation: flicker-images 1500ms 2 steps(1, end), fade-out 4500ms forwards;	
          animation: flicker-images 1500ms 2 steps(1, end), fade-out 4500ms forwards;	
}	

@-webkit-keyframes slide-out-X {	
  100% {	
    -webkit-transform: translateX(0);	
            transform: translateX(0);	
  }	
}	

@keyframes slide-out-X {	
  100% {	
    -webkit-transform: translateX(0);	
            transform: translateX(0);	
  }	
}	
@-webkit-keyframes slide-out-Y {	
  100% {	
    -webkit-transform: translateY(0);	
            transform: translateY(0);	
  }	
}	
@keyframes slide-out-Y {	
  100% {	
    -webkit-transform: translateY(0);	
            transform: translateY(0);	
  }	
}	
@-webkit-keyframes show-text {	
  100% {	
    color: #fff;	
  }	
}	
@keyframes show-text {	
  100% {	
    color: #fff;	
  }	
}	
@-webkit-keyframes shrink {	
  100% {	
    -webkit-transform: scale(0.8);	
            transform: scale(0.8);	
  }	
}	
@keyframes shrink {	
  100% {	
    -webkit-transform: scale(0.8);	
            transform: scale(0.8);	
  }	
}	
@-webkit-keyframes tighten-vinette {	
  100% {	
    background-size: 120%;	
  }	
}	
@keyframes tighten-vinette {	
  100% {	
    background-size: 120%;	
  }	
}	
@-webkit-keyframes fade-down {	
  0% {	
    -webkit-transform: translateY(-2rem);	
            transform: translateY(-2rem);	
    opacity: 0;	
  }	
  100% {	
    -webkit-transform: translateY(0);	
            transform: translateY(0);	
    opacity: .5;	
  }	
}	
@keyframes fade-down {	
  0% {	
    -webkit-transform: translateY(-2rem);	
            transform: translateY(-2rem);	
    opacity: 0;	
  }	
  100% {	
    -webkit-transform: translateY(0);	
            transform: translateY(0);	
    opacity: .5;	
  }	
}	
@-webkit-keyframes fade-out {	
  100% {	
    opacity: 0;	
  }	
}	
@keyframes fade-out {	
  100% {	
    opacity: 0;	
  }	
}	
@-webkit-keyframes flicker-images {	
  0% {	
    background-image: url("https://jimboy3100.github.io/banners/Lcclan5.gif");	
  }	
  10% {	
    background-image: url("https://jimboy3100.github.io/banners/Lcclan6.png");	
  }	
  20% {	
    background-image: url("https://jimboy3100.github.io/banners/Lcclan7.png");	
  }	
  30% {	
    background-image: url("https://jimboy3100.github.io/banners/Lcclan8.png");	
  }	
  40% {	
    background-image: url("https://coubsecure-s.akamaihd.net/get/b13/p/coub/simple/cw_timeline_pic/f3255e88d15/1315cc69ae28903792b46/big_1449287538_image.jpg");	
  }	
  50% {	
    background-image: url("https://i.ytimg.com/vi/73zLHCcawbQ/maxresdefault.jpg");	
  }	
  60% {	
    background-image: url("https://jimboy3100.github.io/banners/Lcclan9.jpg");	
  }	
  70% {	
    background-image: url("https://jimboy3100.github.io/banners/Lcclan12.jpg");	
  }	
  80% {	
    background-image: url("https://jimboy3100.github.io/banners/Lcclan20.png");	
  }	
  90% {	
    background-image: url("https://jimboy3100.github.io/banners/Lcclan13.jpg");	
  }	
  100% {	
    background-image: url("https://jimboy3100.github.io/banners/iconLc3.png");	
  }	
}	
@keyframes flicker-images {	
  0% {	
    background-image: url("https://jimboy3100.github.io/banners/Lcclan5.gif");	
  }	
  10% {	
    background-image: url("https://jimboy3100.github.io/banners/Lcclan6.png");	
  }	
  20% {	
    background-image: url("https://jimboy3100.github.io/banners/Lcclan7.png");	
  }	
  30% {	
    background-image: url("https://jimboy3100.github.io/banners/Lcclan8.png");	
  }	
  40% {	
    background-image: url("https://coubsecure-s.akamaihd.net/get/b13/p/coub/simple/cw_timeline_pic/f3255e88d15/1315cc69ae28903792b46/big_1449287538_image.jpg");	
  }	
  50% {	
    background-image: url("https://i.ytimg.com/vi/73zLHCcawbQ/maxresdefault.jpg");	
  }	
  60% {	
    background-image: url("https://jimboy3100.github.io/banners/Lcclan9.jpg");	
  }	
  70% {	
    background-image: url("https://jimboy3100.github.io/banners/Lcclan12.jpg");	
  }	
  80% {	
    background-image: url("https://jimboy3100.github.io/banners/Lcclan20.png");	
  }	
  90% {	
    background-image: url("https://jimboy3100.github.io/banners/Lcclan13.jpg");	
  }	
  100% {	
    background-image: url("https://jimboy3100.github.io/banners/iconLc3.png");	
  }	
}