/*Lab:exp_8_Part1_Flip Flop S-R flipflop
	File name: style_exp8p1.css
    Author:Prakriti Dhang*/


*{
  box-sizing: border-box;
}


/* Create two equal columns that floats next to each other */
/*.column {
  float: left;
  width: 50%;
  padding: 10px;
  
}*/

/* Clear floats after the columns */
/*.row:after {
  content: "";
  display: table;
  clear: both;
}*/

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .column {
    width: 100%;
  }
  .div{
  width: 100%;
  }
/*.mimg{
  width:100%;
  }
  .img{
  width:100%;
  }*/
}


/*.mimg{
   
    width:645px;*/ /* 645px */
   /* width: 100% */
/*}*/


.blink{
  text-decoration: blink;
}


.blink {
-webkit-animation: blink 2s linear infinite;	
 color:red;
 
}
@-webkit-keyframes blink {
0% { opacity: 0; }
}

#clkb{

  position:absolute;
	top: 1px;
right: 320px;
}
#textclk{
  position:absolute;
	top: 3px;
right:30px;
width: 165px;
}


#red {
  width: 30px;
  height: 3px;
  top: 50px;
right: 330px;
  background-color: red;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
position:absolute;
}

#green{
width: 30px;
  height: 3px;
  top: 40px;
right: 330px;
  background-color: green;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
position:absolute;
display:none;
}

#b1{
	position:absolute;
	top: 325px;
  right: 330px;
  cursor:pointer;
    
    
}

#b2
{
position: absolute;

top: 355px;
right: 330px;
display:block;
cursor:pointer;
/*bottom: 335px;
right: 1058px;*/

}

#b3
{

  position: absolute;
top: 407px;
right:330px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}

#b4
{

position: absolute;

top: 436px;
right:330px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}


#b5
{

position: absolute;

top: 465px;
right:330px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}
#b6
{

position: absolute;

top: 499px;
right: 330px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}


#y1{
	position: absolute;
	top:115px;
    /*right:10px;*/
    visibility:hidden;
 
}

#loff1{
  position:absolute;
  top:376px;
  right:112px;
  visibility:block;
}
#lon1{
  position:absolute;
  top:377px;
  right:110px;
  visibility:hidden;
}

#loff2{
  position:absolute;
  top:376px;
  right:30px;
  visibility:block;
}
#lon2{
  position:absolute;
  top:376px;
  right:28px;
  visibility:hidden;
}


#b1r
{
position: absolute;
top: 500px;
right: 495px;
display:none;
/*bottom: 335px;
right: 1058px;*/

}
#b1g
{
position: absolute;
top: 500px;
right: 495px;
display:block;
}

#b2r
{
position: absolute;

top: 585px;
right: 490px;
display:block;
cursor:pointer;
/*bottom: 335px;
right: 1058px;*/

}
#b2g
{

position: absolute;
top: 585px;
right: 490px;
display:none;
cursor:pointer;
}

#b3r
{

  position: absolute;
top: 626px;
right: 495px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}
#b3g
{

position: absolute;
top: 626px;
right: 495px;
display:none;
cursor:pointer;
}

#b4r
{

position: absolute;

top:672px;
right:495px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}
#b4g
{

position: absolute;
top: 672px;
right: 495px;
display:none;
cursor:pointer;
}

#b5r
{

position: absolute;

top: 722px;
right: 495px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}
#b5g
{

position: absolute;
top: 722px;
right: 495px;
display:none;
cursor:pointer;
}