/* Page Styles
================================ */
html {
    height: 100%;

    overflow-x: hidden;
    -ms-overflow-x: hidden;

  background: #000033; /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(#000033, #000); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(#000033, #000); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(#000033, #000); /* For Firefox 3.6 to 15 */
  background: linear-gradient(#000, #000033); /* Standard syntax */
}


body {

  font-family: 'Roboto', sans-serif;
    height: 100%;
    color: #000033;
  margin: 0;
  background-image:
  radial-gradient(white, rgba(200,255,255,.2) 5px, transparent 40px),
  radial-gradient(white, rgba(255,200,255,.15) 1px, transparent 30px),
  radial-gradient(white, rgba(255,255,200,.1) 2px, transparent 40px),
  radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
  background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;

}

h1 h2 h3 h4 {
  font-size: 2em;
  font-family:'Carter One', cursive;
  text-shadow: 10px 13px 90px #666699;
  color: white;
  text-align: right;
  position: fixed;
  top: 5%;
  right: 10%;

}

/* ------------------SVG---------------- */

svg {
    display: block;
    margin: auto 0;
    width: 100%;
    overflow:hidden;
}


/*--------header animation -------------*/
.containerhead {
    background-color: transparent;
    margin-top: 5rem;
}

.containerhead:hover {

    background: -webkit-radial-gradient(black, transparent); /* For Safari 5.1 to 6.0 */
    background: -o-radial-gradient(black,  transparent); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(black, transparent); /* For Fx 3.6 to 15 */
    background: radial-gradient(black,  transparent); /* Standard syntax (must be last) */
}

.bfg {
    margin: auto;
    position: relative;
    top: 50%;
    width: 90%;
    right: .5em;
    z-index: 2;

}

.bfg-animate {
    animation: recoil .9s ease .8s, shake 1s ease-out 7 1.2s;
    -webkit-animation: recoil .9s ease .8s, shake 1s ease-out 7 1.2s;
    -o-animation: recoil .9s ease .8s, shake 1s ease-out 7 1.2s;
    -moz-animation: recoil .9s ease .8s, shake 1s ease-out 7 1.2s;
}

.laser {
  position: relative;
  top: -20rem;
}

.gun {
  margin-left: 2rem;
}

.plasma{
    background: #FFF;
    position: relative;
    top: -160%;
    border-radius: 50%;
    -moz-border-radius: 50px 50px 50px 50px;
    -webkit-border-radius: 50px 50px 50px 50px;
    opacity: 0.5;
    -webkit-backface-visibility: hidden;
    z-index: 5;
}

.plasma-animate {
  animation: boom .7s;
  -webkit-animation: boom .7s;
  -moz-animation: boom .7s;
  -o-animation: boom .7s;
}

.target {
  position: absolute;
  top: 2rem;
  right: 0;
  height: 55rem;
  width: 75rem;
  background: transparent;
  -webkit-backface-visibility: hidden;
}

.contain-zap .zap{
  position: relative;
  margin: 0 auto;
  width: 75rem;
  height: 55rem;
}

.cover {
  position: absolute;
  color: rgba(111,152,181,.6);
  font-family: 'Carter One', cursive;
  font-size: 5em;
  top: 60%;
  right: 50%;
  visibility: hidden;
  z-index: 8;
}

.cover-animate {
  animation: pop 1.2s linear .7s reverse;
  -webkit-animation: pop 1.2s linear .7s reverse;
  -moz-animation: pop 1.2s linear .7s reverse;
  -o-animation: pop 1.2s linear .7s reverse;
}

.stars {
  position: absolute;
  visibility: hidden;
}

.stars-animate {
  animation: pop 1.7s ease-in-out ;
  -webkit-animation: pop 1.7s ease-in-out ;
  -moz-animation:  pop 1.7s ease-in-out ;
  -o-animation:  pop 1.7s ease-in-out ;
}

.stars:nth-of-type(1) {
    top:10%;
    left: 30%;
    animation-delay: .9s;
    -webkit-animation-delay: .9s;
    -moz-animation-delay: .9s;
    filter: blur(13px);
    -webkit-filter: blur(13px);
    -moz-filter: blur(13px);
    -o-filter: blur(13px);
    -ms-filter: blur(13px);
    animation-iteration-count: 3;
    -webkit-animation-iteration-count: 3;
    -moz-animation-iteration-count: 3;
    animation-direction: alternate;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
}

.stars:nth-of-type(2) {
    top: 15%;
    left: 20%;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    filter: blur(15px);
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);
    animation-iteration-count: 2;
    -webkit-animation-iteration-count: 2;
    -moz-animation-iteration-count: 2;
    animation-direction: alternate;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
}

.stars:nth-of-type(3) {
    top: 10%;
    left: 25%;
    animation-delay: 1.3s;
    -webkit-animation-delay: 1.3s;
    -moz-animation-delay: 1.3s;
    filter: blur(15px);
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);
    animation-iteration-count: 2;
    -webkit-animation-iteration-count: 2;
    -moz-animation-iteration-count: 2;
    animation-direction: alternate;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
}

.stars:nth-of-type(4) {
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
    -moz-animation-delay: 1.5s;
    filter: blur(19px);
    -webkit-filter: blur(19px);
    -moz-filter: blur(19px);
    -o-filter: blur(19px);
    -ms-filter: blur(19px);
    top: 20%;
    left: 40%;
}

#smallWing {
  transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  animation: flap1 3s ease-in infinite 2s forwards;
  -webkit-animation: flap1 3s ease-in infinite 2s forwards;
  -moz-animation: flap1 3s ease-in infinite 2s forwards;
  -o-animation: flap1 3s ease-in infinite 2s forwards;

}

#bigWing {
  transform-origin: 100% 50%;
  -webkit-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  animation: flap2 3s ease-out infinite forwards 2s ;
  -webkit-animation: flap2 3s ease-out infinite forwards 2s;
  -moz-animation: flap2 3s ease-out infinite forwards 2s;
  -o-animation: flap2 3s ease-out infinite forwards 2s;
}
/*------------animations/keyframes--------------------*/


@keyframes flap1 {
  0% { transform: skewX(0deg); }
  5% { transform: skew(-30deg, -30deg);  }
  10% { transform: skewX(0deg);  }
  100% { transform: skewX(0deg);  }
}


@-webkit-keyframes flap1 {
  0% { -webkit-transform:  skewX(0deg); }
  5% { -webkit-transform: skew(-30deg, -30deg);}
  10% { -webkit-transform:  skewX(0deg);}
  100% { -webkit-transform: skewX(0deg); }
}

@-moz-keyframes flap1 {
  0% { -moz-transform:  skewX(0deg); }
  5% { -moz-transform: skewX(-20deg) translate(-10px) ;}
  10% { -moz-transform:  skewX(0deg);}
  100% { -moz-transform: skewX(0deg); }
}

@keyframes flap2 {
  0% { transform: skewX(0deg); }
  2% { transform: skew(-10deg, 10deg);  }
  5% { transform: skew(-20deg, -40deg);}
  10% { transform: skewX(0deg);  }
  100% { transform: skewX(0deg);  }
}

@-webkit-keyframes flap2 {
    0% { -webkit-transform:  skewX(0deg); }
    2% { -webkit-transform: skew(-10deg, 10deg);}
    5% { -webkit-transform: skew(-20deg, -20deg);}
    10% { -webkit-transform:  skewX(0deg);}
    100% { -webkit-transform: skewX(0deg); }
}

@-moz-keyframes flap2 {
    0% { transform:  skewX(0deg); }
    2% { transform: skewX(-10deg);}
    5% { transform: skewX(-20deg);}
    10% { transform:  skewX(0deg);}
    100% { transform: skewX(0deg); }
}



@keyframes pop {
  0% {  visibility: visible;
      opacity: 1;
      transform: scale(1.4) skew(-10deg, -20deg) ;  }
  30%{  z-index: 2;
      transform: scale(.8) skew(10deg, 10deg) ;  }
  60% {  opacity: .5;
      transform: scale(1)  rotate(35deg) skew(-3deg, -2deg);  }
  100% {  opacity: 1;
    transform: scale(0);  }
}

@-webkit-keyframes pop {
    0% {  visibility: visible;
        opacity: 1;
        -webkit-transform: scale(1.4) skew(-10deg, -20deg) ;  }
    30%{  z-index: 2;
        -webkit-transform: scale(.8) skew(10deg, 10deg) ;  }
    60% {  opacity: .5;
        -webkit-transform: scale(1)  rotate(35deg) skew(-3deg, -2deg);  }
    100% {  opacity: 1;
        -webkit-transform: scale(0);  }
}

@-moz-keyframes pop {
    0% {  visibility: visible;
        opacity: 1;
        -moz-transform: scale(1.4) skew(-10deg, -20deg) ;  }
    30%{  z-index: 2;
        -moz-transform: scale(.8) skew(10deg, 10deg) ;  }
    60% {  opacity: .5;
    -moz-transform: scale(1)  rotate(35deg) skew(-3deg, -2deg);  }
    100% {  opacity: 1;
        -moz-transform: scale(0);  }
}


@keyframes boom {
    0% {
        left: 2px;
        margin-left: 10px;
        margin-top: -30px;
        width: 0px;
        height: 0px;
        filter: blur(3px);
        box-shadow: 0 0 15px #FF00FF;
    }
    95% {
        width: 100px;
        height:90px;
        left: 580px;
        box-shadow: 0 0 100px #FF00FF;
        filter: blur(23px);
        margin-left: 40px;
        margin-top: -40px;
    }
    96% {
        left: 950px;
        width: 40px;
        height: 40px;
        box-shadow: 0 0 20px #FF00FF;
        margin-left: -20px;
        margin-top: -20px;
    }
    100% {
        left: 950px;
        width: 40px;
        height: 40px;
        box-shadow: 0 0 20px #FF00FF;
        margin-left: -20px;
        margin-top: -20px;
    }

}

@-webkit-keyframes boom {
    0% {
        left: 2px;
        margin-left: 10px;
        margin-top: -30px;
        width: 0px;
        height: 0px;
        -webkit-filter: blur(3px);
        -webkit-box-shadow: 0 0 15px #00FF00;
    }
    95% {
        width: 100px;
        height:90px;
        left: 580px;
        -webkit-box-shadow: 0 0 100px #00FF00;
        -webkit-filter: blur(23px);
        margin-left: 40px;
        margin-top: -40px;
    }
    96% {
        left: 950px;
        width: 40px;
        height: 40px;
        -webkit-box-shadow: 0 0 2x #00FF00;
        margin-left: -20px;
        margin-top: -20px;
    }
    100% {
        left: 950px;
        width: 40px;
        height: 40px;
        -webkit-box-shadow: 0 0 2x #00FF00;
        margin-left: -20px;
        margin-top: -20px;
    }

}

@-moz-keyframes boom {
    0% {
        left: 2px;
        margin-left: 10px;
        margin-top: -30px;
        width: 0px;
        height: 0px;
        -moz-filter: blur(3px);
        -moz-box-shadow: 0 0 15px #00FF00;
    }
    95% {
        width: 100px;
        height:90px;
        left: 580px;
        -moz-box-shadow:  0 0 100px #00FF00;
        -moz-filter: blur(23px);
        margin-left: 40px;
        margin-top: -40px;
    }
    96% {
        left: 950px;
        width: 40px;
        height: 40px;
        -moz-box-shadow: : 0 0 2x #00FF00;
        margin-left: -20px;
        margin-top: -20px;
    }
    100% {
        left: 950px;
        width: 40px;
        height: 40px;
        -moz-box-shadow: : 0 0 2x #00FF00;
        margin-left: -20px;
        margin-top: -20px;
    }

}


@keyframes recoil {
    0% {transform: translate(0px, 0px) rotate(0deg); }
    10% { transform: translate(-12px, -8px) rotate(-3deg); }
    100% { transform: translate(0px, 0px) rotate(0deg); }
}


@-webkit-keyframes recoil {
    0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
    10% { -webkit-transform: translate(-12px, -8px) rotate(-3deg); }
    100% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
}

@-moz-keyframes recoil {
    0% { -moz-transform: translate(0px, 0px) rotate(0deg); }
    10% { -moz-transform: translate(-12px, -8px) rotate(-3deg); }
    100% { -moz-transform: translate(0px, 0px) rotate(0deg); }
}


@keyframes shake {
    0% { transform: translate(3px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -4px) rotate(-1deg); }
    20% { transform: translate(-5px, 0px) rotate(1deg); }
    30% { transform: translate(1px, 5px) rotate(0deg); }
    40% { transform: translate(2px, -1px) rotate(1deg); }
    50% { transform: translate(-2px, 4px) rotate(-1deg); }
    60% { transform: translate(-6px, 2px) rotate(0deg); }
    70% { transform: translate(4px, 3px) rotate(-1deg); }
    80% { transform: translate(-2px, -1px) rotate(1deg); }
    90% { transform: translate(4px, 4px) rotate(0deg); }
    100% { transform: translate(0px, 0px) rotate(0deg); }
}

@-webkit-keyframes shake {
    0% { -webkit-transform: translate(3px, 1px) rotate(0deg); }
    10% { -webkit-transform: translate(-1px, -4px) rotate(-1deg); }
    20% { -webkit-transform: translate(-5px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(1px, 5px) rotate(0deg); }
    40% { -webkit-transform: translate(2px, -1px) rotate(1deg); }
    50% { -webkit-transform: translate(-2px, 4px) rotate(-1deg); }
    60% { -webkit-transform: translate(-6px, 2px) rotate(0deg); }
    70% { -webkit-transform: translate(4px, 3px) rotate(-1deg); }
    80% { -webkit-transform: translate(-2px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(4px, 4px) rotate(0deg); }
    100% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
}

@-moz-keyframes shake {
    0% { -moz-transform: translate(3px, 1px) rotate(0deg); }
    10% { -moz-transform: translate(-1px, -4px) rotate(-1deg); }
    20% { -moz-transform: translate(-5px, 0px) rotate(1deg); }
    30% { -moz-transform: translate(1px, 5px) rotate(0deg); }
    40% { -moz-transform: translate(2px, -1px) rotate(1deg); }
    50% { -moz-transform: translate(-2px, 4px) rotate(-1deg); }
    60% { -moz-transform: translate(-6px, 2px) rotate(0deg); }
    70% { -moz-transform: translate(4px, 3px) rotate(-1deg); }
    80% { -moz-transform: translate(-2px, -1px) rotate(1deg); }
    90% { -moz-transform: translate(4px, 4px) rotate(0deg); }
    100% { -moz-transform: translate(0px, 0px) rotate(0deg); }
}


/* ---- R slide to right---*/
@keyframes slide {

    from {
        transform: translateX(0px);
    }

    to {
        transform: translateX(26rem);
    }

}
@-webkit-keyframes slide {

    from {
        -webkit-transform: translateX(0px);
    }

    to {
        -webkit-transform: translateX(26rem);
    }
}


@-webkit-keyframes float-up {
    0% {
        -webkit-transition: -webkit-transform 0.3s ease;
        -webkit-transform: translate3d(0, 0, 0);
    }

    5% {
        -webkit-transform: translate3d(-200px, -47px, 0) rotate(-30deg);
    }

    15% {
        -webkit-transform: translate3d(0px, -247px, 0) rotate(1deg);
    }


    100% {
        -webkit-transition: -webkit-transform 0.3s ease;
        -webkit-transform: translate3d(0, -1477px, 0);
    }
}

@-moz-keyframes float-up {
    0% {
        -moz-transition: -moz-transform 0.3s ease;
        -moz-transform: translate3d(0, 0, 0);
    }

    5% {
        -moz-transform: translate3d(-200px, -47px, 0) rotate(-3deg);
    }
    15% {
        -moz-transform: translate3d(0px, -247px, 0) rotate(1deg);
    }

    100% {
        -moz-transition: -moz-transform 0.3s ease;
        -moz-transform: translate3d(0, -1477px, 0);
    }
}

@-o-keyframes float-up {
    0% {
        -o-transition: -o-transform 0.3s ease;
        -o-transform: translate3d(0, 0, 0);
    }

    5% {
        -o-transform: translate3d(-200px, -47px, 0) rotate(-30deg);
    }
    15% {
        -o-transform: translate3d(0px, -247px, 0) rotate(1deg);
    }


    100% {
        -o-transition: -o-transform 0.3s ease;
        -o-transform: translate3d(0, -1477px, 0);
    }
}

@keyframes float-up {
    /*0% {*/
    /*visibility: visible;*/
        /*transform: translate3d(0, 0, 0) scale(.3);*/
    /*}*/

    /*20% {*/

        /*transform: translate3d(-1100px, -1800px, 0) rotate(90deg) scale(.5);*/
    /*}*/
    /*50% {*/

        /*transform: translate3d(-80px, -3500px, 0) rotate(-90deg) scale(2);*/
    /*}*/


    /*75% {*/
        /*transform: translate3d(-10px, -5000px, 0) rotate(360deg) scale(2);*/
    /*}*/

    /*90% {*/
        /*transform: translate3d(-1100px, -6000px, 0) rotate(30deg) scale(1);*/
    /*}*/

    /*100% {*/

        /*transform: translate3d(0, -7000px, 0) rotate(360deg) scale(.1);*/
    /*}*/
    /*0% {*/
        /*visibility: visible;*/
        /*transform: translate3d(0, 0, 0) scale(.3);*/
    /*}*/

    /*20% {*/

        /*transform: translate3d(-100rem, -100rem, 0) rotate(90deg) scale(.5);*/
    /*}*/
    /*50% {*/

        /*transform: translate3d(-2rem, -300rem, 0) rotate(-90deg) scale(2);*/
    /*}*/


    /*75% {*/
        /*transform: translate3d(-100rem, -500rem, 0) rotate(360deg) scale(2);*/
    /*}*/

    /*90% {*/
        /*transform: translate3d(-2rem, -600rem, 0) rotate(30deg) scale(1);*/
    /*}*/

    /*100% {*/

        /*transform: translate3d(-100rem, -700rem, 0) rotate(360deg) scale(.1);*/
    /*}*/
    0% {
        visibility: visible;
        transform: translate3d(0, 0, 0) scale(.3);
    }

    20% {

        transform: translate3d(-100rem, -100rem, 0) rotate(90deg) scale(.5);
    }
    50% {

        transform: translate3d(-2rem, -300rem, 0) rotate(-90deg) scale(2);
    }


    75% {
        transform: translate3d(-100rem, -500rem, 0) rotate(360deg) scale(2);
    }

    90% {
        transform: translate3d(-2rem, -600rem, 0) rotate(30deg) scale(1);
    }

    100% {

        transform: translate3d(-100rem, -700rem, 0) rotate(360deg) scale(.1);
    }

}


/* navigation
================================ */

a {
  color: transparent;
  text-decoration: none;
}


.me {
  width: 300px;
  margin: 90px auto;
}


.social {
  position: fixed;
  top: 75%;
  z-index: 999;


}
.social ul {
  padding: 0;
  -webkit-transform: translate(-270px, 0);
  -moz-transform: translate(-270px, 0);
  -ms-transform: translate(-270px, 0);
  -o-transform: translate(-270px, 0);
  transform: translate(-270px, 0);

}
.social ul li {
  display: block;
  margin: 4px;
  background: transparent;
  width: 32rem;
  text-align: right;
  font-family: 'Roboto', sans-serif;
  -webkit-border-radius: 0 60px 60px 0;
  -moz-border-radius: 0 60px 60px 0;
  border-radius: 0 60px 60px 0;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  border-bottom: 5px outset rgba(47,248,248, .5);
}

.social ul li:hover {
  -webkit-transform: translate(100px, 0);
  -moz-transform: translate(100px, 0);
  -ms-transform: translate(100px, 0);
  -o-transform: translate(100px, 0);
  transform: translate(110px, 0);
  background: rgba(250,250,250,0);
  background: -moz-linear-gradient(left, rgba(250,250,250,0) 0%, rgba(142,153,172,0) 45%, rgba(83,101,130,0.29) 54%, rgba(37,52,63,1) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(250,250,250,0)), color-stop(45%, rgba(142,153,172,0)), color-stop(54%, rgba(83,101,130,0.29)), color-stop(100%, rgba(37,52,63,1)));
  background: -webkit-linear-gradient(left, rgba(250,250,250,0) 0%, rgba(142,153,172,0) 45%, rgba(83,101,130,0.29) 54%, rgba(37,52,63,1) 100%);
  background: -o-linear-gradient(left, rgba(250,250,250,0) 0%, rgba(142,153,172,0) 45%, rgba(83,101,130,0.29) 54%, rgba(37,52,63,1) 100%);
  background: -ms-linear-gradient(left, rgba(250,250,250,0) 0%, rgba(142,153,172,0) 45%, rgba(83,101,130,0.29) 54%, rgba(37,52,63,1) 100%);
  background: linear-gradient(to right, rgba(250,250,250,0) 0%, rgba(142,153,172,0) 45%, rgba(83,101,130,0.29) 54%, rgba(37,52,63,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#25343f', GradientType=1 );
}
.social ul li:hover a {
  color: #649cff;
}

.social ul li:hover i {
  color: #fff;
  background: rgba(0, 0, 0, 0.36);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.social ul li i {
  border: 2px  #2ff8f8;
  border-style: dotted;
  margin-left: .625rem;
  color: #649cff;
  padding: .625rem;
  -webkit-border-radius: 70%;
  -moz-border-radius: 70%;
  border-radius: 70%;
  width: 1.5rem;
  height: 1.5rem;
  font-size: .4rem;
  background: #000;


}




h3.section-heading {
  text-align: center;
  font-family:'Carter One', cursive;
  text-shadow: 1px 1px rgba(22,22,22,.6);
  color: rgba(200,200,200,1);
}



h2 {
  color: white;
  font-family:'Carter One', cursive;
}


/* ------logo sticky jquery--------------------*/

#logo {
    overflow: hidden;
    z-index: 3009;
    float: right;
    margin: 0 3rem 0 0;
    width: 30rem;
}

.sticky-wrapper {
    float: right;
    width: 30rem;
    margin-right: 5%;

}
.top {
    overflow: hidden ;
    background-color: rgba(0,0,0,.6);
}

.is-sticky .top .redshirt {
  display: none;
}

.is-sticky svg .top .kirk {
    width: 50px;

}
.is-sticky .top {
    animation: slide 1s ease-out forwards;
    -webkit-animation: slide 1s ease-out forwards;
    background-color:  background-color: rgba(0,0,51,.8);
    padding-left: 1.8rem;
}

/*----------button --------*/

.button {
    border: none;
    position: fixed;
    bottom: 10%;
    left: -2%;
    float: left;
    z-index: 900;
}

.circle{
    border: 1.6px solid #649cff;
    box-shadow: -.5px -.5px 15px 10px #00215E inset;
    -webkit-box-shadow: -.5px -.5px 15px 10px #00215E inset;
    -moz-box-shadow: -.5px -.5px 15px 10px #00215E inset;
    width:46px;
    height:46px;
    border-radius:50%;
    position:absolute;
    top:70%;
    left:90%;
    margin:-23px 0 0 -23px;
    overflow: hidden;

}
.innerMost:hover {
    background-color: rgb(250, 0, 0);
    box-shadow: 3px 2px 4px 2px rgba(94,0,33, .6) inset;
    -moz-box-shadow: 3px 2px 4px 2px rgba(94,0,33, .6) inset;
    -webkit-box-shadow: 3px 2px 4px 2px rgba(94,0,33, .6) inset;
    content:"Communication channel now open - please write your message";
}

.circle1{
    width:400px;
    height:400px;
    border-radius:50%;
    -moz-border-radius:50px 50px 50px 50px;
    -webkit-border-radius: 50px 50px 50px 50px;
    position:absolute;
    top:70%;
    left:90%;
    margin:-200px 0 0 -200px;

}

.innerCircle{
    width:32px;
    height:32px;
    border-radius: 50px 50px 50px 50px;
    -moz-border-radius:50px 50px 50px 50px;
    -webkit-border-radius: 50px 50px 50px 50px;
    position:absolute;
    top:70%;
    left:90%;
    border: 2px dotted #2ff8f8;
    margin:-17px 0 0 -17px;

}
.circle1:hover + .innerCircle {
  /*background-color: white;*/
    border-radius: 30px 0px 30px 30px;
    -moz-border-radius: 50px 0px 50px 50px;
    -webkit-border-radius: 50px 50px 50px 50px;
  -webkit-transform: rotate(300deg);
  -moz-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  -o-transform: rotate(360deg);
  transform: rotate(300deg);
  -webkit-transition: transform 2s ease-out;
  -moz-transition: transform 2s ease-out;
  -ms-transition: transform 2s ease-out;
  -o-transition: transform 2s ease-out;
  transition: transform 2s ease-out;

}

.inner{

  border: 1px solid #83FF95;
  width:30px;
  height:30px;
  border-radius:50%;
  position:absolute;
  top:70%;
  left:90%;
  margin:-15px 0 0 -15px;
}

.innerMost {
  background-color: #000033;
  border: 1px solid #649cff;
  width:24px;
  height:24px;
  border-radius:50%;
  position:absolute;
  top:70%;
  left:90%;
  margin:-12px 0 0 -12px;

}
/*----------------------*/

.column {
  padding: 10px;
}

.container {
  background-color: rgba(111,152,181,.8);

}

.hero-header {
  color : rgba(111,152,181,1);
  text-align: center;
  text-transform: uppercase;
  margin-top: 1em;
  margin-bottom: -0.35em;
  font-size: 4rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-style: italic;
  text-shadow: 4px 2px rgba(22,22,22,.6);
}


.values > .container {
    border-top-right-radius: 2rem;
    border-bottom-left-radius: 1rem;
  padding: 2rem;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6f98b5+0,6f98b5+30&1+0,0.8+100 */
  background: -moz-linear-gradient(top,  rgba(111,152,181,1) 0%, rgba(111,152,181,0.94) 30%, rgba(111,152,181,0.6) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(111,152,181,1) 0%,rgba(111,152,181,0.94) 30%,rgba(111,152,181,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(111,152,181,1) 0%,rgba(111,152,181,0.94) 30%,rgba(111,152,181,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6f98b5', endColorstr='#cc6f98b5',GradientType=0 ); /* IE6-9 */
}

.values > .container p {
    font-family: 'Roboto', sans-serif;
    font-size: 1.8rem;
    font-weight: 200;
    margin: 0;
    padding: 2rem;
    text-align: center;
}

.values > .container p a {
  font-family: 'Roboto', sans-serif;
  color: rgba(255,255,255,.7);
  font-style: italic;
  font-weight: 200;
}

.what-we-do .container {
  background-color: transparent;
}


.what-we-do h3.capabilities:hover {


    opacity: 1;
    transition: opacity 1s ease-in-out;
    cursor: pointer;
}

.what-we-do h3.capabilities {
    opacity: .5;
    width: 90%;
    text-align: center;
    font-family:'Carter One', cursive;
    z-index: 2001;
    font-size: 2.2rem;
    font-weight: 300;

    border-radius: 25px;
    color: #000033;
    background-color: rgba(111,152,181,1);

}


/*----------------Portfolio -------------------*/


.portfolio {
  padding-top: 60px;
}

.portfolio-green {
  background-color: rgb(155, 181, 181);

}

.portfolio-lightblue {
  background-color: rgb(111,152,181);

}
.portfolio-darkblue{
  background-color: rgb(66, 125, 181);
}

.lineup {
  /*width:100%;*/
  text-align: center;
    margin-top: 5rem;


}

.lineup li {
    display: inline-block;
    list-style-type: none;
    vertical-align: top;

}

.lightbox {
    /** Default lightbox to hidden */
    display: none;

    /** Position and style */
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
}


.lightbox img {
    /** Pad the lightbox image */
    max-width: 90%;
    max-height: 80%;
    margin-top: 2%;
}

.lightbox:target {
    /** Remove default browser outline */
    outline: none;

    /** Unhide lightbox **/
    display: block;
}

img.webproject {
    margin-left: auto;
    margin-right: auto;
    box-shadow: 3px 3px 3px rgba(119,123, 132,.8);

}

 .webprojectcreate {
  /*height: 80%;*/
  width: 80%;

  margin-left: auto;
  margin-right: auto;
}



img.webproject.circleup {
    width: 40%;
    max-width: 100%;
    margin: auto 0;
    margin-top: 2rem;
    box-shadow: 3px 3px 3px rgba(119,123, 132,.8);
}
.portfolio .works {
  padding: 1.3rem 1.3rem 3.6rem 1.3rem;
  width: 80%;
  max-width: 900px;
  margin: 0 auto;
}

.portfolio .works .list {
  padding: 0;
  margin: 0;
}

.portfolio .works .list li {
  display: inline;
  list-style-type: none;
  padding: .1rem;
  font-size: 2.0rem;
  margin: 0 .1rem 0 0;
  color: rgba(0,0,51,.7);

}





.portfolio .works .illustration {
    width: 20rem;
    padding: 2rem;

}


.portfolio .works .logo {
    width: 25rem;

}

.portfolio .works .photoshop {
    width: 30rem;

}
.portfolio .works .bigphotoshop {
    width: 80rem;

}


.portfolio .works .caption  {
    font-size: 1rem;
    line-height: 1.3rem;
    padding: 0 3rem;
    /*width: 15rem;*/
    text-align: center;
}

.portfolio .works .photoshop > .caption  {
    font-size: 1rem;
    line-height: 1.3rem;
    width: 20rem;
    padding: 0 3rem;
    text-align: center;
}

.portfolio .works .bigphotoshop > p {
    text-align: center;


}


.portfolio .works .meta li {
  color: rgba(0,0,0,.7);
  text-align: center;
  text-transform: uppercase;
  font-size: 2.0rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-style: italic;
  line-height: 1.2em;

}

.portfolio .works .meta li:before {
  content : "/ ";
}

.portfolio .works .meta li:first-child {
  font-weight: 900;
  font-size: 3.5rem;
  color: black;
  text-shadow: 2px 2px 3px rgba(119,123, 132,.8);
}

.portfolio .works .meta li:first-child:before {
  content : "";
}

.portfolio .works .meta li a {
  text-decoration: none;
}

.portfolio .works .meta li a:hover {
  text-decoration: underline;
}

.portfolio .works .technologies {
  margin-bottom: .4em;
  background-color: rgba(255,255,255,.1);
  padding: 0 2px 0 4px;
  display: inline-block;
}
.portfolio .works .technologies li {
  text-transform: uppercase;
  font-size: 1.1rem;
}

.portfolio .works .technologies li::after {
  content : ", "
}

.portfolio .works .technologies li:last-child:after {
  content : "."
}

.portfolio .works p {
  line-height: 3.5rem;
}

.portfolio .works  a {
  color: rgba(0,0,51,.7);
  text-decoration: underline;
}



/*---------------------about us__________________*/
.about-us h5 {
  margin-bottom: 0em;
}

p.about-us {
    font-size: 1.3rem;
    line-height: 2rem;
    padding: .8rem .5rem 0 .5rem;


}

.about-us .hero-header {
    color: rgba(111,152,181,.7);
    text-shadow: none;
    width: 80%;

    margin-left: auto;
    margin-right: auto;
}
.name {
  float: right;
    padding-right: 3rem;
    padding-top: 5rem;
    color: rgba(187, 189, 193, .8);
    font-family: 'Carter One', cursive;
    font-size: 5rem;
}
.portrait {
    border-radius: 0px 40px 0px 18px;
    -moz-border-radius: 0px 40px 0px 18px;
    -webkit-border-radius: 0px 40px 0px 18px;
    border: 0px solid #000000;
  background-color: #000033;
}

/*--------------contact form---------*/

.contact {
  padding-bottom: 60px;
  position: relative;
    z-index: -5;
}

.contact .monolith {
  background-image: url("../svg/monolith.svg");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: bottom left;

}

.contact .hero-header {
  color: rgba(111,152,181,.8);
  text-shadow: none;
  width: 80%;

  margin-left: auto;
  margin-right: auto;
}

.contact input[type="email"], .contact input[type="text"] {
  background-color: transparent;
  border-top: transparent;
  border-right: transparent;
  border-left: transparent;
  border-radius: 0;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  border-bottom: 1px dashed rgba(255,255,255,.2);
  width: 100%;
  color: #fff;
  padding: 2px ;
  font-size: 1em;
}

.contact input[type="email"]:hover, .contact input[type="text"]:hover {
    border-bottom: 1px dashed rgba(255,255,255,.6);
    background-color: rgba(0,0,52,.1);


}

.contact textarea {
    border: 1px dashed rgba(255,255,255,.2);
    border-radius: 0;
    width: 100%;
    height: 60px;
    background-color: rgba(0,0,52,0);
    color: white;
    font-size: 1em;
}

.contact textarea:hover {
    background-color: rgba(0,0,52,.1);
    border: 1px dashed rgba(255,255,255,.6);
}
.contact textarea {
    opacity: .7;
    background-color: #000033;
    border: none;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    color: #fff;
}
.tail {
  width: 200px;
  margin: auto;
  z-index: 10;
}


* {
    margin: 0;
}


.floater {
    z-index: 1000;
    visibility: hidden;
    position: absolute;
    right: 3rem;
    float: right;
    height: 100px;
    -webkit-animation-name: float-up;
    -moz-animation-name: float-up;
    -ms-animation-name: float-up;
    -o-animation-name: float-up;
    animation-name: float-up;

    -webkit-animation-duration: 90s;
    -moz-animation-duration: 90s;
    -ms-animation-duration: 90s;
    -o-animation-duration: 90s;
    animation-duration: 90s;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

.e-arth {
    display: block;
    z-index: -10;
    position: absolute;
    background: transparent url("../img/e-arth.png") top center no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    left: 0;
    right: 0;
    min-height: 50%;
    height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 155px; /* .push must be the same height as .footer */
}