/*!
 * Start Bootstrap - The Big Picture HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
	margin-top: 50px;
	margin-bottom: 50px;
	background: none;
  font-family: "Annie Use Your Telescope";
}

#body {
  position: fixed;
  left: 150px;
}

.full {
  background: url(../img/backgroundd.png) no-repeat left fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.lang-buttons {
  position: fixed;
  left: 85.5%;
  top: 5%;
  width: 100px;
}

.logo {
  position: fixed;
  left: 20%;
  top: 1%;
}

.window {
	position: absolute;
	top : 40px;
	transform: scale(1.13);
}

.start-menu {
	opacity: 0.8;
}

.img-responsive {
  position:relative;
  left : 90px;
}

h4 { 
   position: absolute; 
   color: #dddddd;
   font-weight: 100;
}

.scroll {
  top: 90px; 
  left: 130px; 
  width: 200px; 
  height : 350px;
  overflow: scroll;
  overflow-x: hidden;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(255,255,255,.5);
}

::-webkit-scrollbar-corner {
  background-color: rgba(255,255,255,.5);
}

/*::-webkit-scrollbar-track-piece:vertical {
  background-color: rgba(85,95,95,.5);
}*/

::-moz-scrollbar {
    -webkit-appearance: visible;
    width: 7px;
}

::-moz-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(255,255,255,.5);
}

::-moz-scrollbar-corner {
  background-color: rgba(255,255,255,.5);
}

/*::-moz-scrollbar-track-piece:vertical {
  background
}*/


#phone {
  position: absolute;
  top: 5%;
  left:95%;
  height: 450px;
  width:280px;
}

#folder {
   height: 80px;
   width: 70px;
   position: absolute;
   left: 3%;
}


.trash {
   height: 100px;
   width: 100px;
   position: absolute;
   top:80%;
   left:1%;
   z-index: -1;
}


.mycomp {
   height: 80px;
   width: 95px;
   position: absolute;
   top:25%;
   left:1%;
   z-index: -1;
}

.internet {
   height: 70px;
   width: 70px;
   position: absolute;
   top:45%;
   left:1.5%;
   z-index: -1;
}

.games {
   height: 80px;
   width: 70px;
   position: absolute;
   top:63%;
   left:2%;
   z-index: -1;
}


.tab-fb {
  position: absolute; left:60px; top:25px;
}

.tab-chat {
  position: absolute; left: 175px; top:23px;
}

.tab-mail {
  position: absolute; left: 280px; top:22px;
}

.tab-forum {
  position: absolute; left: 377px; top:22px;
}


.move {
  position: relative;
  left:8px;
}

.zoom {
  zoom: 120%;
}

.open-now {
  color : red;
}

.folder {
   height: 80px;
   width: 60px;
   position: relative;
   left: 20px;
   top: 20px;
}

.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: ease-out; 
    animation-timing-function: ease-out; 
    animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite; 
} 

@-webkit-keyframes wobble { 
  0% { -webkit-transform: translateX(0%); } 
  15% { -webkit-transform: translateX(-25%) rotate(-5deg); } 
  30% { -webkit-transform: translateX(20%) rotate(3deg); } 
  45% { -webkit-transform: translateX(-15%) rotate(-3deg); } 
  60% { -webkit-transform: translateX(10%) rotate(2deg); } 
  75% { -webkit-transform: translateX(-5%) rotate(-1deg); } 
  100% { -webkit-transform: translateX(0%); } 
} 
@keyframes wobble { 
  0% { transform: translateX(0%); } 
  15% { transform: translateX(-25%) rotate(-5deg); } 
  30% { transform: translateX(20%) rotate(3deg); } 
  45% { transform: translateX(-15%) rotate(-3deg); } 
  60% { transform: translateX(10%) rotate(2deg); } 
  75% { transform: translateX(-5%) rotate(-1deg); } 
  100% { transform: translateX(0%); } 
} 
.wobble { 
    -webkit-animation-name: wobble; 
    animation-name: wobble; 
}

.animated2 { 
    -webkit-animation-duration: 2s; 
    animation-duration: 2s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: ease-out; 
    animation-timing-function: ease-out; 
    animation-iteration-count:1; 
    -webkit-animation-iteration-count:1; 
} 

.animated3 { 
    -webkit-animation-duration: 0.8s; 
    animation-duration: 0.8s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: ease-out; 
    animation-timing-function: ease-out; 
    animation-iteration-count:1; 
    -webkit-animation-iteration-count:1; 
}

@-webkit-keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}


@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

.answers {
  position: relative;
  top:50%;
  left :110%;
  z-index: 1;
}

.move-down {
  position: relative;
  top:350px;
  left :113%;
  z-index: 1;
}


.move-down-2 {
  position: relative;
  top:330px;
  left :114%;
  z-index: 1;
}

.ans1 {
  font-size: 20px;
   color: white;
}

.ans2 {
  font-size: 20px;
  color: white;
}

.end {
  position: absolute;
  left: 220px !important;
}