body{
    overflow-x: hidden;
}
body, html{
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}
h1, h2, h3{
        font-family: 'Pathway Gothic One', sans-serif;
        text-transform: uppercase;
    text-align: center;
}

p{
    font-family:'roboto', sans-serif;
  font-style: normal;
  font-weight: 200;
 font-size: 1em;
   
}
a{
    text-decoration: none;
}
#canonLink{
    display: block;
    margin: 0 auto;
    position: relative;
}
#canonDrivers{
    text-decoration: none;
    color: #333;
    margin: 0 auto;
    display: block;
    left: 70px;
    top: 50px;
    position: relative;
}
#canonDrivers:hover{
    text-decoration: underline;
}
header{
    position: relative;
    top: 10px;
    bottom: 10px;
    height: 100px;
    background: #fff;
}
#logo{
    position: relative;
    z-index: 10;
    width: 300px;
    height: auto;
    margin-left: 40px;
}
.topnav{
    position: relative;
    background-color: none;
    overflow : hidden;
    float : right;
    display : inline-block;
    vertical-align : middle;
    width : 600px;
    top : -80px;
    z-index: 5;
}
#splash{
    width: 100%;
    height: auto;
    background: #ccc;
    
}
.left{
    display: inline-block;
    float: left;
    width: 500px;
}
.right{
    display: inline-block;
    float: right;
    width: 500px;
}
.leftImg{
    width: 300px;
    display: block;
    margin-left: 140px;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+64 */
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 64%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 64%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 64%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.rightImg{
    position: relative;
    width: 300px;
    display: block;
    margin-right: 140px;
    top: 40px;
}
#bottomRight{
    margin-top: 20px;
}
#button1{
    height: 40px;
    width: 300px;
    position: relative;
      text-transform: uppercase;
    font-size: 17px;
    color: #fff;
    text-shadow: 0px -1px 0px #333;
    letter-spacing: 0.07em;
    display: block;
    margin-top: 80px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e31f26+0,be1f24+100 */
background: rgb(227,31,38); /* Old browsers */
background: -moz-linear-gradient(top, rgba(227,31,38,1) 0%, rgba(190,31,36,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(227,31,38,1) 0%,rgba(190,31,36,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(227,31,38,1) 0%,rgba(190,31,36,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e31f26', endColorstr='#be1f24',GradientType=0 ); /* IE6-9 */
}
#button2{
    height: 40px;
    width: 300px;
    position: relative;
      text-transform: uppercase;
    font-size: 17px;
    color: #fff;
    text-shadow: 0px -1px 0px #333;
    letter-spacing: 0.07em;
    display: block;
    margin-top: 20px;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#919191+0,565655+100 */
background: rgb(145,145,145); /* Old browsers */
background: -moz-linear-gradient(top, rgba(145,145,145,1) 0%, rgba(86,86,85,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(145,145,145,1) 0%,rgba(86,86,85,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(145,145,145,1) 0%,rgba(86,86,85,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#919191', endColorstr='#565655',GradientType=0 ); /* IE6-9 */
}
.buttonLink{
text-decoration: none;
}
.buttonLink:hover{
text-decoration: none;
}
#button1 p{
    position: relative;
    text-align: center;
    vertical-align: middle;
    top: 10px;
    text-decoration: none;
}
#button2 p, i{
    position: relative;
    text-align: center;
    vertical-align: middle;
    top: 10px;
    text-decoration: none;
}
#button2 i{
    top: -3px;
    left: -10px;
}
.isa_success {
    color: #4F8A10;
    background-color: #DFF2BF;
    font-size: 1em;
}
/* Add a black background color to the top navigation */
.topnav {
    /*background-color: #333;*/
    overflow: hidden;
    float: right;
    display: inline-block;
    vertical-align: middle;
   width: 690px;

   z-index: 5;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    font-family: 'roboto', sans-serif;
    color: #333;
    text-align: center;
    padding: 14px 40px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
   
    color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}
#splash{
    width: 100%;
    height: auto;
}
#aboutLeft{
    margin-left: 40px;
    width: 60%;
    float: left;
   
    
}
#aboutLeft p{
    line-height: 1.4em;
}
#aboutRight{
    margin-right: 40px;
    width: 30%;
    float: right;
}
.aboutImg{
     width: 100%;
    height: auto;
    display: block;
}
#aboutLink{
    margin: 0 auto;
    text-align: center;
}
.teamImg{
    width: 150px;
    margin: 0 auto;
    display: block;
    height: auto;
}
#aboutRight a{
 text-align: center;
}
#aboutRight p{
    text-align: center;
}
.slider{
    background: #cbc9c8;
    margin-top: -20px;
}
.timeClock{
    margin-top: 60px;
   
    top: 60px;
}
#contactUs{
    display: block;
    position: relative;
    margin-top: 50px;
}
#contactUs .left{
   
    margin-left: 40px;
}
#contactUs .right{
    margin-right: 40px;
    margin-left: 0px;
}
.pleft, .pright{
    float: left;
    display: inline-block;
    width: 48%;
    text-align: center;
}
.contactHead{
    background: #4b4a4b;
    height: 40px;
    width: 300px;
    
}
#contactUs i{
    background: #4b4a4b;
    color: #fff;
    height: 40px;
    width: 100%;
    text-align: center;
    padding-top: 7px;
}
#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font:400 12px/16px "Open Sans", Helvetica, Arial, sans-serif; }

#contact {
	background:#F9F9F9;
	padding:25px;
	margin:0px 0;
}

#contact h3 {
	color: #F96;
	display: block;
	font-size: 30px;
	font-weight: 400;
}

#contact h4 {
	margin:5px 0 15px;
	display:block;
	font-size:13px;
}

fieldset {
	border: medium none !important;
	margin: 0 0 10px;
	min-width: 100%;
	padding: 0;
	width: 100%;
}

#contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {
	width:100%;
	border:1px solid #CCC;
	background:#FFF;
	margin:0 0 5px;
	padding:10px;
}

#contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {
	-webkit-transition:border-color 0.3s ease-in-out;
	-moz-transition:border-color 0.3s ease-in-out;
	transition:border-color 0.3s ease-in-out;
	border:1px solid #AAA;
}

#contact textarea {
	height:100px;
	max-width:100%;
  resize:none;
}

#contact input[type="submit"] {
	cursor:pointer;
	width:100%;
	border:none;
	background:#4b4a4b;
	color:#FFF;
	margin:0 0 5px;
	padding:10px;
	font-size:15px;
}

#contact input[type="submit"]:hover {
	background:#000;
	-webkit-transition:background 0.3s ease-in-out;
	-moz-transition:background 0.3s ease-in-out;
	transition:background-color 0.3s ease-in-out;
}

#contact input[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }

#contact input:focus, #contact textarea:focus {
	outline:0;
	border:1px solid #999;
}
::-webkit-input-placeholder {
 color:#888;
}
:-moz-placeholder {
 color:#888;
}
::-moz-placeholder {
 color:#888;
}
:-ms-input-placeholder {
 color:#888;
}
footer{
    height: 220px;
    background: #c9c9c9;
}
.footSection{
    display: block;
    width: 100%;
    position: relative;
  margin-right: 40px;
  right: 40px;
    height: 70px;
    padding-top: 10px;
   
}
.footSection i{
    margin-left: 140px;
}
.footSection i, .footSection p{
    display: inline;
    float: left;
    top: 12px;
    
}
.footSection p{
    margin-left: 10px;
}
#logoFoot{
    margin-top: 70px;
    width: 300px;
    margin-left: 40px;
}
@media screen and (max-width: 900px) {
      .topnav a:not(:first-child) {display: none !important;}
  .topnav a.icon {
    float: right !important;
    display: block !important;
  }
  .topnav{
    width: 100%!important;
    background-color: #333!important;
    top: 0px !important;
    z-index: 15;
  }
  .topnav a {
    float: left!important;
    display: block!important;
    color: #f2f2f2!important;
    text-align: center!important;
    padding: 14px 16px!important;
    text-decoration: none!important;
    font-size: 17px!important;
}
.left{
    float: none;
    width: 100%;
}
.right{
    float: none;
    width: 100%;
    margin-bottom: 40px;
}
.topnav a:hover {
    background-color: #ddd;
    color: black;
}
.topnav a:hover {
    background-color: #ddd;
    color: black;
}
   #logo{
    margin-bottom: 20px;
    }
  .topnav.responsive {position: fixed!important; width: 100%!important;}
  .topnav.responsive a.icon {
    position: absolute!important;
    right: 0!important;
    top: 0!important;
  }
  .topnav.responsive a {
    float: none!important;
    display: block!important;
    text-align: left!important;
  }
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    header{
        height: auto;
    }
  .topnav a:not(:first-child) {display: none !important;}
  .topnav a.icon {
    float: right !important;
    display: block !important;
  }
  .topnav{
    width: 100%!important;
    background-color: #333!important;
    top: 0px !important;
  }
  .topnav a {
    float: left!important;
    display: block!important;
    color: #f2f2f2!important;
    text-align: center!important;
    padding: 14px 16px!important;
    text-decoration: none!important;
    font-size: 17px!important;
}
.left{
    float: none;
    width: 100%;
}
.right{
    float: none;
    width: 100%;
    margin-bottom: 40px;
}
.topnav a:hover {
    background-color: #ddd;
    color: black;
}
.leftImg{
    margin-left: 40px;
}
.rightImg{
    margin-right: 0px;
     margin-left: 40px;
}
#button1, #button2{
margin-left: 40px;
}
#aboutRight{
    margin-right: 0px;
    margin-left:0px;
}
#aboutLeft{
    margin-left: 0px;
}
.slick-slide {
   height:200px;
   width: auto;
}
.slick-slide img{
   height:auto;
   width: auto;
}

#contactUs .left{
    margin-left: 0px;
}
footer{
    height: 400px;
    
}
footer .right{
    margin-right: 0px;
}
#logoFoot{
    margin-top: 20px;
    }
    .footSection{
        margin: 0 auto;
        right: 0;
    }
.footSection i{
    margin-left: 0px;
    display: block;
    margin: 0 auto;
    text-align: center;
    margin-right: 0px;
}
.footSection p{
    display: block;
}
#button2{
    margin-bottom: 20px;
}
}
@media screen and (max-width: 1000px) {
    .left{
    margin: 0 auto;
    float: none;
    width: 100%;
    text-align: center;
}
.right{
    float: none;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 40px;
    text-align: center;
}
.leftImg{
    margin-left: 40px;
    margin: 0 auto;
    text-align: center;
    float: none;
}
#aboutLeft{
    margin: 0 auto;
    float: none;
    width: 100%;
    text-align: center;
}
#aboutLeft p{
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
}
#aboutRight{
      float: none;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 40px;
    text-align: center;
}
#aboutRight a{
    margin: 0 auto;
    text-align: center;
}
#aboutRight{
    padding-left: 20px;
    padding-right: 20px;
}
#aboutRight i{
    text-align: center;
}
.rightImg{
    text-align: center;
    float: none;
    margin-right: 0px;
     margin-left: 40px;
     margin: 0 auto;
     margin-bottom: 10px;
}
footer{
    height: 450px;
}
#button1, #button2{
    margin: 0 auto;
    text-align: center;
    
}
#button1{
    margin-top: 70px;
}
#contactUs .left{
    margin: 0 auto;
}
#canonDrivers{
    text-decoration: none;
    color: #333;
    margin: 0 auto;
    display: block;
    text-align: center;
    top: 40px;
    left: 0px;
    position: relative;
}
    
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    #logo{
    margin-bottom: 20px;
    }
  .topnav.responsive {position: fixed!important; width: 100%!important;}
  .topnav.responsive a.icon {
    position: absolute!important;
    right: 0!important;
    top: 0!important;
  }
  .topnav.responsive a {
    float: none!important;
    display: block!important;
    text-align: left!important;
  }
}