* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.icon {
        width: 100%;
      }

.loginstatus {
              width: 50%;
              position: fixed;
              bottom: 20%;
              left: 31%;
              font-family: 'Anton', Impact, Charcoal, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
              font-size: 16px;
             }        
 
.wrap1 {
        width:100%;
        height: 28%;
        position: fixed;
        top: 0px;
        left: 0px;
        display: grid;
        grid-template-columns: 1fr;
        opacity: 0.9;
        z-index: 1;
       }

.seg1 {
    width: 100%;
    height: auto;
    grid-column-start: 1;
    grid-column-end: 4;
    background-color: rgb(88, 88, 136);
    }

.seg2 {
    width: 100%;
    height: auto;
    grid-column-start: 1;
    grid-column-end: 4;
    margin: 1% 0% 0% 0%;
    background-color: #9a9ab1;
    }

.seg3 {
    width: 100%;
    height: auto;
    grid-column-start: 1;
    grid-column-end: 4;
    margin: 7% 0% 0% 0%;
    }

.seg3A {
    width: 100%;
    height: auto;
    grid-column-start: 1;
    grid-column-end: 2;
    margin: 5% 0% 0% 0%;
    }

.seg4 {
    width: 100%;
    height: auto;
    grid-column-start: 1;
    grid-column-end: 4;
    padding: 0;
    margin: 0;
    }

.seg4A {
    width: 100%;
    height: auto;
    grid-column-start: 1;
    grid-column-end: 4;
    margin: 2% 0% 0% 0%;
    }

.things {
         width: 80%;
         height: auto;
         display: none;
         position: absolute;
         top: 36%;
         left: 10%;
         border-radius: 4px;
         background-color: rgb(88, 88, 136) ;
         opacity: 0.95;
         z-index: 1;
        }

.things2 {
         width: 80%;
         height: auto;
         display: none;
         position: absolute;
         top: 36%;
         left: 10%;
         border-radius: 4px;
         background-color: rgb(88, 88, 136) ;
         opacity: 0.95;
         z-index: 1;
         }        

.things3 {
          width: 80%;
          height: auto;
          display: none;
          position: absolute;
          top: 36%;
          left: 10%;
          border-radius: 4px;
          background-color: rgb(88, 88, 136) ;
          opacity: 0.95;
          z-index: 1;
          }

.pop-up {
          padding: 14px;
          font-family: 'Anton',Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif ;
          font-size: 14px;
          color: #5bded2;
          /* color: black; */
          text-decoration: none;
        }

.X-out {
        width: 20%;
        height: 30px;
        position: inherit;
        bottom: 6%;
        left: 80%;   
        cursor: pointer;
        }      
       
.close {
        font-family:  'Anton', Impact, Charcoal, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size: 26px;
        color: black;
        text-decoration: none;
        z-index: 1;
       }       
        
#interact_2 {
             width: 100%;
             margin: 0;
             padding: 0;  
            }  

#logo_1 {
         width: 94%;
         height: 100%;
         display: block;
         padding: 0px 0px 0px 0px;         
        }

     .list {
            float: left;
            list-style: none;
            position: relative;
            padding: 2% 0% 0% 7%;
           }
           
   ul li a {
            display: block;
            margin: 0% 0% 0% 0%;             
            padding: 0% 0% 10% 0%;             
            font-family: 'Anton', Impact, Charcoal, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            color: black;
            font-size: 16px;
            text-decoration: none;
            }    
            
   .signup {
            
           }         
     
   .sign_up {
             padding: 4px;
             position: relative;
             float: right;
             margin-right: 8%;
             font-family: 'Anton', Impact, Charcoal, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
             font-size: 23px;
             list-style: none;
             color: black;
             text-decoration: none;
             background-color: #caf3f3;
             border-radius: 4px;
             }   
             
    .login_cont {
                 width:100%;
                 height: 36%;
                 position: fixed;
                 top: 36%;
                 left: 0px;
                 display: grid;
                 grid-template-columns: 1fr 2fr 1fr;
                }


.log_control {
              padding: 0;
             }             

    .info-area {
                margin: 8% 0% 0% 0%;
                padding: 4px; 
                border-width: 0px;
                border-radius: 4px;
                font-size: 18px;
                background-color: #caf3f3;
               } 



    .login-area {
                margin: 9% 0% 0% 34.33%;
                padding: 11px; 
                border-width: 0px;
                border-radius: 4px;
                font-family: 'Anton', Impact, Charcoal, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
                font-size: 21px;
                color: white;
                background-color: black;
               }                  
       
.log-area {
           
           margin: 0;
           padding: 10px; 
           position: fixed;
           top: 27%;
           left: 8%;
           z-index: 1;
           border-width: 0px;
           border-radius: 4px;
           font-family: 'Anton', Impact, Charcoal, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
           font-size: 13px;
           color: white;
           background-color: black;
          }        
                 
.eyeballs {
           width: 100%;
           margin: 361px 0px 0px 0px;
           display: none;
          }   
                  
.wrapper {
          width:100%;
          height: 350px;
          position: fixed;
          top: 4%;
          left: 0px;
          }            
           
.section {
          height: 300px; 
          margin: 0px 0px 0px 0px;
          padding: 0px 6px 0px 6px;
         }
           
.grid_seg_1 {
             border-radius: 6px;
             padding: 1px;
            }   
                           
.SignMeUp {
           height:340px;
           border-radius: 6px;
           padding: 10px;
           background-color: rgb(88, 88, 136);
           opacity: 0.9;
          } 
               
.h1div {
        width: 70%;
        margin: 0px 0px 0px 48px;
        padding:  4px 0px 4px 0px;
        border: 2px solid black;
        border-radius: 4px;
       }
              
 h1 {
     font-family: 'Anton', Impact, Charcoal, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
     font-size: 20px;
     text-align: center;
     }  
               
.form_1 {
         margin: 0px 0px 0px 0px;
         padding: 10px 0px 0px 0px;
        }          
                
.info-area_2 {
              margin: 11px 36px 17px 29px;
              padding: 6px 4px 4px 4px; 
              border-width: 0px;
              border-radius: 4px;
              font-size: 12px;
              background-color: #caf3f3;
             }  
                          
.log-area_2 {
              padding: 4px; 
              position: absolute;
              bottom: 10%;
              right: 8%;
              border-width: 0px;
              border-radius: 4px;
              font-family: 'Anton', Impact, Charcoal, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
              font-size: 29px;
              color: white;
              background-color: black;
            }                     

.log-area_2:hover {
                   background-color: #9a9ab1;
                   border-radius: 2px; 
                   border: 1px solid white;
                  }   

.back {
       padding: 4px;
       position: absolute;
       bottom: 10%;
       left: 15%;
       font-family: 'Anton', Impact, Charcoal, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
       font-size: 29px;
       list-style: none;
       color: black;
       text-decoration: none;
       background-color: #caf3f3;
       border-radius: 4px;
      }              
      
.back_2 {
        margin: 0% 0% 0% 0%;
        padding: 4px;
        position: fixed;
        top: 28%;
        right: 8%;
        z-index: 1;
        font-family: 'Anton', Impact, Charcoal, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size: 24px;
        list-style: none;
        color: black;
        text-decoration: none;
        background-color: #caf3f3;
        border-radius: 4px;
       }              
                  
.boss {
       width: 100%;
       padding: 68px 0px 0px 0px;
      }   
                    
.containment {
              width: 90%;
              height: 300px;
              margin: 16px 0px 0px 0px ;
              position: absolute;
              top: 27%;
              left: 5%; 
              border-radius: 4px;
            }   

.grid_seg_2 {
              width: 100%;
              height: 54px;
              margin: 8% 0% 0% 0%;
              display: inline-flex;
              border-radius: 6px;
              padding: 2%;
              background-color: #9a9ab1;
              opacity: 0.9;
            }  
   
h3 {
    width: 100%;
    padding: 0% 0% 0% 12%;
    font-family: 'Anton', Impact, Charcoal, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 26px;
   }    

.projects {
           width: 46%;
          }    
   
.padlock {
          width: 64%;
          height: 100%;
          margin: 0% 0% 0% 23%;
         }
   
.padlock:hover {
                border: 2px solid black;
                border-radius: 2px; 
                opacity: 0.6;
               }               
            
.containment_2 {
                width: 95%;
                height: 17%;
                margin: 10px 0px 0px 10px ;
                position: fixed;
                bottom: 46px;
                left: 0px; 
                background-color: #9a9ab1;
                opacity: 0.9;
                border-radius: 4px;
               }            

.welcome {
          width: 100%;
          height: 100%;
          padding: 6px 0px 0px 0px;
         }

  .Title_1 {
            width: 92%;
            position: fixed;
            top: 28%;
            left: 33%;
            font-family: 'Anton', Impact, Charcoal, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
            font-size: 30px; 
           }   
           
        

.containment_3 {
                width: 95%;
                height: 300px;
                margin: 0px 0px 0px 8px ;
                position: absolute;
                top: 38%;
                left: 0px; 
                border-radius: 4px;
                }    
                
.videos {
         width: 100%;
         height: 258px;
         border: 3px solid #9a9ab1;
         border-radius: 4px;
         padding: 5px;
        }         
           
#vid_1 {
        width: 100%;
        border-radius:  4px; 
        margin-top: 10px;         
       }
           
#start_stop {
             width: 108px;
             height: 30px;
             margin: 1% 0% 0% 31.3%;
             padding: 2px;
             background-color: #9a9ab1;
             color: white;
             border-radius: 2px;
             border: none;
             }                    

.containment_4 {
                width: 95%;
                height: 50%;
                margin: 10px 0px 0px 10px ;
                position: fixed;
                top: 38%;
                left: 0px; 
                background-color: #9a9ab1;
                opacity: 0.9;
                border-radius: 4px;
               }     
               
.dialog {
         width: 92%;
         padding: 7px 0px 0px 26px ;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         font-size: 14px; 
        }                      

.letsdoit {
           margin: 10% 0% 0% 36%;
           padding: 4px;
           float: left;
           font-family: 'Anton', Impact, Charcoal, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
           font-size: 23px;
           list-style: none;
           color: black;
           text-decoration: none;
           background-color: #caf3f3;
           border-radius: 4px;
          }

         .footer {
                  width: 100%;
                  height: 20px;
                  position: fixed;
                  bottom: 0px;
                  left: 0px;
                 }      
                 
/* settings for 320px phones  */
@media only screen and (max-width: 350px) {

  
}
                 

@media only screen and (min-width: 400px) {

        /* pop-up re-scale */



   /* index.php page re-scale */

    ul li a {
            font-size: 20px;
            }    

    .sign_up {
              font-size: 29px;
             }        
    
   .loginstatus {
                 font-size: 20px;
                }
                
     /* singin.php page re-scale */

     .wrapper {
               height: 352px;
              }
                  
     h1 {
         font-size: 24px;
        }   

     .back {
            position: absolute;
            bottom: 6%;
            left: 11%; 
           }         

     .log-area_2 {
                  position: absolute;
                  bottom: 6%;
                  right: 10%; 
                 }   

     .info-area_2 {
                   font-size: 16px;
                  }  

     /* loggedin.php page re-scale  */

     .log-area {
                font-size: 19px; 
               }

     /* Education.php page re-scale */

      .back_2 {
               top: 27.5%;
               font-size: 32px;
              }

    /* Education_V.php page re-scale */

    .videos {
             height: 286px;
            }  
            
    #start_stop {
                width: 28%;
                margin-left: 35.3%; 
                }        
    
}   

@media only screen and (min-width: 456px) {

    /* .pop-up re-scale    */

.things{
        width: 72%;
        left: 14%; 
       }

.things2 {
          width: 72%;
          left: 14%; 
         } 
         
.things3 {
          width: 72%;
          left: 14%;
         }         
  /* index.php page re-scale */
}


@media only screen and (min-width: 512px) {

          /* .pop-up re-scale    */

.things{
        width: 62%;
        left: 18%; 
       }

.things2 {
          width: 62%;
          left: 18%; 
         } 
         
.things3 {
          width: 62%;
          left: 18%;
         }         


    /* index.php page re-scale */

    ul li a {
             font-size: 26px;
            }   
    .sign_up {
              font-size: 30px;  
             }

   .login_cont {
                grid-template-columns: 1fr 1fr 1fr;
               }

   .loginstatus {
                 font-size: 24px;
                } 
                
    /* singin.php page re-scale */

    .wrapper {
               height: 380px; 
             }
                  
    h1 {
        font-size: 29px;
       }               

    .h1div {
              margin:  0 0 0 67px;
           }   
     
    .SignMeUp {
              height: 376px;
              }

    .info-area_2 {
                  font-size: 21px;
                 }

    .back {
           position: absolute;
           bottom: 6%;
           left: 9%; 
          }         
        
    .log-area_2 {
                 position: absolute;
                 bottom: 6%;
                 right: 10%; 
                }                
                 
     /* loggedin.php page re-scale  */
     
     .containment {
                   top: 31%;
                  }

    /* Education.php page re-scale */

    .Title_1 {
              top: 30%;
              font-size: 39px; 
             }

    .back_2 {
             top: 29%;
            }

    .dialog {
             font-size: 19px;
            }        

    .letsdoit {
                font-size: 30px;
                margin: 8% 0 0 38%;
              }
              
     /* Education_V.php page re-scale */
     .containment_3 {
                     height: 390px;
                     top: 42%;
                    }
     
     .videos {
              height: 390px; 
             }
        
}

@media only screen and (min-width: 586px) {
         
          /* .pop-up re-scale    */

          .things{
                width: 50%;
                left: 25%; 
               }
        
        .things2 {
                  width: 50%;
                  left: 25%; 
                 } 
                 
        .things3 {
                  width: 50%;
                  left: 25%;
                 }         

}

@media only screen and (min-width: 636px) {

     /* .pop-up re-scale    */
     
.things{
        top: 38%;
       }

.things2 {
          top: 38%;
         } 
         
.things3 {
          top: 38%;
         }        

    /* index.php page re-scale */

    .sign_up {
               font-size: 40px;
             }

   .loginstatus {
                  font-size: 31px;
                  bottom: 15%;
                 }  
                    
    /* singin.php page re-scale */
    
    .wrapper {
              height: 470px;
              top: 4%;
             }

    .section {
               height: 400px;
             }    
             
    .grid_seg_1 {
                  padding: 23px;
                }    

    .SignMeUp {
                height: 400px;
              }            
                
    h1 {
        font-size: 38px; 
       }            

       .back {
        position: absolute;
        bottom: 6%;
        left: 10%; 
        font-size: 37px;
       }         

 .log-area_2 {
              position: absolute;
              bottom: 6%;
              right: 10%; 
             }   

    .log-area_2 {
                 font-size: 41px;
                }
                
   /* loggedin.php page re-scale  */
     
   .containment {
                 width: 77%;
                 top: 32%;
                 left: 11%;
                }

    .grid_seg_2 {
                 height: 64px;
                }   
                
    h3 {
        font-size: 34px;
       }            

    .containment_2 {
                    width: 77%;
                    bottom: 46px;
                    left: 10%;
                    border-radius:6px; 
                   }

   /* Education.php page re-scale */

    .seg3A {
            margin: 10% 0 0 0;
           }

    .back_2 {
              top: 31%;
              font-size: 34px;
            }

    .Title_1 {
               top: 31%;
               font-size: 48px; 
             }

    .containment_4 {
                    top: 42%;
                   }     
                   
    /* Education_V.php page re-scale */

    .containment_3 {
                    height: 420px;
                   }

    .videos {
             height: 420px; 
            }
}          

@media only screen and (min-width: 672px) {

             /* .pop-up re-scale    */
     
.things{
        top: 43%;
       }

.things2 {
          top: 43%;
         } 
         
.things3 {
          top: 43%;
         }        

    /* singin.php page re-scale */

    .wrapper {
              height: 510px;
             }

        .info-area_2 {
                       font-size: 27px;
                     } 

        .SignMeUp {
                   height: 440px;  
                  }  
                 
    /* Education_V.php page re-scale */

    .containment_3 {
                    height: 480px;
                   }

    .videos {
             height: 480px; 
            }              

}

@media only screen and (min-width: 768px) {

      /* .pop-up re-scale    */
     
.things{
        width: 44%;
        left: 28%;
        top: 43%;
       }

.things2 {
          width: 44%;
          left: 28%;
          top: 43%;
         } 
         
.things3 {
          width: 44%;
          left: 28%;
          top: 43%;
         }        

    /* index.php page re-scale */


       #logo_1 {
                 width: 78%;
               }

       ul li a {
                font-size: 33px;
               }        
             
       .login_cont {
                    grid-template-columns: 2fr 1fr 2fr;
                   }

       .info-area {
                   font-size: 22px;   
                  }

       .loginstatus {
                     font-size: 40px;
                    }

   /* singin.php page re-scale */

       .wrapper {
                 height: 600px;
                }

       .section {
                 height: 600px;
                }        

        .grid_seg_1 {
                      padding: 23px;
                    }   
                    
        .SignMeUp {
                    height: 524px;
                  }      
                  
        .h1div {
                width: 78%;  
               }
                
        h1 {
             font-size: 48px; 
           }      
           
        .form_1 {
                 padding: 33px 0 0 0;
                }   
 
        .info-area_2 {
                      font-size: 34px;
                     }

        .back {
               font-size: 44px; 
              }             

        .log-area_2 {
                     font-size: 44px;
                    }

    /* loggedin.php page re-scale  */

     .log-area {
                font-size: 29px;
               }

     .grid_seg_2 {
                 height: 82px;
                 }  
                 
      h3 {
          font-size: 46px;
         }           

      .containment_2 {
                      height: 21%; 
                     }                 

    /* Education.php page re-scale */

       .back_2 {
                font-size: 48px;
               }

       .Title_1 {
                 font-size: 60px;
                }        

       .dialog {
                font-size: 28px;
               }      
               
        .letsdoit {
                   font-size: 45px;
                  }      
                  
    /* Education_V.php page re-scale */

        .containment_3 {
                        height: 540px;
                       }    
    
        .videos {
                 height: 536px;
                }

        #start_stop {
                     height: 52px;
                    }        

}


@media only screen and (min-width: 800px) {

       /* index.php page re-scale */   
       
       .sign_up {
              font-size: 46px;
             }

       .info-area {
                   font-size: 25px;   
                  }

       /* singin.php page re-scale */
                        
       /* loggedin.php page re-scale  */

       /* Education.php page re-scale */

       .Title_1 {
                 font-size: 64px;
                }  
                
        /* Education_V.php page re-scale */

        .videos {
                 height: 560px;
                }

}




@media only screen and (min-width: 876px) {

    /* index.php page re-scale */

    
    /* singin.php page re-scale */

         .wrapper {
                   height: 624px;
                   top: 0;
                  }

         .section {
                   height:  660px;
                  }    
                  
         .grid_seg_1 {
                      padding: 32px;
                     }   
                     
         .info-area_2 {
                       
                      }            

    /* loggedin.php page re-scale  */

    /* Education.php page re-scale */

       .Title_1 {
                font-size: 69px;
                } 

     /* Education_V.php page re-scale */

}

@media only screen and (min-width: 928px) {

         /* .pop-up re-scale    */
     
.pop-up {
         font-size: 20px;
        }

/* singin.php page re-scale */

     .wrapper {
               height: 646px;
              }

     .SignMeUp {
                height: 582px;
               }  

      .form_1 {
                padding: 33px 0 0 39px; 
              }

      .back {
             position: absolute;
             bottom: 6%;
             left: 12%; 
            }         

      .log-area_2 {
                   position: absolute;
                   bottom: 6%;
                   right: 16%; 
                  }   

}



@media only screen and (min-width: 1024px) {

          /* .pop-up re-scale    */
     


    /* index.php page re-scale */
                
    /* singin.php page re-scale */
          
    /* loggedin.php page re-scale  */

      .log-area {
                 font-size: 38px;  
                }

      .containment {
                    top: 29%;
                   }  
                   
      .grid_seg_2 {
                    height: 110px;
                  }             

    /* Education.php page re-scale */

    .Title_1 {
               font-size: 79px;
             }

    .back_2 {
             font-size: 67px;
             }

  .containment_4 {
                   margin: 10px 0 0 24px;
                 }

      .dialog {
               font-size: 36px;
              }     
              
    .letsdoit {
               padding: 16px;
               font-size: 55px;
              }          

     /* Education_V.php page re-scale */

     .containment_3 {
                      height: 680px;
                      margin: 0 0 0 24px;
                    }

      .videos {
                height: 676px;
              } 

      #start_stop {
                   height: 76px;
                   font-size: 32px; 
                  }        

}


@media only screen and (min-width: 1280px) {

              /* .pop-up re-scale    */
     
.things{
         top: 14%;
       }

.things2 {
          top: 14%;
         } 
         
.things3 {
          top: 14%;
         }        

  /* index.php page re-scale */

  .wrap1 {
          height: 12%;
          grid-template-columns: 1fr 1fr 1fr 1fr;
         }

   .seg1 {
          width: 101%;
          grid-column-start: 1;
          grid-column-end: 2;
         }     
         
   #logo_1 {
            width: 90%;
           }      

   .seg2 {
          width: 101%;
          grid-column-start: 2;
          grid-column-end: 4;
          margin: 0;
          background-color: rgb(88, 88, 136);
         }      

.list {
       padding: 4% 0 0 7%;  
      }
         
ul li a {
         font-size: 31px;
        }

   .seg3 {
          width: 100%;
          grid-column-start: 4;
          grid-column-end: 5;
          margin: 0;
          background-color: rgb(88, 88, 136);
         }   
         
   .sign_up {
             margin: 6% 25% 0 0;
             font-size: 34px;
            }    
    
   .loginstatus {
                   left: 37%;
                  }            

  /* singin.php page re-scale */

      .section {
                margin: 7% 0 0 0; 
               }

      .grid_seg_1 {
                   padding: 0 26%;
                  }

       .info-area_2 {
                     font-size: 28px;
                    }           

       .log-area_2 {
                    right: 34%;
                   }      

       .back {
              left: 33%;
             }       

  /* loggedin.php page re-scale  */

     .seg3A {
             width: 100%;
             grid-column-start: 4;
             grid-column-end: 5;
             margin: 0;
             background-color: rgb(88, 88, 136);
            }

      .log-area {
                 position: relative;
                 top: 19px;
                 margin: 0% 0% 0 15%;
                 font-size: 28px;
                }   
                
       .containment {
                     top: 0%;
                     padding: 9%;
                    }         

       .grid_seg_2 {
                    height: 90px;
                   }             
    
       h3 {
           font-size: 55px;
          }            

       .containment_2 {
                       width: 59%;
                       height: 31%;
                       margin: 0 0 0 10%;
                      }

       .welcome {
                 padding: 0%;
                }


  /* Education.php page re-scale */

      .back_2 {
               top: 12%;
               font-size: 51px;
               right: 10%;
              }

      .Title_1 {
                top: 13%;
                left: 39%;
                font-size: 64px;
               }

       .containment_4 {
                       width: 82%;
                       height: 61%;
                       top: 27%;
                       left: 8%;
                      }      
                      
       .dialog {
               font-size: 28px;
               padding: 30px 0 0 83px;
               }               

       .letsdoit {
                  font-size: 37px;
                  margin: 8% 0 0 41%;
                 }        

   /* Education_V.php page re-scale */

     .containment_3 {
                      width: 81%;
                      height: 680px;
                      top: 22%;
                      left: 8%;
                    }

     #start_stop {
                  height: 42px;
                  font-size: 25px;
                 }

}


@media only screen and (min-width: 1366px) {

      /* .pop-up re-scale    */
     
.things{
        width: 36%;
        left: 32%;
        top: 14%;
       }

.things2 {
        width: 36%;
        left: 32%;
        top: 14%;
        } 
        
.things3 {
        width: 36%;
        left: 32%;
        top: 14%;
        }   

.pop-up {
          font-size: 24px;
        }
        

       /* index.php page re-scale */
       
       #logo_1{
               width: 74%;
              }

       .list {
              padding: 4% 0 0 9%;
             }       

       ul li a {
                font-size: 30px;
               }     
               
       .sign_up {
                 font-size: 31px;
                }        
   
       .loginstatus {
                      left: 39%;
                    }

       /* singin.php page re-scale */
   
       /* loggedin.php page re-scale  */

       .log-area {
                  font-size: 21px;
                 }

         .containment {
                      width: 64%;
                      left: 17.5%;
                      }

       .grid_seg_2 {
                    height: 92px;
                    margin: 3% 0 0 0;
                   }    
                   
       .containment_2 {
                      width: 46%;
                      height: 36%;
                      left: 16.5%;
                      }            
   
       /* Education.php page re-scale */

       .back_2 {
                top: 12%;
                right: 13%;
                font-size: 38px;
               }

       /* Education_V.php page re-scale */

       .containment_3 {
                       width: 72%;
                       left: 12%;
                      }

       .videos {
                height: 654px;
               }               

       #start_stop {
                    height: 32px;
                    font-size: 24px;
                   }
   }


   @media only screen and (min-width: 1640px) {
                        
   }


   @media only screen and (min-width: 1880px) {

       /* index.php page re-scale */

       .wrap1 {
               height: 8%;
               grid-template-columns: 1fr 2fr 1fr 2fr;
              }

       .seg1{
             width: 101%;
            }       

       #logo_1 {
                width: 90%;
                margin-left: 9%;
               }      

       .seg2 {
              width: 101%;
              grid-column-start: 2;
              grid-column-end: 3;
             }     
             
       .list {
              padding: 4% 0 0 9%;
             }      

       ul li a {
                font-size: 32px;     
               }      
   
       .seg3 {
              width: 101%;
              grid-column-start: 3;
              grid-column-end: 4;
             }        

       .sign_up {
                 margin: 8% 48% 0 0;
                 font-size: 28px;
                }

       .seg4 {
              width: 101%;
              padding: 0;
              grid-column-start: 4;
              grid-column-end: 5;
              background-color: rgb(88, 88, 136);
             }      

       .login_cont {
                    width: 100%;
                    height: 36%;
                    position: relative;
                    top: 0%;
                    left: -45px;
                    display: grid; 
                    grid-template-columns: 1fr;
                   }      
             
       .info-area {
                   margin: 0 0 0 2%;
                   padding: 2px;
                   font-size: 20px; 
                   border-radius: 2px;
                  }             
                    
       .login-area {
                     margin: 3% 0 0 1%;
                     padding: 11px;
                     font-size: 23px; 
                   }       
                   
       .loginstatus {
                      bottom: 38%;
                      left: 42%;
                    }            

       /* singin.php page re-scale */

       .wrapper {
                  height: 720px;
                  padding: 0 16%;
                 }

       .grid_seg_1 {
                    padding: 0px 20%;
                   }

       .form_1 {
                 padding: 47px 0 0 39px;
               }            

       .log-area_2 {
                    bottom: 15%;
                    right: 36%;
                   }        

       .back {
              bottom: 15%;
              left: 36%;
             }             

   
       /* loggedin.php page re-scale  */
              
       .seg3A {
               grid-column-start: 3;
               grid-column-end: 5;
              }

       .log-area {
                  top: 24px; 
                  left: 28%;
                 }       

       .containment {
                     width: 57%;
                     left: 21.5%; 
                    }

       .grid_seg_2 {
                    height: 111px;
                   }
                   
       .containment_2 {
                       width: 39%;
                       height: 34%;
                       left: 20.5%;
                      } 

       .welcome {
                 padding: 7%;
                }

       /* Education.php page re-scale */

       .back_2 {
              right: 23%;
              font-size: 50px;
              }
   
       .Title_1 {
                 left: 41%;
                 font-size: 82px; 
                }

       .containment_4 {
                       width: 51%;
                       height: 61%;
                       top: 27%;
                       left: 23%;
                      }         

        /* Education_V.php page re-scale */
   
       .containment_3 {
                     width: 55%;
                     top: 26%;
                     height: 805px;
                     left: 21.5%;
                    }

       .videos {
                height: 666px; 
               }             


   }

@media only screen and (min-width: 1920px) {

    /* index.php page re-scale */

    /* singin.php page re-scale */

    /* loggedin.php page re-scale  */

     .containment_2 {
                     height: 30%;
                    }

    /* Education.php page re-scale */

     /* Education_V.php page re-scale */

}