body {
    perspective: 10000px;
}
.wrapper {
    height:100%;
    /*font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;*/
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    margin: 0 auto; /* center horizontally */
    vertical-alignment: middle; /* center vertically */
}
/* over ride BS*/
.modal-header{
    border-bottom: 0px solid dimgray;
}
/* over ride BS*/
.modal-footer{
    border-top: 0px solid dimgray;
}

.content {
    /*width: 150px;*/
    border-top: 0px solid dimgray;
}

.bg-dv {
    color: black;
    background-color: white !important;
}

.modal-content  {
    -webkit-border-radius: 15px !important;
    -moz-border-radius: 15px !important;
    border-radius:15px !important;
    background-image: url("../img/metal.jpg");

}

#logo {
    font-size: 33vw;
    text-align: center;
    animation-name: spin;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform-style: preserve-3d;
    position: relative;
    /*-webkit-transform 1s spin;*/
    /*    animation-timing-function: step-end;
        jump to the end
      animation-timing-function: ease-in-out;
    */
    animation-timing-function: ease-in-out;
    animation-duration: 20s;
}
#logo::before,
#logo::after {
    content: "V";
    color: black;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    transform: rotateY(0.5deg);
    transform-origin: 0 50%;
}
#logo::after {
    transform: rotateY(0.5deg);
    transform-origin: 100% 50%;

}
@keyframes spin {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(-360deg); }
}
@keyframes depth {
    0% { text-shadow: 0 0 black; }
    25% { text-shadow: 1px 0 black, 2px 0 black, 3px 0 black, 4px 0 black, 5px 0 black, 6px 0 black; }
    50% { text-shadow: 0 0 black; }
    75% { text-shadow: -1px 0 black, -2px 0 black, -3px 0 black, -4px 0 black, -5px 0 black, -6px 0 black; }
    100% { text-shadow: 0 0 black; }
}
.overlay {
    position: relative;
    background-color: dimgray;
}

.contact-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
    background-image: url("../img/contact.png");
}

.mission-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
    background-image: url("../img/mission.png");
}

/* Metal ------------------------- */

.metal {
    position: relative;
    margin: 10px auto;
    outline: none;

    /*font: bold 5em/2em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;*/
    text-align: center;
    color: hsla(0,0%,20%,1);
    text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px;

    background-color: hsl(0,0%,90%);
    box-shadow: inset hsla(0,0%,15%,  1) 0  0px 0px 4px, /* border */
    inset hsla(0,0%,15%, .8) 0 -1px 5px 4px, /* soft SD */
    inset hsla(0,0%,0%, .25) 0 -1px 0px 7px, /* bottom SD */
    inset hsla(0,0%,100%,.7) 0  2px 1px 7px, /* top HL */

    hsla(0,0%, 0%,.15) 0 -5px 6px 4px, /* outer SD */
    hsla(0,0%,100%,.5) 0  5px 6px 4px; /* outer HL */

    transition: color .2s;
}

/* Linear ------------------------- */

.metal.linear {
    width: 130px;
    font-size: 2em;
    height: 70px;
    border-radius: .5em;
    background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,50%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%, .1) 7.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   4%, hsla(0,0%,  0%,.03) 4.5%),
    -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),

    linear-gradient(90deg, hsl(0,0%,78%)  0%,
            hsl(0,0%,90%) 47%,
            hsl(0,0%,78%) 53%,
            hsl(0,0%,70%)100%);
}

.aninate-left {
    animation-name: move_left;
    animation-duration: 4s;
}

@keyframes move_left {
    0%   {left:0px;}
    50%  {left:200px;}
    100% {left:0px;}
}