/* =============
Typhography
================ */
@font-face {
  font-family: 'NeoSansPro-Light';
  src: url('../fonts/Halcyon-Light.eot');
  src: url('../fonts/Halcyon-Light.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Halcyon-Light.woff') format('woff'),
  url('../fonts/Halcyon-Light.ttf') format('truetype'),
  url('../fonts/Halcyon-Light.svg#Halcyon-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NeoSansPro-Regular';
  src: url('../fonts/Halcyon-Regular.eot');
  src: url('../fonts/Halcyon-Regular.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Halcyon-Regular.woff') format('woff'),
  url('../fonts/Halcyon-Regular.ttf') format('truetype'),
  url('../fonts/Halcyon-Regular.svg#Halcyon-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NeoSansPro-Bold';
  src: url('../fonts/Halcyon-Bold.eot');
  src: url('../fonts/Halcyon-Bold.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Halcyon-Bold.woff') format('woff'),
  url('../fonts/Halcyon-Bold.ttf') format('truetype'),
  url('../fonts/Halcyon-Bold.svg#Halcyon-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Halcyon-Light';
  src: url('../fonts/Halcyon-Light.eot');
  src: url('../fonts/Halcyon-Light.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Halcyon-Light.woff') format('woff'),
  url('../fonts/Halcyon-Light.ttf') format('truetype'),
  url('../fonts/Halcyon-Light.svg#Halcyon-Light') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Halcyon-Regular';
  src: url('../fonts/Halcyon-Regular.eot');
  src: url('../fonts/Halcyon-Regular.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Halcyon-Regular.woff') format('woff'),
  url('../fonts/Halcyon-Regular.ttf') format('truetype'),
  url('../fonts/Halcyon-Regular.svg#Halcyon-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Halcyon-Medium';
  src: url('../fonts/Halcyon-Medium.eot');
  src: url('../fonts/Halcyon-Medium.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Halcyon-Medium.woff') format('woff'),
  url('../fonts/Halcyon-Medium.ttf') format('truetype'),
  url('../fonts/Halcyon-Medium.svg#Halcyon-Medium') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Halcyon-Bold';
  src: url('../fonts/Halcyon-Bold.eot');
  src: url('../fonts/Halcyon-Bold.eot?#iefix') format('embedded-opentype'),
  url('../fonts/Halcyon-Bold.woff') format('woff'),
  url('../fonts/Halcyon-Bold.ttf') format('truetype'),
  url('../fonts/Halcyon-Bold.svg#Halcyon-Bold') format('svg');
  font-weight: normal;
  font-style: normal;
}

:root {
  --eolo-blue: #193755;
  --eolo-sky-blue: #00A0E6;
  --eolo-orange: #FF8A00;
  --eolo-grey: #656B73;
  --eolo-white: #FFFFFF;
}

html, body {
  font-family: "Halcyon-Regular", arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
  color: var(--eolo-grey);
}

strong {
  font-family: "Halcyon-Medium", arial, sans-serif;
}

h1.text-center, h2.text-center, h3.text-center, h4.text-center, h5.text-center, h6.text-center {
  display: block;
}

h1 {
  padding-bottom: 20px;
  padding-top: 20px;
  margin-top: 0;
  margin-bottom: 0;
}

h2, h3, h4, h5, h6 {
  padding-bottom: 5px;
  padding-top: 5px;
  margin-top: 0;
  margin-bottom: 0;
}

p, .areaIntro h3 {
  color: var(--eolo-grey);
  font-family: "Halcyon-Regular", arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
  padding-bottom: 10px;
  padding-top: 10px;
  margin: 0;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  display: block;
  font-family: "Halcyon-Medium", arial, sans-serif;
  color: var(--eolo-sky-blue);
  font-weight: normal;
}

h1, .h1 {
  font-size: 36px;
}

h2, .h2 {
  font-size: 28px;
}

#services-bar h3 {
  font-size: 30px;
}

#services-bar h3 small {
  font-size: 14px;
  font-family: "Halcyon-Medium", arial, sans-serif;
  color: var(--eolo-sky-blue);
}

#services-bar h4 {
  font-size: 14px;
}

#homepage h3 {
  font-size: 30px;
}

#homepage h4 {
  font-size: 14px;
  color: var(--eolo-sky-blue);
}

#homepage h5, .corporate-teasers h5 {
  font-size: 14px;
  margin: 10px 0;
}

.txt48 {
  font-size: 48px;
}

.txt30 {
  font-size: 30px;
}

.txt24 {
  font-size: 24px;
}

.txt20 {
  font-size: 20px;
}

.txt18 {
  font-size: 18px;
}

.txt16 {
  font-size: 16px;
}

.txt14 {
  font-size: 14px;
}

.txt12 {
  font-size: 12px;
}

.text-blue {
  color: var(--eolo-sky-blue);
}
.text-blue-dark {
  color: var(--eolo-blue);
}

.text-orange {
  color: var(--eolo-orange);
}

a {
  color: var(--eolo-sky-blue);
  text-decoration-color: var(--eolo-sky-blue);
}

a:hover {
  color: var(--eolo-blue);
}

#homepage p {
  margin: 0 0 20px;
  line-height: 28px;
}

#homepage .teaserHomeContainer .teaserHome p {
  margin: 0px;
  font-size: 13px;
  line-height: 20px;
}

#bar-header-menu a {
  color: var(--eolo-blue);
}

#bar-header-menu a:hover {
  color: var(--eolo-sky-blue);
}

input, textarea {
  font-family: "Halcyon-Regular", arial, sans-serif;
  font-size: 18px;
  line-height: 22px;
  color: var(--eolo-grey);
}

.ch-ra-label {
  cursor: pointer;

  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.ch-ra-label:hover, .active .ch-ra-label, .ch-ra-label.active {
  color: var(--eolo-sky-blue);
}

.price {
  color: var(--eolo-sky-blue);
}

.strike {
  text-decoration: line-through;
}

.price-highlight {
  color: var(--eolo-orange);
}

.text-highlight {
  color: var(--eolo-orange);
  font-size: 18px;
  padding-bottom: 15px;
  font-weight: bold;
}

.text-white, .text-white h2, .text-white h3, .text-white p {
  color: var(--eolo-white);
}

.text-grey {
  color: #767A82;
}

.text-success {
  color: #45D623;
}

.text-danger {
  color: #E41212;
}

.text-full {
  display: block;
  float: left;
  width: 100%;
}

.txt-note p, .txt-note {
  font-size: 14px;
}

.txt-size-12, .icon-list.txt-size-12 li a, .icon-page-list.txt-size-12 li a {
  font-size: 12px !important;
}

.txt-size-14, .icon-list.txt-size-14 li a, .icon-page-list.txt-size-14 li a {
  font-size: 14px !important;
}

.txt-size-16, .icon-list.txt-size-16 li a, .icon-page-list.txt-size-16 li a {
  font-size: 16px !important;
}

.txt-size-18, .icon-list.txt-size-18 li a, .icon-page-list.txt-size-18 li a {
  font-size: 18px !important;
}

.txt-size-24, .icon-list.txt-size-24 li a, .icon-page-list.txt-size-24 li a {
  font-size: 24px !important;
}

.greenPhone, .greenPhone a {
  color: #2e9930;
}

.greenPhone .titleNumber {
  font-size: 18px;
}

.greenPhone .valueNumber {
  font-size: 30px;
  font-weight: bolder;
}

/* ============= 
02. Header & Footer
================ */
#main-footer, #main-footer a {
  color: var(--eolo-grey);
  font-size: 14px;
  font-family: "Halcyon-Regular", arial, sans-serif;
}

#main-footer a {
  line-height: 43px;
  text-align: center;
}

.logo-footer-italy {
  color: var(--eolo-sky-blue);
}

.logo-footer i {
  color: #EE3124;
  font-size: 24px;
  vertical-align: baseline;
}

/* mobile menu */
.mm-list > li > a, .mm-list > li > span {
  font-size: 18px;
  font-family: "Halcyon-Regular", arial, sans-serif;
  line-height: 26px;
}

/* =============
03. Buttons & icons
================ */
.btn {
  font-size: 12px;
  font-family: "Halcyon-Medium", arial, sans-serif; /*min-width:100px;*/
}

#toolbar-menu {
  font-size: 14px;
  font-family: "Halcyon-Medium", arial, sans-serif;
  line-height: 16px;
}

#toolbar-menu div span {
  color: var(--eolo-sky-blue);
}

.btn-utility {
  background-color: var(--eolo-blue);
  color: var(--eolo-white);
}

.btn.btn-utility:hover, .btn.btn-utility:focus, .btn.btn-utility.active {
  background-color: var(--eolo-sky-blue);
  color: var(--eolo-white);
}

.btn-lg.iconBtn i {
  color: var(--eolo-sky-blue);
}

.btn-lg.iconBtn:hover i {
  color: var(--eolo-white);
}

/* parent <a> hover activation */
a:hover .btn-primary, a.btn-primary:hover {
  color: var(--eolo-white);
  background-color: #66CBFF;

  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

a:hover .btn-white, a.btn-white:hover {
  color: var(--eolo-white);
  background-color: #66CBFF;

  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

a:hover .btn-secondary, a.btn-secondary:hover {
  color: var(--eolo-white);
  background-color: var(--eolo-sky-blue);

  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

a:hover .btn-extra, a.btn-extra:hover {
  color: var(--eolo-white);
  background-color: var(--eolo-orange);

  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:link, .btn-primary[disabled]:focus, .btn-primary[disabled]:active {
  background-color: var(--eolo-white);
  border: 2px solid #66CBFF;
  color: #66CBFF;
  padding: 7px 13px;
}

.btn-secondary {
  color: var(--eolo-white);
  background-color: var(--eolo-blue);
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active, .open > .dropdown-toggle.btn-secondary {
  color: var(--eolo-white);
  background-color: var(--eolo-sky-blue);
}

.btn-white {
  color: var(--eolo-sky-blue);
  background-color: var(--eolo-white);
}

.btn-white:hover, .btn-white:focus, .btn-white:active, .btn-white.active, .open > .dropdown-toggle.btn-white {
  color: var(--eolo-white);
  background-color: var(--eolo-sky-blue);
}

.btn.btn-extra {
  color: var(--eolo-orange);
  background-color: var(--eolo-white);
  border: 1px solid var(--eolo-orange);
}

.btn-extra:hover, .btn-extra:focus, .btn-extra:active, .btn-extra.active, .open > .dropdown-toggle.btn-extra {
  color: var(--eolo-white);
  background-color: var(--eolo-orange);
}

.product-slider .box-text h4, .teaserHome .box-text h4 {
  font-size: 24px;
  line-height: 28px;
  color: var(--eolo-grey);
}

.teaserHome .box-title span.titleHeader {
  font-family: "Halcyon-Medium", arial, sans-serif;
  font-size: 24px;
}

/* ============= 
05. Slider (flexslider)
================ */

/* section top slider */
.section-top-slider .flex-captions h2, .section-top-slider .flex-captions p {
  color: var(--eolo-white);
}

.section-top-slider .flex-captions.txt-blue h2, .section-top-slider .flex-captions.txt-blue p {
  color: var(--eolo-blue);
}

.section-top-slider a:hover .flex-captions h2, .section-top-slider a:hover .flex-captions p {
  color: #D7EFF9; /*00A0E6*/
}

.section-top-slider .flex-captions h2 {
  font-size: 30px;
  line-height: 30px;
}

.section-top-slider .flex-captions p {
  font-size: 18px;
  line-height: 24px;
  font-family: "Halcyon-Regular", arial, sans-serif;
}

/* ============= 
08. Sections
================ */
.cart-layer-wrapper strong {
  font-family: "Halcyon-Medium", arial, sans-serif;
  font-weight: normal;
}

.cart-layer-wrapper {
  font-family: "Halcyon-Light", arial, sans-serif;
}


/* ============= 
09. Product slider 
================ */

.flex-captions h2, .flex-captions p {
  color: var(--eolo-blue);
  font-family: "Halcyon-Medium", arial, sans-serif;
}

.flex-captions.txt-white h2, .flex-captions.txt-white p {
  color: var(--eolo-white);
}

a:hover .flex-captions h2, a:hover .flex-captions p {
  color: var(--eolo-sky-blue);
}

/* ============= 
09. Product slider 
================ */

.product-slider a .box-text h4, .teaserHome a .box-text h4 {
  font-size: 24px !important;
  line-height: 28px !important;
  color: var(--eolo-grey) !important;
}

.teaserHome a .box-text h4 {
  font-size: 24px !important;
  line-height: 28px !important;
}

.product-slider a .box-text h4, .product-slider a .box-text p, .teaserHome a .box-text h4, .teaserHome a .box-text p {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.teaserHome a .box-text p.price {
  color: var(--eolo-grey);
}

/* ============= 
13. Sidebar
================ */

.spot-on h3 {
  color: var(--eolo-orange);
}

.spot-on i {
  color: var(--eolo-white);
}

.shopping-cart-button.active-section {
  background-color: #D7EFF9;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
@media only screen and (min-width: 480px) {

}

@media only screen and (min-width: 768px) {

  #homepage .teaserHomeContainer .teaserHome p {
    font-size: 13px;
  }

  h1, .h1 {
    font-size: 48px;
  }

  h2, .h2 {
    font-size: 30px;
  }

  /* ============= 
  00. Main Structure
  ================ */
  #payoff {
    font-family: "Halcyon-Medium", arial, sans-serif;
    font-size: 17px;
    float: left;
    display: block;
    padding: 30px 0 0 15px;
    line-height: 16px;
  }

  /* ============= 
  13. Sidebar
  ================ */
  .spot-on i {
    font-size: 45px;
  }
}

@media (width: 1024px) {
  #services-bar h3 small {
    font-size: 12px;
  }
}

@media only screen and (min-width: 992px) {

  #homepage .teaserHomeContainer .teaserHome p {
    font-size: 16px;
    line-height: 22px;
  }

  /* ============= 
  01. Color Styles 
  ================ */
  /* Desktop Menu colors */
  #bar-header-menu #main-menu-desktop > ul > li > a {
    color: var(--eolo-sky-blue);
  }

  #bar-header-menu #main-menu-desktop > ul > li > a:hover, #bar-header-menu #main-menu-desktop > ul > li.active > a, #bar-header-menu #main-menu-desktop > ul > li.active.active-section > a, #bar-header-menu #main-menu-desktop > ul > li.active.active-section > a:hover {
    /*
    */
    background-color: #D7EFF9;
    color: var(--eolo-sky-blue);
  }

  #bar-header-menu #main-menu-desktop > ul > li.active-section > a {
    background-color: var(--eolo-white);
    color: var(--eolo-blue);
  }

  #bar-header-menu #main-menu-desktop > ul > li#shopping-cart.active-section > a, #bar-header-menu #main-menu-desktop > ul > li#shopping-cart.active.active-section > a, #bar-header-menu #main-menu-desktop > ul > li#shopping-cart.active-section > a:hover {
    background-color: #D7EFF9;
    color: var(--eolo-sky-blue);
  }

  #bar-header-menu #main-menu-desktop > ul > li:first-child > a, #bar-header-menu #main-menu-desktop > ul > li:first-child.active-section > a, #bar-header-menu #main-menu-desktop > ul > li:first-child.active > a, #bar-header-menu #main-menu-desktop > ul > li:first-child > a:hover {
    background-color: transparent !important;
    color: #a6e3fa;
  }

  #bar-header-menu #main-menu-desktop > ul > li:first-child > a:hover, #bar-header-menu #main-menu-desktop > ul > li:first-child.active > a {
    background-color: transparent;
  }


  /* ============= 
  02a2. Desktop Menu
  ================ */
  #bar-header-menu a {
    color: var(--eolo-sky-blue);
  }

  #bar-header-menu a:hover {
    color: var(--eolo-blue);
  }

  /* push down sub-menues */
  .push-down > ul > li ul li a {
    line-height: 38px;
    color: var(--eolo-grey);
    font-size: 16px;
    font-family: "Halcyon-Regular", arial, sans-serif;
  }

  .push-down .menu-title {
    color: var(--eolo-white);
    font-size: 17px;
    line-height: 47px;
    font-family: "Halcyon-Medium", arial, sans-serif;
  }

  /* =============
  03. Buttons & icons
  ================ */
  .btn {
    font-size: 14px;
  }

  #main-menu-desktop > ul > li > a {
    font-size: 18px;
    font-family: "Halcyon-Medium", arial, sans-serif;
  }

  /* ============= 
  02. Header & Footer
  ================ */
  #main-footer, #main-footer a {
    font-size: 12px;
  }

  #main-footer a:hover {
    color: var(--eolo-sky-blue);
  }

  #main-footer a:hover:after {
    color: var(--eolo-grey);
  }

  /* ============= 
  09. Product slider 
  ================ */
  .product-slider a:hover .box-text h4, .product-slider a:hover .box-text p, .teaserHome a:hover .box-text h4, .teaserHome a:hover .box-text p {
    color: var(--eolo-sky-blue) !important;
  }
}

@media only screen and (min-width: 1070px) {

  /* ============= 
  02. Header & Footer
  ================ */
  #main-footer, #main-footer a {
    font-size: 14px;
  }
}

@media only screen and (min-width: 1200px) {
  #homepage .teaserHomeContainer .teaserHome p {
    font-size: 18px;
    line-height: 24px;
  }

}