@font-face { font-family: permanent_markerregular; src: url('/fonts/marker/PermanentMarker-webfont.woff'); }

.wirecuttergame {
  width: 100vw;
  height: 100vh;
  background-image: url('../img/backdrops/bar2.jpg');
  background-size: cover;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.pname {
  color: white;
  font-size: 3rem;
  font-family: 'Rowdies', sans-serif;
  margin-top: 100%;
}

.wirecuttergame .gametitle {
  position: absolute;
  top: 0;
}

.wirecuttergame-inner-wrapper {
  max-width: 1480px;
  width: 80%;
  height: 80%;
  max-height: 800px;
  margin-top: 8rem;
  background-color: #310e68;
  background-image: linear-gradient(316deg, #310e68 0%, #5f0f40 74%);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
	box-shadow: 10px 10px 48px -13px rgba(0,0,0,0.75);
}

.wirecutterbox {
  width: 60%;
  height: 95%;
  background-color: #000000;
  position: relative;
  display: flex;
  align-items: center;
  overflow-y: hidden;
  justify-content: center;
  flex-direction: column;
  background-image: url('img/metaltexture.jpg');
  background-size: cover;
  border-radius: 5px;
  -moz-box-shadow:    inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow:         inset 0 0 10px #000000;
  margin-left: 30px;
  margin-right: 30px;
}

.displayrow {
  height: 30%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.displayrow-display {
  height: 80px;
  width: 250px;
  background: linear-gradient(to bottom right, #0a0a0a 0%, #171717 100%);
  border: 5px solid siLver;
  border-radius: 5px;
  margin-right: 20px;
  -moz-box-shadow:    inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow:         inset 0 0 10px #000000;
}

.displayrow-display-inner {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.displayrow-display-inner h2 {
  font-size: 50px;
  font-weight: lighter;
  color:#4cd137;
  font-family: 'Wallpoet', cursive;
}

.wirecutterbox-inner {
  height: 40%;
  width: 95%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background-color: #000000;
  background-image: linear-gradient(150deg, #000000 0%, #434343 74%);
  -moz-box-shadow:    inset 0 0 20px #000000;
  -webkit-box-shadow: inset 0 0 20px #000000;
  box-shadow:         inset 0 0 20px #000000;
}

.buttonrow {
  height: 30%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.buttonrow .buttons {
  list-style: none;
  text-align: center;
}

.buttonrow .buttons button  {
  height: 110px;
  width: 110px;
  border-radius: 110px;
  margin-left: 20px;
  margin-right: 20px;
  font-family: 'Black Ops One', cursive;
  font-size: 19px;
  position: relative;
  z-index: 2;
  -webkit-box-shadow:  2px 3px 10px 3px #464646;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
   -moz-box-shadow:    2px 3px 10px 3px #464646;  /* Firefox 3.5 - 3.6 */
   box-shadow:        2px 3px 10px 3px #464646;
}

.buttonrow .buttons button:focus{
  outline:0;
}

.buttonrow .buttons button::after {
  content: " ";
  display: inline-block;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  background-color: #2a2a72;
  background-image: linear-gradient(147deg, #2a2a72 0%, #009ffd 74%);
  position: absolute;
  border-radius: 100px;
  z-index: -1;
}

#buttonyellow {
  background-color: #baba00;
  background-image: linear-gradient(-33deg, #baba00 0%, #735102 74%);
  border: 5px solid #c99502;
  color: white;
}

#buttonyellow::after {
  background-color: #fbb034;
  background-image: linear-gradient(147deg, #fbb034 0%, #ffdd00 74%);
  border: 5px solid #c99502;
}

#buttonred {
  background-color: #3f0d12;
  background-image: linear-gradient(147deg, #3f0d12 0%, #a71d31 74%);
  border: 5px solid #8f1d03;
  color: white;
}

#buttonred::after {
  background-color: #990000;
  background-image: linear-gradient(147deg, #990000 0%, #ff0000 74%);
  border: 5px solid #990000;
}

#buttongreen {
  background-color: #63d471;
  background-image: linear-gradient(-33deg, #63d471 0%, #233329 74%);
  border: 5px solid  #378b29 ;
  color: white;
}

#buttongreen::after {
  background-color: #378b29;
  background-image: linear-gradient(148deg, #378b29 0%, #74d680 74%);
  border: 5px solid #378b29 ;
}

#buttonblue {
  background-color: #000000;
  background-image: linear-gradient(147deg, #000000 0%, #04619f 74%);
  border: 5px solid #04619f;
  color: white;
}

#buttonblue::after {
  background-color: #182b3a;
  background-image: linear-gradient(148deg, #182b3a 0%, #20a4f3 74%);
  border: 5px solid #166295;
}

/*wirestuff*/

.wirecutterbox-inner .wire {
  height: 99% !important;
  width: 12px;
  background: linear-gradient(90deg, rgba(121,0,116,1) 0%, rgba(215,64,64,1) 17%, rgba(255,96,53,1) 44%, rgba(208,64,76,1) 69%, rgba(133,0,101,1) 100%);
  min-height: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  min-width: 0px;
  margin-left: 140px;
  position: relative;
}

.wirecutterbox-inner .wire .wiretopper {
  height: 28px;
  width: 18px;
  background: rgb(28,28,28);
  background: linear-gradient(90deg, rgba(0,0,0,1) 5%, rgba(79,79,79,1) 50%, rgba(0,0,0,1) 95%);
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -3px;
  border-radius: 0px 0px 3px 3px;
}


.wirecutterbox-inner .wire .wirebottommer {
  height: 28px;
  width: 18px;
  background: rgb(28,28,28);
  background: linear-gradient(90deg, rgba(0,0,0,1) 5%, rgba(79,79,79,1) 50%, rgba(0,0,0,1) 95%);
  position: absolute;
  bottom: 0;
  left: 0;
  margin-left: -3px;
  border-radius: 3px 3px 0px 0px;
}


.wirecutterbox-inner .wire:first-child {
    margin-left: 0px;
}

#wire1 {
  background:  linear-gradient(90deg, rgba(103,13,13,1) 0%, rgba(215,160,64,1) 17%, rgba(255,250,80,1) 44%, rgba(208,146,64,1) 69%, rgba(78,20,20,1) 100%);
}

#wire2 {
  background: linear-gradient(90deg, rgba(121,0,116,1) 0%, rgba(215,64,64,1) 17%, rgba(255,96,53,1) 44%, rgba(208,64,76,1) 69%, rgba(133,0,101,1) 100%);
}

#wire3 {
  background: linear-gradient(90deg, rgba(13,95,103,1) 0%, rgba(0,150,86,1) 17%, rgba(0,255,38,1) 44%, rgba(0,152,99,1) 69%, rgba(20,78,76,1) 100%);
}

#wire4 {
  background: linear-gradient(90deg, rgba(13,35,103,1) 0%, rgba(64,110,215,1) 17%, rgba(80,157,255,1) 44%, rgba(64,93,208,1) 69%, rgba(20,34,78,1) 100%);
}

.wirecutterglass:before, .wirecutterglass:after {
  content:"";
  position:absolute;
  z-index:-1;
  -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
  -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
  box-shadow:0 0 20px rgba(0,0,0,0.8);
  top:0;
  bottom:0;
  left:0px;
  right:00px;
}

.squeezy {
  margin-top: 15px;
  width: 180px;
  height: 180px;
  border-radius: 180px;
  margin-bottom: 15px;
  margin-left: 60px;
  background-position: center;
  background-size: cover;
}

.wirecutterglass:after
{
  right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
}

/*led*/

.led-red {
  width: 24px;
  height: 24px;
  position: relative;
  background-color: #F00;
  border-radius: 50%;
  margin-left: 15px;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
  -webkit-animation: blinkRed 0.5s infinite;
  -moz-animation: blinkRed 0.5s infinite;
  -ms-animation: blinkRed 0.5s infinite;
  -o-animation: blinkRed 0.5s infinite;
  animation: blinkRed 0.5s infinite;
}

@-webkit-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
@-moz-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
@-ms-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
@-o-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
@keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}

@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
  }
}

.wirecutterbox-rollershutter {
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 999;
  border-radius: 5px;
  overflow-y: hidden;
  background: black;
  background-size: 100%;
  background-blend-mode: soft-light;
  -moz-box-shadow:    inset 0 0 10px #000000;
  -webkit-box-shadow: inset 0 0 10px #000000;
  box-shadow:         inset 0 0 10px #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-content ul {
  color: #f39c12;
  list-style: upper-roman;
  font-family: 'permanent_markerregular', sans-serif;
  text-align: center;
}

.slider-content h2 {
  text-align: center;
  font-size: 50px;
  color: #e74c3c;
  list-style: upper-roman;
  font-family: 'permanent_markerregular', sans-serif;
  margin-top: 10px;
  margin-bottom: 10px;
}

.slider-content ul li {
  line-height: 100px;
  font-size: 4rem;
}

.open {
  -webkit-animation: slide-top 2.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-top 2.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}