@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/opensans/v20/mem6YaGs126MiZpBA-UFUK0Zdcg.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/opensans/v20/memnYaGs126MiZpBA-UFUKXGUdhrIqY.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/opensans/v20/memnYaGs126MiZpBA-UFUKWiUNhrIqY.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UNirkOUuhs.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN7rgOUuhs.ttf) format('truetype');
}
/******************************************************************
***** Mixins 
******************************************************************/
/******************************************************************
***** Global 
******************************************************************/
body {
  font-family: 'Open Sans', sans-serif;
  color: #909090;
}
h2,
.h2 {
  color: #4B4B4C;
}
h3,
.h3 {
  color: #323847;
}
h4,
.h4 {
  color: #4B4B4C;
}
a {
  color: #323847;
}
a:hover,
a:focus {
  color: #29354d;
  text-decoration: none;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  cursor: pointer;
  background: #323847;
}
::selection {
  background-color: #323847;
  color: #fff;
}
-webkit-::selection {
  background-color: #323847;
  color: #fff;
}
::-moz-selection {
  background-color: #323847;
  color: #fff;
}
.masked:after {
  background: rgba(41, 53, 77, 0.85);
}
.loader {
  background: #fff;
}
/******************************************************************
***** Logos & Branding
******************************************************************/
.brand-img-white {
  width: 180px;
  height: auto;
}
.brand-img {
  width: 150px;
  height: auto;
}
/******************************************************************
***** Buttons 
******************************************************************/
.btn {
  border-radius: 4px;
}
.btn-primary {
  color: #fff;
  background-color: #323847;
  border-color: #323847;
}
.btn-primary:hover {
  color: #fff;
  background-color: #3d4456;
  border-color: #3d4456;
}
.btn-outline-primary {
  color: #323847;
  border-color: #323847;
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: #323847;
  border-color: #323847;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #323847;
}
/*
.btn-secondary {
    color: #fff;
    background-color: @color2;
    border-color: @color2;
    
    &:hover{
        color: #fff;
        background-color: darken(@color2,5%);
        border-color: darken(@color2,5%);
    }
}

.btn-outline-secondary {
    color: @color2;
    border-color: @color2;
    
    &:hover {
        color: #fff;
        background-color: @color2;
        border-color: @color2;
    }
}
*/
/******************************************************************
***** Main Navigation
******************************************************************/
.navbar {
  background-color: #ffffff;
}
.navbar.navbar-background {
  background-color: #ffffff;
}
.navbar.affix .navbar-nav li a {
  color: #4B4B4C;
}
@media (min-width: 992px) {
  .navbar-nav .nav-link:before {
    border-top: 2px solid #323847;
  }
}
/******************************************************************
***** Master Head
******************************************************************/
/******************************************************************
***** Share Buttons notirication
******************************************************************/
.share-notification a {
  color: #323847;
}
.share-notification a:hover {
  color: #29354d;
}
/******************************************************************
***** Goto Top Button
******************************************************************/
.cd-top {
  color: #FFF;
  background: #323847;
}
/******************************************************************
***** Bootstrap Dropdown Menu
******************************************************************/
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
  background-color: transparent;
}
/******************************************************************
***** Bootstrap Panels
******************************************************************/
.panel-primary {
  border-color: #29354d;
}
.panel-primary > .panel-heading {
  color: #fff;
  background-color: #29354d;
  border-color: #29354d;
}
/******************************************************************
***** Bootsrap Overlay
******************************************************************/
.close:hover,
.close:focus {
  color: #323847;
}
/******************************************************************
***** Form composants
******************************************************************/
.b-primary {
  border-color: #323847;
}
.form-horizontal .control-label {
  color: #909090;
}
.form-control,
textarea.form-control {
  color: #9F9F9F;
  border-radius: 4px;
}
.form-control:focus {
  border-color: #323847;
}
/******************************************************************
***** Section Newsletter
******************************************************************/
/******************************************************************
***** Section Contact
******************************************************************/
.contacts.section .fa {
  color: #29354d;
}
/******************************************************************
***** Section Footer
******************************************************************/
.social a {
  color: #C2C2C2;
}
.social a:hover {
  color: #323847;
}
/******************************************************************
***** Blog Single
******************************************************************/
.single .blog-gallery a {
  border: solid 10px #FFF;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
}
.single .blog-gallery a:hover {
  border: solid 10px #29354d;
}
/******************************************************************
***** OWL Carousel 
******************************************************************/
.owl-theme .owl-dots .owl-dot span,
.owl-theme .owl-controls .owl-nav [class*=owl-] {
  background: #d6d6d6;
}
.owl-theme .owl-dots .owl-dot.active span {
  background: #323847;
}
.owl-theme .owl-dots .owl-dot:hover span {
  background: #29354d;
}
.owl-theme .owl-controls .owl-nav [class*=owl-]:hover {
  background: #323847;
  color: #fff;
}
/******************************************************************
***** swipebox
******************************************************************/
#swipebox-overlay {
  background: linear-gradient(125deg, rgba(41, 53, 77, 0.9), rgba(25, 28, 35, 0.8));
  background-size: 200% 200%;
}
#swipebox-bottom-bar,
#swipebox-top-bar {
  text-shadow: 1px 1px 1px #000;
  background: #000;
  opacity: 0.95;
}
/* -------------------------------- 
Cookie notification
-------------------------------- */
.cookie-notice button {
  color: #323847;
}
.cookie-notice button:hover,
.cookie-notice button:active {
  color: #000;
}
/* -------------------------------- 
TarteAuCitron
-------------------------------- */
#tarteaucitronPercentage {
  background: #323847;
}