*{
    transition: 0.5s;
}

body{
    background-color: rgb(97, 164, 226);
}

h1{
    font-size: 70px;
    position: relative;
    top:-25px;
    left: 530px;
    color:white;
}

#banner {
    width: 800px;
    height: 90px;
    position: relative;
    padding: 10px;
    margin: 10px;
    background-color: rgb(97, 164, 226);
}

#device {
    background-image: url("img/tech.png");
    background-repeat: no-repeat;
    border: 5px soild black;
    width: 1000px;
    height: 500px;
    position: relative;
    background-color: rgb(97, 164, 226);
}

#pause {
    height: 70px;
    width: 70px;
    position: absolute;
    top: 465px;
    left: 950px;
}

#b1 {
    position: absolute;
    top: 178px;
    left: 136px;
    transition: .5s;
    animation-name: play;
    animation-play-state: running;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

#b2 {
    position: absolute;
    top: 138px;
    left: 138px;
    transition: .5s;
    animation-name: roto1;
    animation-play-state: running;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

#b3 {
    position: absolute;
    top: 71px;
    left: 138px;
    transition: .5s;
    animation-name: roto2;
    animation-play-state: running;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

#b4 {
    position: absolute;
    top: -65px;
    left: 300px;
    transition: .5s;
    animation-name: knob1;
    animation-play-state: running;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

#b5 {
    position: absolute;
    top: 2px;
    left: 225px;
    transition: .5s;
    animation-name: knob2;
    animation-play-state: running;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}


.container{
    position: relative;
    left:500px;
    display: none;
}

.f1{
    transition: 0s;
    transition-duration: 0s;
    position:fixed;
    top: 190px;
    left: 535px;
    width: 500px;
    height: 363px;
    color: rgb(27, 27, 27);
    font-size: 25px;
    padding: 11px;
    display:none;
}

.f2{
    transition: 0s;
    transition-duration: 0s;
    position:fixed;
    width: 500px;
    height: 120px;
    top: 175px;
    left: 545px;
    color: rgb(27, 27, 27);
    font-size: 35px;
    padding: 10px;
    display:none;
}

.f3{
    transition: 0s;
    transition-duration: 0s;
    position:absolute;
    width: 410px;
    height: 160px;
    top: 20px;
    left: 55px;
    color: rgb(27, 27, 27);
    font-size: 30px;
    padding: 20px;
    display:none;
}

.f4{
    transition: 0s;
    transition-duration: 0s;
    position:absolute;
    width: 400px;
    height: 160px;
    top: 20px;
    left: 75px;
    color: rgb(27, 27, 27);
    font-size: 30px;
    padding: 20px;
    display:none;
}

.f5{
    transition: 0s;
    transition-duration: 0s;
    position:absolute;
    width: 480px;
    height: 160px;
    top: 30px;
    left: 30px;
    color: rgb(27, 27, 27);
    font-size: 30px;
    padding: 20px;
    display:none;
}

@keyframes roto1 {
    0% {margin-left:0px;}
    30% {margin-left:-10px;}
    50% {margin-left:-10px;}
    80% {margin-left:0px;}
}
@keyframes roto2 {
    0% {margin-left:0px;}
    40% {margin-left:-10px;}
    50% {margin-left:-10px;}
    60% {margin-left:0px;}
}
@keyframes knob1 {
    0% {margin-top:0px;}
    10% {margin-top:-20px;}
    30% {margin-top:-20px;}
    40% {margin-top:0px;}
}
@keyframes knob2 {
    0% {transform: scale(1);}
    40% {transform: scale(1);;}
    50% {transform: scale(1.1);}
    60% {transform: scale(1);}
}
@keyframes play {
    0% {margin-left:0px;}
    50% {margin-left:-10px;}
    60% {margin-left:-10px;}
    70% {margin-left:0px;}
}