body {
    font-family: 'Lato', sans-serif;
    background-image: url("../images/animated wind gif.gif");
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
    background-position: center;
}

h1 {
  font-size: 100px;
  font-variant: small-caps;
  font-style: italic;
  font-family: fantasy;
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

#imgScaleDownID {
  max-width: 200%;
  height:auto;
  display: block;
  margin: auto;
  width: 50%;
}

.container3D{
  display: inline-block;
  font-size: 1px;
  transform-style: preserve-3d;
  perspective: 1000px;
  perspective-origin: top;
  /*transform: scale3d(1, 1, 1) rotateY(15deg) rotateX(45deg) rotateZ(15deg) translateX(150em) translateY(5em) translateZ(-50em);*/
}

.elementTranslateZ {
  background-image: url("../images/WVS iPhone.gif");
  backface-visibility: hidden;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  height: 700em;
  width: 390em;
  padding: 1px;
  color: white;
  margin-right: 5em;
  margin-left: 5em;
  transform:  rotateX(45deg) translateY(-50em);
}

.elementTranslateZ div{
  width:10em;
  margin-top: 6em;
  margin-left: .5em;
  margin-right: .5em;
  font-size: 25px;
  text-shadow: 2px 2px 4px #000000;
  text-overflow: clip;
  text-align: center;
  animation: 500ms scrollLeft 1;
  transform: translateX(2em);
}

@keyframes scrollLeft {
  10% { visibility: hidden; transform: translateX(11em); clip-path: inset(0 8em 0 0); visibility: visible;}
  20% { transform: translateX(10em); clip-path: inset(0 7em 0 0); }
  30% { transform: translateX(9em); clip-path: inset(0 6em 0 0); }
  40% { transform: translateX(8em); clip-path: inset(0 5em 0 0); }
  50% { transform: translateX(7em); clip-path: inset(0 4em 0 0); }
  60% { transform: translateX(6em); clip-path: inset(0 3em 0 0); }
  70% { transform: translateX(5em); clip-path: inset(0 2em 0 0); }
  80% { transform: translateX(4em); clip-path: inset(0 1em 0 0); }
  90% { transform: translateX(3em); clip-path: inset(0 0 0 0); }
  100% { transform: translateX(2em);  clip-path: inset(0 0 0 0); }
}

@keyframes sitAndSpin {
  /*10%  { transform: rotateX(60deg) rotateY(-30deg) }*/
  /*50%  { transform: rotateY(-60deg) }
  100% { transform: rotateX(-30deg) rotateY(30deg) rotateY(180deg) rotateZ(90deg)}*/
}

.elementTranslateZ div p {
  margin-left: .5em;
  font-size: 25px;
  text-shadow: 2px 2px 4px #000000;
  text-overflow: clip;
}

.spinLeft {
  animation: 3s spinLeft 1;
  /*transform: rotateY(-30deg);*/
}

@keyframes spinLeft {
  33% {transform: rotateY(-10deg);}
  66% {transform: rotateY(-10deg);}
  100% {transform: rotateY(-10deg);}
}

.spinRight {
  animation: 3s spinRight 1;
  /*transform: rotateY(30deg);*/
}

@keyframes spinRight {
33% {transform: rotateY(10deg);}
66% {transform: rotateY(10deg);}
100% {transform: rotateY(10deg);}
}

#iPhone3Dcontact {
  text-align: left;
}

#iPhone3Dcontact h6 {
  font-size: 25px;
  font-stretch: extra-condensed;
}

.elementTranslateZ div#iPhone3Dabout, .elementTranslateZ div#iPhone3Dcontact {
  display: none;
}


.button {
  margin: 2em;
  border-radius: 50%;
  background-color: #000080;
  opacity: .6;
  color: #8080FF;
  height: 6em;
  width: 6em;
  font-weight: bolder;
  text-shadow: 1px 1px 2px black;
}

.button:hover {
  background-color: #000080;
  opacity: 1;
  font-weight: 900;
  font-stretch: semi-expanded;
  text-shadow: 0 0 5px darkblue;
}

/*#iPhoneScreen3D {
  display: inline-block;
  background-size: cover;
  background-position: center;background-repeat: no-repeat;
  width:335em;
  height: 500em;
  margin-top: 100em;
  margin-left: 25em;
  font-size: 1px;
  background: url("../images/WSD iPhone.gif") -25em 600em;
  transform: scale3d(1, 1, 1) rotateY(-45deg) rotateX(60deg) translateX(-185em) translateY(-500em) translateZ(-49em);
}*/

/*#iPhone3D:hover {
  width:335em;
  margin-top: 100em;
  margin-left: 25em;
  height: 500em;
  background-repeat: no-repeat;
  animation: 500ms slidy 1;
  background: url("../images/WSD iPhone 2.gif") -25em 600em;
}*/

.elementAnimateImage{
  display: inline-block;
  background-image: url("../images/WSD iPhone.gif");
  background-size: cover;
  background-position: center;
  width: 390em;
  height: 700em;
  font-size: 1px;
  padding: 1px;
  color: white;
  margin-right: 5px;
  margin-left: 5px;
  /*transition: background-image 3s;*/
}

#iPhoneScreen{
  display: inline-block;
  background-size: cover;
  background-position: center;background-repeat: no-repeat;
  width:335em;
  height: 500em;
  margin-top: 100em;
  margin-left: 25em;
  font-size: 1px;
  background: url("../images/WSD iPhone.gif") -25em 600em;
}

#iPhoneScreen:hover {
  height: 500em;
  background-repeat: no-repeat;
  animation: 250ms slidy 1;
  background: url("../images/WSD iPhone 2.gif") -25em 600em;
}

@@keyframes yRotator {
}

@keyframes slidy {
0% {   background-image: url("../images/WVS iPhone 2.gif");}
20% {  background-image: url("../images/WVS iPhone 3.gif");}
40% {  background-image: url("../images/WVS iPhone 4.gif");}
60% {  background-image: url("../images/WVS iPhone 5.gif");}
80% {  background-image: url("../images/WVS iPhone 6.gif");}
}

div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite;
}

/*body {
  display: flex;
  align-items: center;
  justify-content: center;
}*/

h1{
    margin-bottom: 40px;
}
label {
    color: #333;
}

.navbar-default {
  opacity: .80;
}

.well {
  opacity: .80;
}

.well h1{
  font-family:Lucida Console;
  font-style: italic;
  font-size: 200%;
  font-weight: bold;
  text-shadow:5px 5px 5px #008000;
  /*font-variant:small-caps;*/
}

#copyright {
  font-size: 50%;
  color: #aaaaaa;
}

/*.btn-success {
    color: #fff;
    background-color: #0000aa;
    border-color: #0000aa;
}

.btn-success:hover                   {color: #fff; background-color: #0000aa; border-color: #0000aa;}
.btn-success:focus                   {color: #fff; background-color: #0000aa; border-color: #0000aa;}
.btn-success:active                  {color: #fff; background-color: #0000aa; border-color: #0000aa;}
.btn-success.active                  {color: #fff; background-color: #0000aa; border-color: #0000aa;}
.open > .dropdown-toggle.btn-success {color: #fff; background-color: #0000aa; border-color: #0000aa;}


.btn-send {
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 20px;
}

.btn-success.disabled                   {background-color: #8080ff; border-color: #8080ff;}
.btn-success[disabled]                  {background-color: #8080ff; border-color: #8080ff;}
fieldset[disabled] .btn-success         {background-color: #8080ff; border-color: #8080ff;}
.btn-success.disabled:hover             {background-color: #8080ff; border-color: #8080ff;}
.btn-success[disabled]:hover            {background-color: #8080ff; border-color: #8080ff;}
fieldset[disabled] .btn-success:hover   {background-color: #8080ff; border-color: #8080ff;}
.btn-success.disabled:focus             {background-color: #8080ff; border-color: #8080ff;}
.btn-success[disabled]:focus            {background-color: #8080ff; border-color: #8080ff;}
fieldset[disabled] .btn-success:focus   {background-color: #8080ff; border-color: #8080ff;}
.btn-success.disabled:active            {background-color: #8080ff; border-color: #8080ff;}
.btn-success[disabled]:active           {background-color: #8080ff; border-color: #8080ff;}
fieldset[disabled] .btn-success:active  {background-color: #8080ff; border-color: #8080ff;}
.btn-success.disabled.active            {background-color: #8080ff; border-color: #8080ff;}
.btn-success[disabled].active           {background-color: #8080ff; border-color: #8080ff;}
fieldset[disabled] .btn-success.active  {background-color: #8080ff; border-color: #8080ff;}*/

.alert-success {
    color: #0000cc;
    background-color: #8080ff;
    border-color: #0000cc;
}

/* your styles go here */
#footer h4{
    color: #00aa00;
    font-family:Lucida Console;
    font-style: italic;
    font-variant:small-caps;
    font-size: 75%;
}

#footer {
  background-color: #ffffff;
  opacity: .80;
}

#footer a{
  color: #00aa00;
}

.navbar-brand {
  padding: 0px;
}

.navbar-brand>img {
  height: 100%;
  padding: 5px 15px;
  width: auto;
}

/*.navbar {
  background-color: #0000FF;
  /*color: #0000FF;*/
/*}*/


/*.navbar-inverse .navbar-nav > .active > a{ background-color: #000080;}
.navbar-inverse .navbar-nav > .active > a:hover{ background-color: #000080;}
.navbar-inverse .navbar-nav > .active > a:focus{ background-color: #000080;}

.navbar-inverse .navbar-nav li a{
  color: #aaaaff;
  font-weight: bolder;
}*/

.caption p {
  color: #0000CC;
  font-style: italic;
  font-family: cursive;
}

.panel-heading {
  background-color: #8080ff;
}

/*.accTitleText {
  text-align: center;
}

.accTitleText  a{
  font-style: italic;
  text-shadow: 2px 2px #aaaaaa;
  color: #4040FF;
}

@media (min-width: 320px) {
  .accTitleText {
    font-size: 200%;
  }

@media (min-width: 768px) {
  .accTitleText {
    font-size: 300%;
  }*/

}