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

*{
       font-family: "arial", "verdana", "sans-serif"; 
}

body{
    height: 100%; width: 100%;
    background-color: rgb(255,255,255);
        }
    #bodyimage{
            
       position:absolute;
        max-width: 80%;
        height: auto;
        opacity: 0.2;
        margin-left: 10%
       
    }

#headerimage{
    width:90%;
    height: auto;
   margin-left: 5%;
    margin-right: 5%;
}
    .skip {
       position: absolute;
        top: -1000px;
        left: -1000px;
        height: 1px;
        width: 1px;
        text-align: left;
        overflow: hidden;
    }
    a.skip:active,
    a.skip:focus,
    a.skip:hover {
        left: 0;
        top: 0;
        width: auto;
        height: auto;
        overflow: visible;
    }

.topnav {
  overflow: hidden;
  background-color: rgb(54,117,136);
    margin-left: 5%;
    margin-right: 5%;
}

.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1.5em;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color:#253C48;
  color:  rgb(54,117,136);
}

.topnav .icon {
  display: none;
}
   
 

#Geoff{
    background-color: #253C48;
     margin-left: 10%;
    margin-right: 10%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 1%;
    padding-right: 1%;
    font-size: 1.5em;  
}
  
 
p{
  color:white;
   text-align: center;
    font-weight: 700;
}

#image1{
    padding-right: 10px; 
    float:left;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    height:auto;    
}
#image2{
    padding-right: 2%; 
    float:left;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: auto;      
}
#image3{
     padding-right: 10px; 
    float:left;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    height: auto;     
}

#c1{
    float:left;
    width: 100%;
    margin-top: 5%;
  
   
}
#c2{
 float:left;
   width: 100%; 
  
}

#c3{
    float: left;
   width: 100%;
}
#c4{
    float: left;
   width: 100%;
}

section{
    width: 100%;
    height: 100%;
    float: left;
    padding-top: 0;
    padding-bottom: 60px;
}
#about{
       color:rgb(54,117,136);
    text-align: center;
    font-size: 3.2em;
    font-family:monospace; 
    font-weight: bolder;
}
    #G1{
      
    font-size: 1.8em;
     color:rgb(54,117,136); 
        text-align: center;
    }
#computer{
      text-align: center;
    font-size: 1.5em;
     color:rgb(54,117,136);
}
#services{
    color:rgb(54,117,136);
  text-align: center;
    font-family:monospace; 
    font-weight: bolder;
    font-size: 3.2em;;
    margin-top: 5%;
}
#security{
    text-align: center;
    font-size: 1.5em;
 color:rgb(54,117,136);
}
#building{
     text-align: center;
    padding-left: 2%;
    padding-right: 2%;
     font-size: 1.5em;
     color:rgb(54,117,136);
}
#deliver{
   text-align: center;
     font-size: 1.5em;
     color:rgb(54,117,136);
}
#testimonials{
     color:rgb(54,117,136);
     text-align: center;
    font-family:monospace; 
    font-weight: bolder;
    font-size: 3.2em;
}
#contact{
     color:rgb(54,117,136);
  text-align: center;
    font-family:monospace; 
    font-weight: bolder;
    font-size: 3.2em;
    
}

#popup{
 margin-left: 44.8%;
     font-size: 1.8em;
     color:rgb(54,117,136);
    background-color: rgb(153,255,248);
    border-style: solid;
    padding-bottom: 1%;
    padding-top: 1%;
    padding-left: 1%;
    padding-right: 1%;
}

#P1{ 
  color:rgb(51,102,102);
    padding-top: 2%;
    padding-left: 2%;
    padding-right: 2%;
    margin-left: 10%;
    margin-right: 10%;
    padding-bottom: 2%;
   text-align: justify;
    background-color:rgb(153,255,248);
    font-weight:500;
    font-size: 1.5em;
    
}
#P2{
    color:rgb(51,102,102);
    padding-top: 2%;
    padding-left: 2%;
    padding-right: 2%;
    margin-left: 10%;
    margin-right: 10%;
    padding-bottom: 2%;
   text-align: justify;
    background-color:rgb(153,255,248);
    font-weight:500;
     font-size: 1.5em;
    
} 

#P3{
     color:rgb(51,102,102);
    padding-top: 2%;
    padding-left: 2%;
    padding-right: 2%;
    margin-left: 15%;
    margin-right: 10%;
    padding-bottom: 2%;
   text-align: justify;
    background-color:rgb(153,255,248);
    font-weight:500;
     font-size: 1.5em;
    
}

#P4{
    color:white;
    padding-top: 2%;
    margin-left: 10%;
    margin-right: 10%;
    padding-bottom: 2%;
    padding-right: 2%;
  padding-left: 5%;
  background-color: #007791;
     font-weight:800;
    font-size: 1.5em;
}
#email{
   color:white; 
}
#phone{
    color:white;
}
    
#image4{
    display: block;
    margin-left: auto;
    margin-right: auto;    
}   

#image5{
  
   align-content: center;
    display: block;
    margin-left: auto;
    margin-right: auto;

  width:40%;
    height:auto;   
}

    
#myBtn {
  
  position: fixed;
  bottom: 5%;
  right: 5%;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color:rgb(54,117,136); 
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

.footer{
position: fixed;
    width:100%;
   margin-top: auto;
  bottom:0;
   margin-right: 10%;
    background-color: rgb(54,117,136); 
   text-align: center;
    font-size: 1em;
    font-style: italic;
}
  

}

@media screen and (max-width: 640px) {
    
       *{
       font-family: "arial", "verdana", "sans-serif"; 
} 
    


body{
    height: 100%; width: 100%;
    background-color: rgb(255,255,255);
        }

    .skip {
       position: absolute;
        top: -1000px;
        left: -1000px;
        height: 1px;
        width: 1px;
        text-align: left;
        overflow: hidden;
    }
    a.skip:active,
    a.skip:focus,
    a.skip:hover {
        left: 0;
        top: 0;
        width: auto;
        height: auto;
        overflow: visible;
    }
    
   .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }


  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    }
    #headerimage{
        display: none;
    }   

.topnav {
  overflow: hidden;
  background-color: rgb(54,117,136);
}

.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1.2em;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color:#253C48;
  color:  rgb(54,117,136);
}

.topnav .icon {
  display: none;
}
#c1{
    float:left;
    width: 100%;
  
   
}
#c2{
 float:left;
   width: 100%; 
  
}

#c3{
    float: left;
   width: 100%;
}
 #c4{
    float: left;
   width: 100%;
}   


#Geoff{
    background-color: #253C48;
     margin-left: 10%;
    margin-right: 10%;
    padding-top: 1%;
    padding-left: 1%;
    padding-right: 1%;
    font-size: 1.2em;
    text-align: justify;
    
}
     #G1{
      
    font-size: 1.5em;
     color:rgb(54,117,136); 
        text-align: center;
    }   

p{
  color:white;
   text-align: center;
    font-weight: 700;
}

#image1{
    padding-right: 5%; 
    float:left;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height:auto;    
}
#image2{
    padding-right: 10%; 
    float:left;
    display: block;
    margin-left: auto;
    margin-right: 0%;
    width: 100%;
    height: auto;      
}
#image3{
     padding-right: 10px; 
    float:left;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: 100%;     
}


section{
    width: 100%;
    height: 100%;
    float: left;
    padding-top: 0;
    padding-bottom: 60px;
}
#about{
       color:rgb(54,117,136);
       color:rgb(54,117,136);
    text-align: center;
    font-size: 40px;
    font-family:monospace; 
    font-weight: bolder;
    font-size: 3em; 
}

#services{
    color:rgb(54,117,136);
   text-align: center;
    font-family:monospace; 
    font-weight: bolder;
    font-size: 3em;
}
   #computer{
    text-align: center;
    color:rgb(54,117,136);
       font-size: 1.2em;
       padding-left: 2%;
   }   
    
#security{
  text-align: center;
     color:rgb(54,117,136);
    font-size: 1.2em;
  
}
#building{
    text-align: center;
     color:rgb(54,117,136);
    font-size: 1.2em;
   
}
#deliver{
      text-align: center;
     color:rgb(54,117,136);
     font-size: 1.2em;
}
#testimonials{
     color:rgb(54,117,136);
  text-align: center;
    font-family:monospace; 
    font-weight: bolder;
    font-size: 3em;
}
#contact{
     color:rgb(54,117,136);
    text-align: center;
    font-family:monospace; 
    font-weight: bolder;
    font-size: 3em;
   
}

#popup{
 margin-left: 33%;
     font-size: 1.8em;
     color:rgb(54,117,136);
    background-color: rgb(153,255,248);
    border-style: solid;
    padding-bottom: 1%;
    padding-top: 1%;
    padding-left: 1%;
    padding-right: 1%;
}

#P1{ 
  color:rgb(51,102,102);
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 2%;
    padding-right: 2%;
    margin-left:10%;
    margin-right:10%;
   text-align: justify;
    background-color:rgb(153,255,248);
    font-weight:500;
    font-size: 1.3em;
    
}
#P2{
    color:rgb(51,102,102);
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 2%;
    padding-right: 2%;
    margin-left: 10%;
    margin-right: 10%;
   text-align: justify;
    background-color:rgb(153,255,248);
    font-weight:500;
     font-size: 1.3em;
    
} 

#P3{
     color:rgb(51,102,102);
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 2%;
    padding-right: 2%;
    margin-left: 10%;
    margin-right: 10%;
   text-align: justify;
    background-color:rgb(153,255,248);
   font-weight:  500;
     font-size: 1.3em;
    
}

#P4{
    color:white;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-left: 10%;
    margin-right: 10%;
  padding-left: 5%;
  background-color: #007791;
     font-weight:800;
}
#email{
   color:white; 
}
#phone{
    color:white;
}
    
#image4{
    display: block;
    margin-left: auto;
    margin-right: auto;   
    margin-top: 0%;
margin-bottom: 0%;
    }   

#image5{
    padding-right: 1%; 
   align-content: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height:auto; 
    width: 80%;
}

#myBtn {
  
  position: fixed;
  bottom: 3%;
  right: .5%;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color:rgb(54,117,136); 
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}


.footer{
position: fixed;
    width:100%;
   margin-top: auto;
  bottom:0;
   margin-right: 10%;
    background-color: rgb(54,117,136); 
   text-align: center;
    font-size: 1em;
    font-style: italic;
}
  
} 
     

     



@media screen and (min-width: 641px) and (max-width: 1007px){
    
    
    *{
       font-family: "arial", "verdana", "sans-serif"; 
}

body{
    height: 100%; width: 100%;
    background-color: rgb(255,255,255);
        }


#headerimage{
    width:80%;
    height: auto;
   padding-left: 10%;
}
    .skip {
       position: absolute;
        top: -1000px;
        left: -1000px;
        height: 1px;
        width: 1px;
        text-align: left;
        overflow: hidden;
         color: white;
    }
    a.skip:active,
    a.skip:focus,
    a.skip:hover {
        left: 0;
        top: 0;
        width: auto;
        height: auto;
        overflow: visible;
       
    }

.topnav {
  overflow: hidden;
  background-color: rgb(54,117,136);
    width: 80%;
    margin-left: 10%;
}

.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 1.5%; 
  text-decoration: none;
  font-size: 1.2em;
    
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color:#253C48;
  color:  rgb(54,117,136);
}

.topnav .icon {
  display: none;
}
     #G1{
      
    font-size: 1.5em;
     color:rgb(54,117,136); 
        padding-left: 2%;
         text-align: center;
    }   


#Geoff{
    background-color: #253C48;
     margin-left: 10%;
    margin-right: 10%;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 1%;
    padding-right: 1%;
    font-size: 1.2em;
    
}

p{
  color:white;
   text-align: center;
    font-weight: 700;
}

#image1{
    padding-right: 10px; 
    float:left;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height:auto;    
}
#image2{
     padding-right: 5%; 
    float:left;
    display: block;
    margin-left: auto;
    margin-right: 0%;
    width: 50%;
    height: auto;   
    }
#image3{
     padding-right: 10px; 
    float:left;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    height: 50%;     
}

#c1{
    float:left;
    width: 100%;
  
   
}
#c2{
 float:left;
   width: 100%; 
  
}

#c3{
    float: left;
   width: 100%;
}
    
#c4{
    float: left;
   width: 100%;
}

section{
    width: 100%;
    height: 100%;
    float: left;
    padding-top: 0;
    padding-bottom: 60px;
}
#about{
       color:rgb(54,117,136);
    font-family:monospace; 
    font-weight: bolder;
    font-size: 3em; 
    text-align:center;
}
#computer{
       margin-left: 1%;
     margin-right: 1%;
    text-align: center;
    color:rgb(54,117,136);
    font-size: 1.5em;
}
#services{
    color:rgb(54,117,136);
   text-align: center;
    font-family:monospace; 
    font-weight: bolder;
    font-size: 3em;
}
#security{
      margin-left: 1%;
     margin-right: 1%;
    text-align: center;
    color:rgb(54,117,136);
        font-size: 1.5em;

}
#building{
   margin-left: 1%;
     margin-right: 1%;
    text-align: center;
    color:rgb(54,117,136);
        font-size: 1.5em;

}
#deliver{
     margin-left: 1%;
     margin-right: 1%;
    text-align: center;
    color:rgb(54,117,136);
        font-size: 1.5em;

}
#testimonials{
     color:rgb(54,117,136);
    text-align: center;
    font-family:monospace; 
    font-weight: bolder;
    font-size: 3em;
}
#contact{
     color:rgb(54,117,136);
    text-align: center;
    font-family:monospace; 
    font-weight: bolder;
    font-size: 3em;
    
}


#P1{ 
  color:rgb(51,102,102);
    padding-top: 2%;
    padding-left: 2%;
    padding-right: 2%;
    margin-left: 10%;
    margin-right: 10%;
    padding-bottom: 2%;
   text-align: justify;
    background-color:rgb(153,255,248);
    font-weight:500;
    font-size: 1.5em;
    
}
#P2{
    color:rgb(51,102,102);
    padding-top: 2%;
    padding-left: 2%;
    padding-right: 2%;
    margin-left: 10%;
    margin-right: 10%;
    padding-bottom: 2%;
   text-align: justify;
    background-color:rgb(153,255,248);
    font-weight:500;
     font-size: 1.5em;
    
} 

#P3{
     color:rgb(51,102,102);
    padding-top: 2%;
    padding-left: 2%;
    padding-right: 2%;
    margin-left: 10%;
    margin-right: 10%;
    padding-bottom: 2%;
   text-align: justify;
    background-color:rgb(153,255,248);
    font-weight:500;
     font-size: 1.5em;
    
}

#P4{
    color:white;
    padding-top: 2%;
    margin-left: 10%;
    margin-right: 10%;
    padding-bottom: 2%;
    padding-right: 10%;
  padding-left: 5%;
  background-color: #007791;
     font-weight:800;
    font-size: 1.5em;
}
#email{
   color:white; 
}
#phone{
    color:white;
}
    
#image4{
    margin-top: 0%;
 
    display: block;
    margin-left: auto;
    margin-right: auto;    
}   

#image5{
     
   align-content: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1%;
    height:auto;    
}

#popup{
 margin-left: 37%;
     font-size: 1.8em;
     color:rgb(54,117,136);
    background-color:rgb(153,255,248);
    border-style: solid;
    padding-bottom: 1%;
    padding-top: 1%;
    padding-left: 1%;
    padding-right: 1%;
}

#myBtn {
  
  position: fixed;
  bottom: 5%;
  right: 1%;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color:rgb(54,117,136); 
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

.footer{
position: fixed;
    width:100%;
   margin-top: auto;
  bottom:0;
   margin-right: 10%;
    background-color: rgb(54,117,136); 
   text-align: center;
    font-size: 1em;
    font-style: italic;
}
      
 
    
}