/* ===============================   
   Colour Palette:
   ---------------
   Enkoder Orange:  #FE8104
   Enkoder Gray:  #65646A
   =============================== */

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

.row:after {
   content: "";
   clear: both;
   display: table;
}

[class*="col-"] {
   float: left;
   padding: 15px;
   width: 100%;
}

/* Mobile */
@media screen and (max-width: 699px) {
  h1, h2, h3, h6, p {margin: auto; text-align: center;}
  h6, p {font-size: 16px; line-height: 1.6em;}

  /* Fold Section for Mobile */
  #fold {
    padding: 60px 20px;
    text-align: center;
    background: url('../images/hero-contact-img.jpg') top center no-repeat; background-size: auto 100%; background-color: #333;
  }

  #fold h1 {
    font-size: 32px;
    padding-top: 80px;
    font-weight: 500;
  }

  #contact {
    padding-left: 20px;
    padding-right: 20px;
  }

  #form p {
    text-align: left;
  }

  #form, .field, .field-text, .send-buttom {
    width: 320px;
  }

  #social a {
    margin: 0 15px;
  }

  #footer {
    font-size: 16px;
  }

  #footer h6 {
  font-size: 24px;
}

}

/* Tablets */
@media only screen and (min-width: 700px) and (max-width: 1199px) {
  .container {width: 100%; margin: 0 auto; padding: 0px 20px;} 
  .col-m-1 {width: 8.33%;}
  .col-m-2 {width: 16.66%;}
  .col-m-3 {width: 25%;}
  .col-m-4 {width: 33.33%;}
  .col-m-5 {width: 41.66%;}
  .col-m-6 {width: 550px; margin: 0px;}
  .col-m-7 {width: 58.33%;}
  .col-m-8 {width: 66.66%;}
  .col-m-9 {width: 75%;}
  .col-m-10 {width: 83.33%;}
  .col-m-11 {width: 91.66%;}
  .col-m-12 {width: 100%;}

  p {font-size: 16px; line-height: 1.6em;}

  /* Fold Section for Tablet */
  #fold {
   /* padding: 60px 0px;*/
    background: url('../images/hero-contact-img.jpg') top center no-repeat; background-size: auto 100%; background-color: #333;
  }

  #fold h1 {
    font-size: 48px;
    padding-top: 130px;
    font-weight: 500;
  }

  #form, .field, .field-text, .send-buttom {
    width: 500px;
  }

  #footer h6 {
    font-size: 25px;
  }

  #social a {
    margin: 0 15px;
  }

  #footer {
    font-size: 18px;
  }
}  

/* For Desktop */
@media only screen and (min-width: 1200px) {
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 550px; margin: 0px;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}

  .container {
     width: 1100px;
     margin: 0 auto;
  }

  /* Common Desktop CSS */
  p {
     font-size: 18px;
     line-height: 1.6em;
  }

  /* Fold Section for Desktop*/
  #fold  {
    background: url('../images/hero-contact-img.jpg') top center no-repeat; background-size: 100% auto; background-color: #333;
  }

  #fold h1 {
    font-size: 48px;
    padding-top: 160px;
    font-weight: 500;
  }

  #form, .field, .field-text, .send-buttom {
    width: 720px;
  }

  #social {
    float: left;
  }

  #social a {
    margin-right: 30px;
  }

  #footer {
    font-size: 18px;
  }

  #footer h6 {
    font-size: 24px;
  }
}

/* General CSS */
/* Typography */
body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: #65646A;
}

h2 {
  font-size: 34px;
  font-weight: 500;
  color: #FE8104;
  margin-bottom: 25px;
}

/* Common CSS */
#fold, #footer {
  text-align: center;
}

/* Fold Section*/
#fold {
  margin-top: 100px;
  color: #FFF;
}

#fold p {
  max-width: 600px;
  margin: 25px auto 180px;
}

#contact {
  max-width: 520px;
  margin: 85px auto 50px;
  text-align: center;
}

#form {
  margin: 0px auto 130px;
}

.field {
  box-sizing: border-box;
  height: 50px;
  border: 2px solid #C1C1C1;
  background-color: #F7F7F7;
}

.field-text {
  box-sizing: border-box;
  height: 200px;
  border: 2px solid #C1C1C1;
  background-color: #F7F7F7;
}

#form input, textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 18px;
  padding-left: 5px;
}

textarea {
  padding-top: 10px;
}

.send-buttom {
  border: none;
  font-size: 18px;
  color: white;
  cursor: pointer;
  height: 54px;
  background-color: #FE8104;
}


/* Footer Section */
#footer {
  padding: 50px 0px 40px;
  background-color: #65646A;
  color: #FFF;
}

#footer h6 {
  margin-bottom: 25px;
  color: #FFF;
}

.link-footer {
  margin-bottom: 25px;
}

#social {
  margin-top: 30px;
  width: 200px;
}

#footer a {
  text-decoration: none;
  color: #FFF;
}

#copyright {
  background-color: #4B4A50;
  color: #FFF;
  padding: 5px 0px;
}

#copyright p {
  text-align: center;
  font-size: 14px;
  margin-right: auto;
  margin-left: auto;
}

/* Force Elements to Self Clear its Children: http://css-tricks.com/snippets/css/clear-fix/ */
.clearfix:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
  }
   
* html .group             { zoom: 1; } /* IE6 */
*:first-child+html .group { zoom: 1; } /* IE7 */


/*01/29/21 EDIT*/

/*Common*/
@media only screen and (max-width: 699px) {
  .row{
    margin-left: auto;
    margin-right: auto;
  }
}

@media only screen and (max-width: 576px) {
  .row{
    margin-left: -15px;
    margin-right: -15px;
  }
}


/*Header Section*/
  .nav-option:hover {
    color:#FE8104;
  }

  @media only screen and (max-width: 386px) {
    #menuToggle{
      padding-left: 15px;
    }

    #menuToggle input{
      left: 15px;
      }
    }
/*
  #logo-navigation div{
      padding:15px 15px 0px 45px;
    }*/
    @media only screen and (min-width: 1199.5px) {
    #logo-navigation div{
      padding:15px 15px 0px 45px;
    }
  }

  /*Slider Section*/
  #contactUs {
  animation: fadeInBottom 1s ease-out 0s;
  }

  #contactUsP {
  animation: fadeInBottom2 1s ease-out 0.4s;
  animation-fill-mode: backwards;
  }

  @keyframes fadeInBottom {
  0% {
      opacity: 0;
      transform: translateY(3rem);
  }

  100% {
      opacity: 1;
      transform: translate(0);
    }
  }
  @keyframes fadeInBottom2 {
  0% {
      opacity: 0;
      transform: translateY(3rem);
  }

  100% {
      opacity: 1;
      transform: translate(0);
    }
  }

  /*Form Section*/
  .send-buttom:hover{
    background-color:#d16900;
    transition-timing-function: ease-out;
    transition-duration: 0.5s;
    color: #ffffff;
    text-decoration: none
  }

  /*Footer Section*/

  #footer a:hover{
    color:orange !important;
  }

    .btn-sections {
      display: inline-block;
      border-radius: 20%;
      color: #f1f1f1;
      overflow: hidden;
      position: relative;
    transition: 0.2s linear;
    }

    .btn-sections:hover {
      background: #65646A;
      transform: scale(1.1);
    }
    
    #social a {
      height: 32px;
      width: 32px;
      display: inline-block;
    }

    @media only screen and (max-width: 701px) {
      #social{
        width: unset;
        }
      }
    
      #social a{
        z-index: 9999;
      }
    
      #social svg:hover{
        fill: blue;
      }
    
      #facebook svg{
        position: absolute;
        left: 4px;
        top: 4px;
        z-index: 5;
      }
      
      #twitter svg{
        position: absolute;
        left: 1px;
        top: 4px;
        z-index: 5;
      }
      
      #linkIn svg{
        position: absolute;
        left: 2px;
        top: 4px;
        z-index: 5;
      }
      
      .facebook-background{
        position: absolute;
        right: 4px;
        bottom: 4px;
        width: 15px;
        height: 20px;
        background: #ffffff;
        z-index: 4;
      }
    
      .facebook-color{
        fill: #3b5998;
        transition: ease-out;
        transition-duration: 0.5s;
      }
      
      .twitter-color{
        fill: #00acee; 
        transition: ease-out;
        transition-duration: 0.5s;
      }
      
      .linkin-color{
        fill: #0e76a8;
        transition: ease-out;
        transition-duration: 0.5s;
      }
    
   
.desktop-links{
      top: 15px !important;
}