/*Font*/
@font-face {
  font-family: 'arialn';
  src: url('arialn.woff');
  src: local('arialn'), url('arialn.woff') format('woff'), url('http://:/') format("No-IE-404");
  font-weight: normal;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

 body {
        font-family: 'arialn', Arial Narrow, Arial !important;        
        color: #17272f;
        background: #fafafa;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-overflow-scrolling: touch;
        /*background-color: #17272f;*/
        -webkit-font-smoothing: subpixel-antialiased;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        text-size-adjust: 100%;
      }
* {
  border-radius: 0 !important;
}

/* STYLES TO SCALE UP GLYPHICONS */
.gi-2x{
  font-size: 2em;
}
.gi-3x{
  font-size: 3em;
}
.gi-4x{
  font-size: 4em;
}
.gi-5x{
  font-size: 5em;
}


.app-width {
        width: 100%;
        max-width: 1030px;
        margin: 0 auto;
        /*padding: 0 20px;*/
      }


.spec-link {
    color: #000;
}
.spec-link:hover {
    text-decoration: none !important;
    color: #069eda;
}
.spec-icon {
    color: red;
}
.vertical-align {
    display: flex;
    align-items: center;
}

.product-image {
  /*border: 1px solid #e3e6e7;
  padding: 20px;
  margin-right: 5px;
  margin-bottom: 5px;*/
  width: 49%;
  height: 400px;
  margin: 0 0 20px 20px;
}

.product-description {
  width: 50%;
}
/*
.item {
  border: 1px solid #e3e6e7;
  padding: 5px;
  margin-right: 5px;
  margin-top: 10px;
}*/

/* HEADER */ 
header {
  height:12px;
  background-color:#fff;
  margin-top: 0px;
  padding-top: 10px;
}/*
#nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index:10;
}*/
.affix {
      top: 0;
      width: 100%;
      z-index: 9999 !important;
  }

  .affix + .container-fluid {
      padding-top: 70px;
  }
.dropdown-language  {
  z-index: 9999;
}
.separator {
  color: #009de0;
}
.icon.social {
  color: #000 !important;
}
.title {
  color: #007fb4;
  font-size: 45px;
}
.abstract {
  font-size: 24px;
  color: #009de0;
}

/* NAVIGATION */

.navbar {
      font-family: 'arialn', Arial Narrow, Arial !important;
      margin-bottom: 0;
      background-color: #009de0;
      z-index: 9999;
      /*position: static;*/
      border: 0;
      font-size: 16px !important;
      line-height: 30px !important;
      border-radius: 0;
  }
  /*.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus {
    color: #fff;
    background-color: #30708F;
}*/
    .navbar li a, .navbar .navbar-brand {
      color: #fff !important;
  }
  .navbar-nav li a:hover, .navbar-nav li.active a:hover, .navbar-nav li a:focus, .navbar-nav li.active a:focus  {
      color: #a6b2b8 !important;
      background-color: #30708F !important;
  }
  .navbar-nav > li.active a {
      color: #fff !important;
      background-color: #008bc7 !important;
  }
  .navbar-default .navbar-toggle, .dropdown-header {
      border-color: transparent;
      color: #fff !important;
      background-color: #30708F !important;
  }
  .navbar-nav > li > .dropdown-menu { 
    background-color: #30708F !important;
    border: 0px; 
  }
   .navbar-nav > li > .dropdown-menu-full { 
    padding-left: 30px;
  }

  .navbar-nav li a > .glyphicon-menu-right { 
    color: #fff !important;
    font-weight: 100 !important;
    font-size: 11px !important;
  }
  .navbar-nav li a:hover > .dropdown-menu {
    color: #f00 !important;
    text-decoration: none;
  }

    @media (hover) {
    ul.nav li.dropdown:hover > ul.dropdown-menu {
      display: block;  
      text-decoration: none; 
    }
  } 

  .navbar-beghelli {
  /* (75px - button height 34px) / 2 = 23px */
  
  vertical-align: middle; 
  height: 75px;
  }
  .navbar-brand {
  padding-top:  10px;
  padding-left: 0px;
  height: 75px;
  line-height: 75px;
}
  .navbar-nav > li > a {
    /* (75px - line-height of 34px) / 2 = 23px */
    padding-top: 23px;
    padding-bottom: 23px;
    line-height: 27px;
  }
  .navbar-form {
    padding-top: 10px;
  }
    .navbar-form input, .form-inline input {
  width:auto;
}
  .square {
  width: 20px;
  height: 20px;
  position: absolute;
  border: 1px solid #ffffff;
  left: 20px;
  }

/* Tooltip */
  .tooltip > .tooltip-inner {
      background-color: #e7f8fe;
      border-bottom: 1px solid #069eda; 
      color: #000;
      text-align: left;
  }

   /* Tooltip on top */
  .tooltip.top > .tooltip-arrow {
      border-top: 5px solid #069eda;
  }

/* CAROUSSEL */
  .carousel {
    background: none repeat scroll 0 0 #f2f2f2;
    margin-top: 5px;
    padding: 5px;
}

  .carousel-inner img {
      width: 100%; /* Set width to 100% */
      margin: auto;
      min-height:200px;
  }


 /* BREADCRUMBS */
 .breadcrumb {
    background-color: #e3e6e7;
 }
.share {
    color: #787878;
    font-size: 18px !important;
}
.share:hover {
    color: #009de0;
}
 .breadcrumb .step {
  font-size: 16px;
  text-transform: uppercase;
  color: #787878;
}
.breadcrumb .step:last-of-type {
  font-weight: bold;
}
.breadcrumb .step .button {
  color: #787878;
}
.breadcrumb .step .button:hover {
  text-decoration: underline;
}
.breadcrumb .separator {
  color: #009de0;
} 

.page-content {
  background-color: #fff;
}

/* FORMAT BULLET POINTS ON PRODUCT PAGES */ 
.product-info li {
    display: block;
}
.product-info li:before {
    content: "\f111";
    font-family: 'FontAwesome';
    font-size: 7px;
    color: #009de0;
    float: left;
    margin-top: 4px;
    margin-left: -17px;
}

/* SIDE PANELS */
.panel-primary {
  border-color: #009de0 !important;
}
.panel-primary > .panel-heading {
  background-color: #009de0 !important;
}
.panel-body .list-unstyled a {
  color: #000;
}
.panel-body > .list-unstyled a:hover {
  color: #009de0;
  text-decoration: none;
}


.btn-primary {
  background-color: #009de0 !important;
}

/* MAKE MODALS SHOW AFTER MENU AND KEEP THEM ON TOP 

.modal {
  z-index: 99999;
}

.modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 120px;
  }
*/

/* IMAGE GALLERY LIGHTBOX */


* {
  box-sizing: border-box;
}

.row > .column {
  padding: 0 8px;
}

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

.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 99999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 800px;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}



  /* FOOTER */
footer {
      font-family: 'arialn', Arial Narrow, Arial;
      background-color: #f2f2f2;
      /*padding: 25px;*/
      background-color: #17272f;
      border-top: 5px solid #009de0;
      padding: 15px 0 40px;
      color: #a6b2b8;
      font-size: 12px;
      line-height: 20px;
    }
    .footer-link {
        color: #a6b2b8;
        text-decoration: underline;
    }
    .footer-link:hover {
        color: #fff;
    }
   .phone .title {
  font-size: 14px;
  text-transform: uppercase;
  color: #3fc08e;
  font-weight: bold;
}
.phone .number {
  font-size: 32px;
  color: #ffffff;
  font-weight: bold;
}
.phone .icon {
  font-size: 40px;
  margin-left: 10px;
  color: #3fc08e;
}
.show-sm {
   display: none;
  }


/* MOBILE SPECIFIC STYLE MODIFICATIONS */
@media (max-width: 600px) {
    .app-width {
    width: 100%;
    margin: 0px;
    padding: 0px;
  }
  .first-header {
    width: 95% !important;
    text-align: right;
  }

  .footer {
    padding: 5px;
  }
  .logo {
    padding-left: 5px;
  }

  .carousel-caption {
    display: none; 
  }
  .title {
    font-size: 30px;
  }
  .abstract {
    font-size: 14px;
    color: #009de0;
  }
  .square {
   position: static;
   width: 16px;
   height: 16px;
   left: 0;
   margin-right: 10px;
   display: -moz-inline-stack;
   display: inline-block;
   zoom: 1;
   *display: inline;
  }
  .hidden-sm {
   display: none;
  }
  .show-sm {
   display: block;
  }
  .product-description {
    width: 100%;
  }
  .product-image {
    height: 160px;
  }
  .modal-gallery {
    max-width: 600px;    
    top: 50% !important;
    margin-top: -50% !important;
  }
}