html, body {
    
}

body{margin: 0;}

/* width */
::-webkit-scrollbar {
    width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    background: whitesmoke; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #353536; 
}

::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px     rgba(0,0,0,0.3); 
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px     rgba(0,0,0,0.5); 
}

          a {
  color:white; background:gainsboro;
  -o-transition:color .2s ease-out, background .7s ease-in;
  -ms-transition:color .2s ease-out, background .7s ease-in;
  -moz-transition:color .2s ease-out, background .7s ease-in;
  -webkit-transition:color .2s ease-out, background .7s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .1s ease-out, background .5.5s ease-in;
}

 .get_a {
  color:white; background:red;
  -o-transition:color .2s ease-out, background .2s ease-in;
  -ms-transition:color .2s ease-out, background .2s ease-in;
  -moz-transition:color .2s ease-out, background .2s ease-in;
  -webkit-transition:color .2s ease-out, background .2s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .1s ease-out, background .5.5s ease-in;
}

a:hover { color:#D47000; background:gainsboro;}
a:hover { color:#D47000; background:gainsboro;}
a:focus { color:#D47000; background:gainsboro; }
.get_a:hover { color:white; background:lightslategrey; }
hr{
color: maroon;     
}

#side_logo{    
    float: left;
    padding: 0px 3px;
    margin-bottom: 3.5px;
    text-align: left;
    margin: auto;
    height: 30px;
    width: 37px;
    margin-top: 14px;
    margin-left: 12px;
    position: absolute;
    position: fixed;
}

#sidetitle{
  font-size: 14px;
  padding: 2.5px 16px;
  text-decoration:none;
  color:#106a8c;
  position: fixed;
  position:absolute;
  font-family:arial;
  font-weight:bold;
  float:left;
  margin-bottom:20px;
  margin:15px;
  margin-left:55px;}

#sidetitle:hover{
color: #D47000;  
}

#test {
    animation: fadein 1.6s;
    -moz-animation: fadein 1.6s; /* Firefox */
    -webkit-animation: fadein 1.6s; /* Safari and Chrome */
    -o-animation: fadein 1.6s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

/* Adjustments made for the top menu */
.menu{
    font-family: Tahoma,'Helvetica','Helvetica Neue','Raleway', sans-serif;
    font-size: 14px; 
    font-weight: bold;    
    position: fixed;
    top: 0;
    width: 100%;
    background-color: gainsboro;
    border-top: 3px solid gainsboro;
    border-bottom:10px solid gainsboro;
    padding:0px 0px 10px 0px;
    margin: 0%;
    text-align: center;
    border-bottom: solid .7px #106a8c;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: right;
}  

li a {
    display: block;
    color: lightslategray;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
    
}
.menu {
    -webkit-transition-delay: 3s; /* Safari */
    transition-delay: 3s;
    position: fixed;
    
}

.navbar_logo{
  float: right;}

.b_par {
    color: lightslategrey;
    font-family: Tahoma,arial, sans-serif;
    font-weight: 100;    
    padding: 0px 0px;   
    font-size: 20px;
}


.parallax1 {
    /* The image used */
    background-image: url("template_logo_j.png");
    height: 180px;
    width:100%;
    background-color:white;
    font-size:15px;
    /* Set a specific height */
    min-height: 600px;
    min-width: 500px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.get_a{
    background-color: #D47000; /* Green */
    border: none;
    border-radius: 50px;
    color: whitesmoke;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-left: 41%;
    margin-right: 0px;
    cursor: pointer;
    font-family: arial;
  }

.image {
  opacity: 1;
  display: block;
  height: 275px;
  width: 500px;
  transition: .5s ease;
  backface-visibility: hidden;
}

#windowimg{
      /* The image used */
      background-image: url("windowcimage.jpg");
    height: 180px;
    width:100%;
    background-color:whitesmoke;
    font-size:15px;
    /* Set a specific height */
    min-height: 600px;
    min-width: 500px; 
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}
.sub_about{
  font-family: helvetica;
  color: lightslategrey;
  text-align: center;
  
}

.subhead{
font-family: impact, arial, sans-serif;
color: #106a8c;
font-size: 25px;
text-decoration: underline;
}

.info{
font-family: impact, arial, sans-serif;
color: #D47000;
font-size: 25px;
text-indent: 5px;
text-decoration: underline;
}

.service{
font-family: helvetica;
color: lightslategrey;
}

.team_img{
border-radius: 50%; 
}
 
.name{
text-align: center;
font-family: verdana;
color: #106a8c;
font-size: 25px;
    
}
 
.team{
text-align: center;
font-family: Tahoma, arial, sans-serif;
color: lightslategrey;
font-size: 19px;
}   

.our_team{
background-color: lightgrey;
}   

input[type=text], select, textarea {
    width: 98%;
    padding: 10px;
    border: 1px solid #106a8c;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    font-family: tahoma; 
    margin-left: 4px;
}
input[type=submit] {
    background-color: #106a8c;
    color: white;
    padding: 12px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: arial;
    margin-left: 4px;
}

input[type=submit]:hover {
    background-color: lightslategrey;
}

.container {
    width: 1280px;
    margin: 0px auto;
    overflow: auto;
}

.bottom{
background-color: #5b5b5b;
color: white;
text-align: center;
font-family: arial;
font-size: 17px;
}

/*Template*/

 .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid  #106a8c;
    border-radius: 50%;
      width: 215px;
      height: 210px;
 }

#l_a{width: 50%; 
  height: 550px; 
  border-radius: 0px;
  padding: 0px; 
  font-family: arial; 
  color: navy;
  float: left;
  background-color: whitesmoke;
  margin-left: 4px
}

.git{font-size: 50px; font-weight: 100;}

#r_a{
  width: 49.5%; 
  height: 550px;
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-weight:100;
  -webkit-font-smoothing:antialiased;
  color: white; 
  background-color: #778899; 
  font-size: 20px;
  float: left;
  text-align: center;
  text-indent: 4px;
} 

#a_l_a{
  height: 250px;
  width: 50%; 
   border-radius: 0px;
  padding: 0px; 
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight:100 !important;
  -webkit-font-smoothing:antialiased;
  color: white; 
  background-color: whitesmoke;
  float: left;
  text-align: center;
}

#a_r_a{
  height: 250px;
  width: 50%; 
   border-radius: 0px;
  padding: 0px; 
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight:100 !important;
  -webkit-font-smoothing:antialiased;
  color: white; 
  background-color: whitesmoke;
  float: left;
  text-align: center;
}

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/




    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) and (max-width: 374px){
 html { background-color: whitesmoke;overflow-x: hidden !important; width: 100%; height: 100%;}
 body{overflow-x: hidden !important;}
li{text-align: left;float: left;font-size: .7em;}
hr{display: none !important;}
#a_l_a{font-size: .9em;}
#a_r_a{font-size: .9em;}
.parallax1{display: none !important;}
.parallax3{display: none !important;}
.get_a{margin: 0px 0px 0px 65px !important;float: left !important;text-align: left !important}
.menu{width: 100%;font-weight: 200;padding: 0px 0px -10px 0px;}
#sidetitle{clear: both;float: left;margin: 10px auto 5px 20px;width: 28%;display: none;}
#side_logo{clear: both;float: left;margin: 10px auto 5px 20px;width: 28%;display: none;}
.b_par{text-align: center;font-size: 1.6em;}
#l_a{width: 24%;height: 550px;font-size: 1em;border-radius: 0px;padding: 0px;font-family: arial; color: navy;float: left;background-color: whitesmoke;}
#r_a{width: 50%;height: 550px;font-family:"Helvetica Neue", Arial,sans-serif;font-weight:100;-webkit-font-smoothing:antialiased;color:white;background-color: #778899;font-size: 15px;text-align: left;padding: 0px 10px;width: 25%;float: center;width: 1140px;margin:0 auto;}
.bottom{font-size:10px;}
.parallax2 {
    /* The image used */
    background-image: url("template_logo_j2.png");
    height: 180px;
    width:100%;
    background-color:white;
    font-size:15px;
    /* Set a specific height */
    min-height: 450px;
    min-width: 500px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
    }

    @media only screen and (min-width : 375px) and (max-width: 409px){
  html { background-color: whitesmoke;overflow-x: hidden !important; width: 100%; height: 100%;}
 body{overflow-x: hidden !important;}
li{text-align: left;float: center;font-size: .7em;}
hr{display: none !important;}
#a_l_a{font-size: .9em;}
#a_r_a{font-size: .9em;}
.parallax1{display: none !important;}
.parallax3{display: none !important;}
.get_a{margin: 0px 0px 0px 100px !important;float: left !important;text-align: left !important}
.menu{width: 100%;font-weight: 200;padding: 0px 0px -10px 0px;}
#sidetitle{clear: both;float: left;margin: 10px auto 5px 20px;width: 28%;display: none;}
#side_logo{clear: both;float: left;margin: 10px auto 5px 20px;width: 28%;display: none;}
.b_par{text-align: center;font-size: 1.6em;}
#l_a{width: 28.5%;height: 550px;font-size: 1em;border-radius: 0px;padding: 0px;font-family: arial; color: navy;float: left;background-color: whitesmoke;}
#r_a{width: 50%;height: 550px;font-family:"Helvetica Neue", Arial,sans-serif;font-weight:100;-webkit-font-smoothing:antialiased;color:white;background-color: #778899;font-size: 15px;text-align: left;padding: 0px 10px;width: 25%;float: center;width: 1140px;margin:0 auto;}
.bottom{font-size:10px;}
.parallax2 {
    /* The image used */
    background-image: url("template_logo_j2.png");
    height: 180px;
    width:100%;
    background-color:white;
    font-size:15px;
    /* Set a specific height */
    min-height: 550px;
    min-width: 500px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
    }


    @media only screen and (min-width : 410px) and (max-width: 479px) {
 html { background-color: whitesmoke;overflow-x: hidden !important; width: 100%; height: 100%;}
 body{overflow-x: hidden !important;}
li{text-align: left;float: center;font-size: .7em;}
hr{display: none !important;}
#a_l_a{font-size: .9em;}
#a_r_a{font-size: .9em;}
.parallax1{display: none !important;}
.parallax3{display: none !important;}
.get_a{margin: 0px 0px 0px 105px !important;float: left !important;text-align: left !important}
.menu{width: 100%;font-weight: 200;padding: 0px 0px -10px 0px;}
#sidetitle{clear: both;float: left;margin: 10px auto 5px 20px;width: 28%;display: none;}
.b_par{text-align: center;font-size: 1.6em;}
#l_a{width: 31.5%;height: 550px;font-size: 1em;border-radius: 0px;padding: 0px;font-family: arial; color: navy;float: left;background-color: whitesmoke;}
#r_a{width: 50%;height: 550px;font-family:"Helvetica Neue", Arial,sans-serif;font-weight:100;-webkit-font-smoothing:antialiased;color:white;background-color: #778899;font-size: 15px;text-align: left;padding: 0px 10px;width: 25%;float: center;width: 1140px;margin:0 auto;}
.bottom{font-size:10px;}
.parallax2 {
    /* The image used */
    background-image: url("template_logo_j2.png");
    height: 180px;
    width:100%;
    background-color:white;
    font-size:15px;
    /* Set a specific height */
    min-height: 590px;
    min-width: 500px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
    }


    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) and (max-width: 767px){
  html { background-color: whitesmoke;overflow-x: hidden !important; width: 100%; height: 100%;}
 body{overflow-x: hidden !important;}
li{text-align: left;float: center;font-size: .8em;}
#a_l_a{font-size: .9em;}
#a_r_a{font-size: .9em;}
.parallax1{display: none !important;}
.parallax3{display: none !important;}
.get_a{margin: 0px 0px 0px 135px !important;}
.menu{width: 100%;font-weight: bold;padding: 0px 0px -10px 0px;}
#sidetitle{clear: both;float: left;margin: 10px auto 5px 20px;width: 28%;display: none;}
.b_par{text-align: center;font-size: 1.6em;}
#l_a{width: 36%;height: 550px;font-size: 1em;border-radius: 0px;padding: 0px;font-family: arial; color: navy;float: left;background-color: whitesmoke;}
#r_a{width: 50%;height: 550px;font-family:"Helvetica Neue", Arial,sans-serif;font-weight:100;-webkit-font-smoothing:antialiased;color:white;background-color: #778899;font-size: 15px;text-align: left;padding: 0px 10px;width: 25%;float: center;width: 1140px;margin:0 auto;}
.bottom{font-size:10px;}
.parallax2 {
    /* The image used */
    background-image: url("template_logo_j2.png");
    height: 180px;
    width:100%;
    background-color:white;
    font-size:15px;
    /* Set a specific height */
    min-height: 590px;
    min-width: 500px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) and (max-width: 991px){
  html { background-color: whitesmoke;overflow-x: hidden !important; width: 100%; height: 100%;}
 body{overflow-x: hidden !important;}
li{text-align: left;float: center;font-size: 1em;}
#a_l_a{font-size: .9em;}
#a_r_a{font-size: .9em;}
.parallax1{display: none !important;}
.parallax2{display: none !important;}
.get_a{margin: 0px 0px 0px 280px !important;}
.menu{width: 100%;font-weight: 200;padding: 0px 0px -10px 0px;}
.b_par{text-align: center;font-size: 1.6em;}
.bottom{font-size:10px;}
#l_a{width: 30%; 
  height: 550px; 
  border-radius: 0px;
  padding: 0px; 
  font-family: arial; 
  color: navy;
  float: left;
  background-color: whitesmoke;
  margin-left: 4px
}
#r_a{
  width: 30%; 
  height: 550px;
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-weight:100;
  -webkit-font-smoothing:antialiased;
  color: white; 
  background-color: #778899; 
  font-size: 20px;
  float: left;
  text-align: center;
  text-indent: 4px;
} 
.parallax3 {
    /* The image used */
    background-image: url("template_logo_j3.png");
    height: 180px;
    width:100%;
    background-color:white;
    font-size:15px;
    /* Set a specific height */
    min-height: 590px;
    min-width: 500px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
    }


    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) and (max-width: 1199px){
  html { background-color: whitesmoke;overflow-x: hidden !important; width: 100%; height: 100%;}
 body{overflow-x: hidden !important;}
   li{text-align: left;float: center;font-size: .8em;}
#a_l_a{font-size: .9em;}
#a_r_a{font-size: .9em;}
.get_a{margin: 0px 0px 0px 410px !important;}
.parallax2{display: none !important;}
.parallax3{display: none !important;}
.menu{width: 100%;font-weight: bold;padding: 0px 0px -10px 0px;}
.b_par{text-align: center;font-size: 1.6em;}
.bottom{font-size:10px;}
#l_a{width: 40%; 
  height: 550px; 
  border-radius: 0px;
  padding: 0px; 
  font-family: arial; 
  color: navy;
  float: left;
  background-color: whitesmoke;
  margin-left: 4px
}
#r_a{
  width: 40%; 
  height: 550px;
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-weight:100;
  -webkit-font-smoothing:antialiased;
  color: white; 
  background-color: #778899; 
  font-size: 20px;
  float: left;
  text-align: center;
  text-indent: 3px;
} 

.parallax1 {
    /* The image used */
    background-image: url("template_logo_j.png");
    height: 180px;
    width:100%;
    background-color:white;
    font-size:15px;
    /* Set a specific height */
    min-height: 800px;
    min-width: 500px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) and (max-width: 1800px){
 html { background-color: whitesmoke;overflow-x: hidden !important;}
 li{text-align: left;float: center;font-size: 1em;}
#a_l_a{font-size: .9em;}
#a_r_a{font-size: .9em;}
.parallax2{display: none !important;}
.parallax3{display: none !important;}
.get_a{margin: 0px 0px 0px 520px !important;}
.menu{width: 100%;font-weight: 200;padding: 0px 0px -10px 0px;}
.b_par{text-align: center;font-size: 1.6em;}
.bottom{font-size:14px;}
#side_logo{    
    float: left;
    padding: 0px 3px;
    margin-bottom: 3.5px;
    text-align: left;
    margin: auto;
    height: 30px;
    width: 37px;
    margin-top: 14px;
    margin-left: 12px;
    position: absolute;
    position: fixed;
}
#sidetitle{
  font-size: 14px;
  padding: 2.5px 16px;
  text-decoration:none;
  color:#106a8c;
  position: fixed;
  position:absolute;
  font-family:arial;
  font-weight:bold;
  float:left;
  margin-bottom:20px;
  margin:15px;
  margin-left:55px;}

#l_a{width: 48%; 
  height: 550px; 
  border-radius: 0px;
  padding: 0px; 
  font-family: arial; 
  color: navy;
  float: left;
  background-color: whitesmoke;
  margin-left: 4px
}
#r_a{
  width: 51%; 
  height: 550px;
  font-family:"Helvetica Neue", Arial, sans-serif;
  font-weight:100;
  -webkit-font-smoothing:antialiased;
  color: white; 
  background-color: #778899; 
  font-size: 20px;
  float: left;
  text-align: center;
  text-indent: 4px;
} 
.parallax1 {
    /* The image used */
    background-image: url("template_logo_j.png");
    height: 180px;
    width:100%;
    background-color:white;
    font-size:15px;
    /* Set a specific height */
    min-height: 590px;
    min-width: 500px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
    }


    /*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {

    }