.slide1{
    width:100%;
    height:100%;
    position:relative;
    padding-top:0px;
    color:white;
}

.slide2{
    width:50%;
    height:100%;
    position:absolute;
    padding-top:0px;
    color:white;
    
}

.slide3{
    width:50%;
    left:50%;
    height:100%;
    position:absolute;
    padding-top:0px;
    color:white;
    background-color:rgb(255, 85, 85);
}


.inst-text{
    width:100%;
    height:auto;
    display:block;
    color: white;
    font-size: 2vw;
    font-family: 'Open Sans', sans-serif;
    position:absolute;
    top:50px;
    margin-top:20%;
  
     -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

.home-text{
    width:100%;
    height:auto;
    display:block;
    color: white;
    font-size: 2vw;
    font-family: 'Open Sans', sans-serif;
    position:absolute;
     top:25%;
  
     -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}


.hide{
    display:none;
}

.panel-body{
    width:100%;
    height:10%;
}

.cursive{
    font-size:35px;
}
    
.image_slide{
    z-index:30;
    width:100%;
    height:100%;
}

.feelimage{
    width:100%;
    height:100%;
    margin-bottom: 40px;
}
.logo1{
    height: 300px;
    width: auto;   
}

.battery{
    width: 200px; 
}

.small{
     font-weight: 300;
     font-size: 20px;
     line-height:2em;
}

.applogo{
    width:300px;
    margin: 0 5% 0 5%;
}

.screenshot{
    width:20%;
    height:auto;
    margin: 0 2% 0 2%;
    box-shadow: 0px 10px 15px rgba(24, 51, 82, 0.37);
}

.screenshot-2{
    display:block;
    position:absolute;
    width:50%;
    height:auto;
    box-shadow: 0px 10px 15px rgba(24, 51, 82, 0.37);
    left:0%;
    margin-left: 50px;
}

.screenshot-3{
    width:400px;
    height:auto;
    float:center;
}

.screenshot-4{
    float:left;
    width:250px;
    height:auto;
    margin-left:50px;
    margin-top: 20px;
}

.left_block{
    position:absolute;
    left:10%;
    width:40%;
    text-align:right;
}

.left_block_small{
    position:absolute;
    left:10%;
    width:30%;
    text-align:right;
    margin:0px;
}

.right_block{
    position:absolute;
    width:50%;
    height:100%;
}

.right_block_big{
    position:absolute;
    width:50%;
    height:100%;
    left:40%;
}

.feedback{
    margin:15px 0 20px 0;
    top: 0;
    font-size:20px;
    width:100%;
}
.item{
    width:250px;
    display:inline;
    margin: 0 30px 0 30px;
}

.dark{
 color:#0f58ad;   
}

hr { 
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
}

.high{
    top:50px;
    margin-top:15%;
}

.high2{
    top:50px;
    margin-top:10%;
}

.high3{
    top:50px;
    margin-top:20%;
}

.high4{
    top:50px;
    margin-top:15%;
}

.video_example{
    position: absolute;
    width:100%;
    height:100%;
    top:50%;
}
/*-------------------ANIMATIONS----------------------------------------------------------*/

.pulse {
	animation-name: pulse_animation;
	animation-duration: 3000ms;
	transform-origin:50% 50%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes pulse_animation {
	0% { transform: scale(1); }
	50% { transform: scale(0.99); }
    100% { transform: scale(1.00); }
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}




/* Bob */
@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }

  50% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  100% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
}

@keyframes ¸ {
  0% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }

  50% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  100% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
}

@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
}

@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
}

.hvr-bob {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}

.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}