* {
    margin: 0px;
    padding: 0;
}
/*header section template styling*/

#header {
    border-bottom: 8px solid #ff6600;
    font-family: 'Raleway', sans-serif;
    width: 1890px;
    top: 0;
    min-width: 500px;
    background-color: #fff!important;
}

#header img {
    padding: 8px 8px 4px 32px;
}

h2 {
    font-size: large;
}
#steps{
    margin-top: 20px;
    font-size: 30px;
}
ol{
    margin-left: 50px;
   

}

#labName {
    float: right;
    font-size: 25px;
    align-items: center;
    margin-top: 30px;
    margin-right: 40px;
    color: #2C99CE;
}

#exp-name {
        width: 1890px;
        text-align: center;
        padding: 10px;
        height: 20px;
        color: #2C99CE;
        font-family: 'Raleway', sans-serif;
        border-bottom: 1px solid #333;
}
#restart{

        margin-top: 50px;
        margin-left: 300px;
        height: 700px;
        width: 1000px;
        background-color: white;
        border: 3px solid black;
        border-radius: 10px;
 }
 
#main{

        margin-top: 50px;
        margin-left: 300px;
        height: 700px;
        width: 1000px;
        background-color: white;
        border: 3px solid black;
        border-radius: 10px;
}
#main2{

        margin-top: 50px;
        margin-left: 300px;
        height: 700px;
        width: 1000px;
        background-color: white;
        border: 3px solid black;
        border-radius: 10px;
 }
 #main3{

        margin-top: 50px;
        margin-left: 300px;
        height: 700px;
        width: 1000px;
        background-color: white;
        border: 3px solid black;
        border-radius: 10px;
 }
 #restart_button{
        margin-left: 450px;
        margin-top: 220px;
        height: 70px;
        width: 150px;
        font-size: large;
        color:black;
        background-color: #23B2EE;
        font-weight: bold;
        border: 3px solid black;
        border-radius: 10px;
        cursor: pointer;
        }
    #restart_para{
        font-size: 25px;
        margin-top: 30px;
        margin-left: 200px;
        font-weight: bold;
        }
#start{
        margin-left: 450px;
        margin-top: 200px;
        height: 40px;
        width: 120px;
        font-size: medium;
        color:black;
        background-color: #23B2EE;
        font-weight: bold;
        border: 3px solid black;
        border-radius: 10px;
        cursor: pointer;
        }
#quit{
    margin-left: 450px;
    margin-top: 180px;
    height: 40px;
    width: 120px;
    font-size: medium; 
    color:black;
    background-color: #23B2EE;
    font-weight: bold;
    border: 3px solid black;
    border-radius: 10px;
    cursor: pointer;
    }
#obj{
    margin-left: 400px;
    margin-top: 150px;
    height: 60px;
    width:250px;
    font-size: medium;
    color: black;
    background-color: #23B2EE;
    font-weight: bold;
    border: 3px solid black;
    border-radius: 10px;
    cursor: pointer;
        }
    #exp_details{
        margin-left: 400px;
        margin-top: 150px;
        height: 60px;
        width: 250px;
        font-size: medium; 
        color: black;
        background-color: #23B2EE;
        font-weight: bold;
        border: 3px solid black;
        border-radius: 10px;
        cursor: pointer;
        }
    #back{
    margin-left: 830px;
    margin-top: 200px;
    height: 50px;
    width:100px;
    font-size: large;
     color: black;
    background-color: #23B2EE;
    font-weight: bold;
    border: 3px solid black;
    border-radius: 10px;
    cursor: pointer;
        }
    #obj_heading{
       font-size: 30px;
        margin-left:400px ;
        margin-top: 100px;
        
        color: black;
        font-weight: bold;
        }
    #equip_heading{
        font-size: 30px;
         margin-left:400px ;
         margin-top: 50px;
         color: black;
         font-weight: bold;
        }
   
    #obj_para{
        padding: 30px;
        margin-top: 80px;
        font-size: 25px;
        color: black;
        font-weight: bold;
        text-align: justify;
        }
    #gps_type{
        margin-top: 200px;
        margin-left: 200px;
        font-size: 30px;
        font-weight: bold;
        }
    #equip_para1{
        margin-top: 100px;
        font-size: 25px;
        font-weight: bold;
        text-align: justify;
        padding: 20px;
        }
    #equip_para2{
      
        font-size: 25px;
        font-weight: bold;
        text-align: justify;
        padding: 20px;
        }
    #equip_para3{
        
        font-size: 25px;
        font-weight: bold;
        text-align: justify;
        padding: 20px;
        }
    #pt_heading{
        font-size: 23px;
         margin-left:50px ;
         margin-top: 50px;
     color: red;
        }
    #pt_img{
        margin-top: 20px;
        margin-left: 300px;
        float: left;
        height: 200px;
        width: 400px;
        }
 @keyframes spin_pt {
    from{
        transform: rotateY(0deg);
        /*-ms-transform: rotateY(0deg);*/
    }
    to{
      transform: rotateY(360deg);
     /* -ms-transform: rotateY(360deg);*/
  }
      
    }
    .pt_spin{

      animation-name: spin_pt;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-duration: 10s;
        }
    #pt_para{
        padding-left:20px;
        padding-right:20px;
        font-weight: bold;
        font-size: 25px;
        margin-top: 50px;
        text-align: justify;
        float:right;
        }
     #sheet_heading{
        font-size: 23px;
         margin-left:20px ;
         margin-top: 50px;
        color: red;
        }
     #stand_heading{
        font-size: 23px;
       margin-left: 20px;
         margin-top: 50px;
        color: red;
        }
     #sheet_para{
        padding-left:20px;
        font-weight: bold;
        font-size: 25px;
        margin-top: 50px;
        text-align: justify;
        padding-right: 300px;
     
        }
     #sheet_img{
        float: right;
        height: 200px;
        width: 400px;
        }
     #stand_para{
        padding-left:20px;
        font-weight: bold;
        font-size: 25px;
        margin-top: 50px;
        text-align: justify;
        padding-right: 300px;
        }
  
 #stand_img{
    float:right;
    height: 180px;
    width: 370px;
}
 @keyframes spin_stand {
    from{
        transform: rotateY(0deg);
        /*-ms-transform: rotateY(0deg);*/
    }
    to{
      transform: rotateY(360deg);
     /* -ms-transform: rotateY(360deg);*/
  }
      
    }
    .stand_spin{

      animation-name: spin_stand;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-duration: 10s;
    }
    #alida_heading{
        font-size: 25px;
         margin-left:50px ;
         margin-top: 20px;
        color: red;
     }
     #alida_para{
        
        font-weight: bold;
        margin-left: 50px;
        font-size: 25px;
        text-align: justify;
        margin-top: 20px;
        padding-right: 300px;
     
     }
     #first_alida_heading{
        font-size: 20px;
         margin-left:50px ;
         margin-top: 50px;
        color: red;
     }
    #alida_img{
        float: right;
        height: 300px;
        width: 250px;
 }
 @keyframes spin_alida {
    from{
        transform: rotateY(0deg);
        /*-ms-transform: rotateY(0deg);*/
    }
    to{
      transform: rotateY(360deg);
     /* -ms-transform: rotateY(360deg);*/
  }
      
    }
    .alida_spin{

      animation-name: spin_alida;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-duration: 10s;
    }
    #second_alida_heading{
        font-size: 20px;
         margin-left:50px ;
         margin-top: 50px;
        color: red;
     }
     #tele_alida_para{
        
        font-weight: bold;
        margin-left: 50px;
        font-size: 23px;
        text-align: justify;
        margin-top: 20px;
        padding-left: 20px;
        padding-right: 500px;
     
     }
    #tele_alida{
        float: right;
        height: 350px;
        width: 400px;
 }
 @keyframes spin_tele_alida {
    from{
        transform: rotateY(0deg);
        /*-ms-transform: rotateY(0deg);*/
    }
    to{
      transform: rotateY(360deg);
     /* -ms-transform: rotateY(360deg);*/
  }
      
    }
    .tele_alida_spin{

      animation-name: spin_tele_alida;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-duration: 10s;
    }
    
    #fork_para{
        padding-left:50px;
        font-weight: bold;
        font-size: 25px;
        margin-top: 50px;
        text-align: justify;
        padding-left: 50px;
        padding-right: 500px;
     }
     #fork_img{
        float: right;
        height: 300px;
        width: 250px;
        padding-right: 100px;
 }
     #spirit_para{
        padding-left:50px;
        font-weight: bold;
        font-size: 25px;
        margin-top: 50px;
        text-align: justify;
        padding-left: 50px;
        padding-right: 450px;
     }
     #spirit_img{
        float: right;
        height: 300px;
        width: 250px;
        padding-right: 80px;
 }
 #compass_para{
    padding-left:50px;
    font-weight: bold;
    font-size: 25px;
    margin-top: 50px;
    text-align: justify;
    padding-left: 50px;
    padding-right: 300px;
 }
 #compass_img{
    float: right;
    height: 300px;
    width: 250px;
   
}
#flag_para{
    padding-left:20px;
    font-weight: bold;
    font-size: 25px;
    margin-top: 50px;
    text-align: justify;
 
 }
 #flag_img{
    float: right;
    height: 200px;
    width: 200px;
}  
@keyframes spin_flag {
    from{
        transform: rotateY(0deg);
        /*-ms-transform: rotateY(0deg);*/
    }
    to{
      transform: rotateY(360deg);
     /* -ms-transform: rotateY(360deg);*/
  }
      
    }
    .flag_spin{

      animation-name: spin_flag;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-duration: 10s;
    }
    #tape_para{
        padding-left:20px;
        font-weight: bold;
        font-size: 25px;
        margin-top: 50px;
        text-align: justify;
     
     }
     #tape_img{
        float: right;
        height: 200px;
        width: 200px;
    }  
    #back_4{
        margin-left: 700px;
        margin-top: 150px;
        height: 50px;
        width:100px;
        font-size: large;
        color: black;
        background-color: #23B2EE;
        font-weight: bold;
        border: 3px solid black;
        border-radius: 10px;
        cursor: pointer;
        }
        #next{
            margin-left: 30px;
            margin-top: 150px;
            height: 50px;
            width:100px;
            font-size: large;
            color: black;
            background-color: #23B2EE;
            font-weight: bold;
            border: 3px solid black;
            border-radius: 10px;
            cursor: pointer;
            }
            #gps_head1
            { 
            margin-top: 25px;
            padding-left: 25px;
            font-weight: bold;
            font-size: 30px;
            text-align: justify;
        }
        #gps_para1{
             
        padding-left: 55px;
        padding-right: 50px;
        font-weight: bold;
        font-size: 25px;
        text-align: justify;
        }
        #gps_head2{
            margin-top: 100px;
            padding-left: 25px;
            font-weight: bold;
            font-size: 30px;
            text-align: justify;
        }
        
        #gps_para2{
             
            padding-left: 55px;
            padding-right: 50px;
            font-weight: bold;
            font-size: 25px;
            text-align: justify;
            }
            
        #controller_img{

            float: right;
            height: 160px;
            width: 200px;
            
        }
        @keyframes spin_tri {
            from{
                transform: rotateY(0deg);
                /*-ms-transform: rotateY(0deg);*/
            }
            to{
              transform: rotateY(360deg);
             /* -ms-transform: rotateY(360deg);*/
          }
              
            }
            .tripod_spin{

              animation-name: spin_tri;
              animation-timing-function: linear;
              animation-iteration-count: infinite;
              animation-duration: 10s;
            }
            @keyframes spin_con {
                from{
                    transform: rotateY(0deg);
                    /*-ms-transform: rotateY(0deg);*/
                }
                to{
                  transform: rotateY(360deg);
                 /* -ms-transform: rotateY(360deg);*/
              }
                  
                }
                .control_spin{
    
                  animation-name: spin_con;
                  animation-timing-function:linear;
                  animation-iteration-count: infinite;
                  animation-duration: 4s;
                }
        #receiver_img
        {
            float: right;
            height: 150px;
            width: 220px;
        }
        @keyframes spin_rec {
            from{
                transform: rotateY(0deg);
                /*-ms-transform: rotateY(0deg);*/
            }
            to{
              transform: rotateY(360deg);
             /* -ms-transform: rotateY(360deg);*/
          }
              
            }
            .receiver_spin{

              animation-name: spin_rec;
              animation-timing-function: linear;
              animation-iteration-count: infinite;
              animation-duration: 10s;
            }
            @keyframes spin_bat {
                from{
                    transform: rotateY(0deg);
                    /*-ms-transform: rotateY(0deg);*/
                }
                to{
                  transform: rotateY(360deg);
                 /* -ms-transform: rotateY(360deg);*/
              }
                  
                }
                .battery_spin{
    
                  animation-name: spin_bat;
                  animation-timing-function: linear;
                  animation-iteration-count: infinite;
                  animation-duration: 10s;
                }
        
        #back_cr
        {
            margin-left: 620px;
            margin-top: 205px;
            height: 50px;
            width:100px;
            font-size: large;
            color: black;
            background-color: #23B2EE;
            font-weight: bold;
            border: 3px solid black;
            border-radius: 10px;
            cursor: pointer;
            float: left;
            }
        #next_cr
        {
            margin-left: 40px;
            margin-top: 109px;
            height: 50px;
            width:100px;
            font-size: medium;
            font-size: large;
            background-color: #23B2EE;
            font-weight: bold;
            border: 3px solid black;
            border-radius: 10px;
            cursor: pointer;
            float: left;
            }
            #back_bt
            {
                margin-left: 620px;
                margin-top: 240px;
                height: 50px;
                width:100px;
                font-size: large;
                color: black;
                background-color: #23B2EE;
                font-weight: bold;
                border: 3px solid black;
                border-radius: 10px;
                cursor: pointer;
                float: left;
                }
            #next_bt
            {
                margin-left: 40px;
                margin-top: 109px;
                height: 50px;
                width:100px;
                font-size: large;
                color: black;
                background-color: #23B2EE;
                font-weight: bold;
                border: 3px solid black;
                border-radius: 10px;
                cursor: pointer;
                float: left;
                }
                #geogps_head
                { 
                margin-top: 25px;
                padding-left: 25px;
                font-weight: bold;
                font-size: 28px;
                text-align: justify;
            }
                #geogps_img{

                    height:300px;
                    width:300px;
                    margin-left: 350px;
                    
                }
                @keyframes spin_geo {
                  from{
                      transform: rotateY(0deg);
                      /*-ms-transform: rotateY(0deg);*/
                  }
                  to{
                    transform: rotateY(360deg);
                   /* -ms-transform: rotateY(360deg);*/
                }
                    
                  }
                  .imagespin{

                    animation-name: spin_geo;
                    animation-timing-function: linear;
                    animation-iteration-count: infinite;
                    animation-duration: 10s;
                  }
                #geogps_para{
                    padding-left: 55px;
                    padding-right: 50px;
                    font-weight: bold;
                    font-size:25px;
                    text-align: justify;
                    margin-top: 20px;

                }
                #back_geogps
            {
                margin-left: 620px;
                margin-top: 100px;
                height: 50px;
                width:100px;
                font-size: large;
                color: black;
                background-color: #23B2EE;
                font-weight: bold;
                border: 3px solid black;
                border-radius: 10px;
                cursor: pointer;
                float: left;
                }
            #next_geogps
            {
                margin-left: 40px;
                margin-top: 100px;
                height: 50px;
                width:100px;
                font-size: large;
                color: black;
                background-color: #23B2EE;
                font-weight: bold;
                border: 3px solid black;
                border-radius: 10px;
                cursor: pointer;
                float: left;
                }
                #navgps_head
                { 
                margin-top: 25px;
                padding-left: 25px;
                font-weight: bold;
                font-size: 28px;
                text-align: justify;
            }
                #navgps_img{

                    height:300px;
                    width:300px;
                    margin-left: 350px;
                    
                }
                #navgps_para{
                    padding-left: 55px;
                    padding-right: 50px;
                    font-weight: bold;
                    font-size: 25px;
                    text-align: justify;
                    margin-top: 20px;

                }
                #back_navgps
            {
                margin-left: 620px;
                margin-top: 100px;
                height: 50px;
                width:100px;
                font-size: large;
                color: black;
                background-color: #222222;
                font-weight: bold;
                border: 3px solid black;
                border-radius: 10px;
                cursor: pointer;
                float: left;
                }
            #next_navgps
            {
                margin-left: 40px;
                margin-top: 100px;
                height: 50px;
                width:100px;
                font-size: large;
                color: black;
                background-color: #222222;
                font-weight: bold;
                border: 3px solid black;
                border-radius: 10px;
                cursor: pointer;
                float: left;
                }
                @keyframes spin_nav {
                    from{
                        transform: rotateY(0deg);
                        /*-ms-transform: rotateY(0deg);*/
                    }
                    to{
                      transform: rotateY(360deg);
                     /* -ms-transform: rotateY(360deg);*/
                  }
                      
                    }
                    .nav_spin{
  
                      animation-name: spin_nav;
                      animation-timing-function: linear;
                      animation-iteration-count: infinite;
                      animation-duration: 10s;
                    }
                #satellite1_img{

                    height:200px;
                    width:400px;
                    margin-left: 100px;
                    float: left;
                    margin-top: 50px;
                    
                }
                #satellite2_img{

                    height:200px;
                    width:400px;
                    margin-top: 50px;
                    margin-left: 100px;
                    float: left;
                    
                }
                @keyframes spin_sat1 {
                    from{
                        transform: rotateY(0deg);
                        /*-ms-transform: rotateY(0deg);*/
                    }
                    to{
                      transform: rotateY(360deg);
                     /* -ms-transform: rotateY(360deg);*/
                  }
                      
                    }
                    .satellite1_spin{
        
                        animation-name: spin_sat1;
                        animation-timing-function:linear;
                        animation-iteration-count: infinite;
                        animation-duration: 30s;
                      }
                    @keyframes spin_sat2 {
                        from{
                            transform: rotateY(0deg);
                            /*-ms-transform: rotateY(0deg);*/
                        }
                        to{
                          transform: rotateY(360deg);
                         /* -ms-transform: rotateY(360deg);*/
                      }
                          
                        }
                    
                    .satellite2_spin{
        
                        animation-name: spin_sat2;
                        animation-timing-function:linear;
                        animation-iteration-count: infinite;
                        animation-duration: 5s;
                      }
                #back_satellite
                {
                    margin-left: 820px;
                    margin-top: 200px;
                    height: 50px;
                    width:100px;
                    font-size: large;
                    color: white;
                    background-color: #222222;
                    font-weight: bold;
                    border: 3px solid black;
                    border-radius: 10px;
                    cursor: pointer;
                    float: left;
                    }
                
            
                    #back_sheet{
                        margin-left: 700px;
                        margin-top: 80px;
                        height: 50px;
                        width:100px;
                        font-size: large;
                        color: black;
                        background-color: #23B2EE;
                        font-weight: bold;
                        border: 3px solid black;
                        border-radius: 10px;
                        cursor: pointer;
                        }
                        #next_stand{
                            margin-left: 30px;
                            margin-top: 80px;
                            height: 50px;
                            width:100px;
                            font-size: large;
                            color: black;
                            background-color: #23B2EE;
                            font-weight: bold;
                            border: 3px solid black;
                            border-radius: 10px;
                            cursor: pointer;
                            }  
                            
                    #back_plane_alida{
                        margin-left: 700px;
                        margin-top: 50px;
                        height: 50px;
                        width:100px;
                        font-size: large;
                        color: black;
                        background-color: #23B2EE;
                        font-weight: bold;
                        border: 3px solid black;
                        border-radius: 10px;
                        cursor: pointer;
                        }
                        #next_plane_alida{
                            margin-left: 30px;
                            margin-top: 50px;
                            height: 50px;
                            width:100px;
                            font-size: large;
                            color: black;
                            background-color: #23B2EE;
                            font-weight: bold;
                            border: 3px solid black;
                            border-radius: 10px;
                            cursor: pointer;
                            }  
                            #back_fork{
                                margin-left: 700px;
                                margin-top: 130px;
                                height: 50px;
                                width:100px;
                                font-size: large;
                                color: black;
                                background-color: #23B2EE;
                                font-weight: bold;
                                border: 3px solid black;
                                border-radius: 10px;
                                cursor: pointer;
                                }
                                #next_fork{
                                    margin-left: 30px;
                                    margin-top: 130px;
                                    height: 50px;
                                    width:100px;
                                    font-size: large;
                                    color: black;
                                    background-color: #23B2EE;
                                    font-weight: bold;
                                    border: 3px solid black;
                                    border-radius: 10px;
                                    cursor: pointer;
                                    }
                                    #next_tape{
                                        margin-left:700px;
                                        margin-top: 150px;
                                        height: 50px;
                                        width:100px;
                                        font-size: large;
                                        color: black;
                                        background-color: #23B2EE;
                                        font-weight: bold;
                                        border: 3px solid black;
                                        border-radius: 10px;
                                        cursor: pointer;
                                        
                                        }  
                                        #finish_tape{
                                            margin-top: 150px;
                                            margin-left:30px;
                                            float:right;
                                            height: 50px;
                                            width:100px;
                                            font-size: large;
                                            color: black;
                                            background-color: #23B2EE;
                                            font-weight: bold;
                                            border: 3px solid black;
                                            border-radius: 10px;
                                            cursor: pointer;
                                            position:absolute;
                                            
                                            }