#about { background: url(/img/home.jpg); background-position: 40% 0%; background-size:cover; background-repeat:no-repeat; height: 100%; }

hr {     border: 0;
         height: 5px; }

div.animation a {
  color: #FFF;
  text-decoration: none;
  margin: 0px 10px;
  position: relative;
  z-index: 0;
  cursor: pointer;
}

/* Pull down  */
div.pullDown a:before {
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0px;
  top: 0px;
  content: '';
  background: #FFF;
  opacity: 0.3;
  transition: all 0.3s;
}

div.pullDown a:hover:before
{
  height: 100%;
}

/*
Extra small devices (portrait phones, less than 576px)
*/
@media (max-width: 480px) {
  #about { height: 600px !important; }
  #about div { padding: 0px !important; }
  #about h1 { font-size: 30px !important; padding: 180px 0 50px 0px; text-align: center; text-shadow: 0px 2px 5px #000000; }
  #about hr { width: 80%; height: 3px; }
  #about h2 { font-size: 16px !important; margin: 0 0 50px 0px !important; text-align: center; }

  hr.jil-degrade { margin: 0px auto 30px !important;}
  h2.title { text-align: center !important; }

  #history .history-sector { margin: 0 0 30px 0 !important; text-align: center !important; }

  .numbers-br-r { border-right: none !important; }
  .numbers-br-l { border-left: none !important; }

  .expert-sector { text-align: center !important; text-justify: auto; }
  .expert-sector .company-logo, .expert-sector .company-logo img { text-align: center !important; }
  .expert-sector .prn { padding-right: 15px !important; }
  .expert-sector .text-right { text-align: center !important; text-justify: auto; }
  .expert-sector .float-right { float: none !important; text-align: center !important;}
  .expert-sector h3 { padding-top: 0px !important;}
  .expert-sector p.pln { padding-right: 0px !important;}
  .expert-sector p, .expert-sector p.text-right { text-align: justify !important;}

  #form-contact.mt50 { margin-top: 0px !important; }
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  #about { height: 800px !important; }
  #about div { padding: 0px !important; }
  #about h1 { font-size: 40px !important; padding: 180px 0 50px 0px; text-align: center; text-shadow: 0px 2px 5px #000000; }
  #about hr { width: 360px; }
  #about h2 { font-size: 24px !important; margin: 50px 0 50px 0px !important; text-align: center; }

  hr.jil-degrade { margin: 0px auto 30px !important;}
  h2.title { text-align: center !important; }

  #history .history-sector { margin: 0 0 30px 0 !important; text-align: center !important; }

  .numbers-br-r { border-right: none !important; }
  .numbers-br-l { border-left: none !important; }

  .expert-sector { text-align: center !important; text-justify: auto; }
  .expert-sector .company-logo, .expert-sector .company-logo img { text-align: center !important; }
  .expert-sector .prn { padding-right: 15px !important; }
  .expert-sector .text-right { text-align: center !important; text-justify: auto; }
  .expert-sector .float-right { float: none !important; text-align: center !important;}
  .expert-sector h3 { padding-top: 0px !important;}
  .expert-sector p.pln { padding-right: 0px !important;}
  .expert-sector p, .expert-sector p.text-right { text-align: justify !important;}

  #form-contact.mt50 { margin-top: 0px !important; }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
  #about { height: 800px !important; }
  #about h1 { font-size: 40px !important; padding: 180px 0 50px 40px; text-align: left; text-shadow: 0px 2px 5px #000000; }
  #about hr { width: 320px; }
  #about h2 { font-size: 20px !important; margin: 40px 0 50px 40px !important; text-align: left; }

  hr.jil-degrade { margin: 0px 0 0 40px !important; }
  .numbers-br-r { border-right: 3px solid rgba(238, 238, 238, 1) !important; }
  .numbers-br-l { border-left: 3px solid rgba(238, 238, 238, 1) !important; }

  #history .history-sector h2 { text-align: center !important; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  hr.jil-degrade { margin: 0px 0 0 40px !important; }

  #about { background-position: 0% 0%;  height: 800px !important; }
  #about h1 { font-size: 40px !important; padding: 180px 0 50px 40px; text-align: left; text-shadow: 0px 2px 5px #000000; }
  #about hr { width: 320px; }
  #about h2 { font-size: 20px !important; margin: 40px 0 50px 40px !important; text-align: left; }

  h2.title { text-align: left !important; }
  h2.title.text-center { text-align: center !important; }

  #history .history-sector { text-align: left !important; }
  #history .history-sector h2 { text-align: left !important; }
  #history hr { width: 265px !important; }
  #history .history-sector hr { width: 100px !important; height: 3px !important; }
  #history .history-sector h2 { text-align: left !important; }

  .expert-sector .company-logo, .expert-sector .company-logo img { text-align: left !important; }
  .expert-sector h3 { padding-top: 0px !important; text-align: left !important;}
  .expert-sector .company-logo.logo-right, .expert-sector .company-logo.logo-right img { text-align: right !important; }
  .expert-sector .float-right { float: right !important; text-align: center !important;}
  .expert-sector p.text-right { text-align: right !important;}
  .expert-sector span { text-align: left !important;}

  .turn2inclusion { font-size: 14px !important; line-height: 28px;}
  h3.goodwill { font-size: 18px !important; margin-bottom: 15px !important; }
  .skillbar { margin-bottom: 20px !important;}
  .skillbar-title { font-size: 12px !important; }

  #form-contact.mt50 { margin-top: 50px !important; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  hr.jil-degrade { margin: 0px 0 40px 0 !important; }
  hr.jil-degrade.gradient-center { margin: 0px auto 40px !important; }

  #about { height: 1000px !important; }
  #about h1 { font-size: 50px !important; padding: 180px 0 50px 40px; text-align: left; text-shadow: 0px 2px 5px #000000; }
  #about hr { width: 400px; margin: 0 0 0 40px !important; }
  #about h2 { font-size: 22px !important; margin: 40px 0 50px 40px !important; text-align: left; }
  #gobottom { padding-left: 40px !important;}

  h2.title { text-align: left !important; }
  h2.title.text-center { text-align: center !important; }

  #history .history-sector { text-align: left !important; }
  #history .history-sector h2 { text-align: left !important; }
  #history hr { width: 265px !important; }
  .expert-sector .text-right { text-align: right !important; text-justify: auto; }
  #history .history-sector hr { width: 100px !important; height: 3px !important; }

  .turn2inclusion { font-size: 16px !important; line-height: 32px !important; }

  .expert-sector span { text-align: left !important;}

  .numbers-br-r { border-right:3px solid rgba(238, 238, 238, 1); }
  .numbers-br-l { border-left:3px solid rgba(238, 238, 238, 1); }
}

@media (min-width: 1300px) {
  .turn2inclusion { font-size: 16px !important; line-height: 32px !important; }
}

@media (min-width: 1400px) {
  .turn2inclusion { font-size: 20px !important; line-height: 40px !important; }
}