:root {
  --primary-color: blue;
  --header-border-bottom: solid 1px;
}

.my-element {
  color: var(--primary-color);
}

html {
    margin: 0px;
}
header a {
    color: black;
}
.header {
    color: black;
}
.header-black {
    color: black;
}
.header-black a {
    color: black;
}
.header-white {
    color: black;
}
.header-white a {
    color: black;
}
.header-white a:hover{
    color: black;
    text-decoration: underline;
}
.header-black a:hover{
    color: black;
    text-decoration: underline;
}
.contact-div a {
    color: white;
}
.contact-div a:hover{
    color: white;
    text-decoration: none;
}
.desktop-header {
    display: block;
}
.mobile-header {
    display: none;
}

.menu {
  position: fixed;
  z-index: 30;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 1);
  /*nimation-name: slide-in;*/
  /*animation-duration: 1s;*/  
  transition: right 0.5s ease-in-out;
}
.menu-open {
    right: -20%;
}
.close-menu-icon {
  position: fixed;
  z-index: 40;
  top: 10px;
  right: 10px;
}
.menu-links a {
    color: white !important;
}

@keyframes slide-in {
  from {
    right: -100%;
  }
  
  to {
    right: -15%;
  }
}

.main-container {
    /*background-image: url('/+Websites/MyWebsite/wp-content/themes/my-theme/images/slide.jpg');*/
    background-size: cover;
    /*background-color: rgba(0, 0, 0, 0.5);*/
    background-blend-mode: overlay;
    /*height: 500px;    */
}

.fixed-header {
  position: fixed;
  z-index: 10; /* Set a higher z-index to ensure it stays on top of other elements */
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff; /* Set your desired background color */
  /* Add any other styling you want for your header */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add a shadow effect */
}

.header-border {
    border-bottom: var(--header-border-bottom);
    border-color: #ccd0d4;
}

.contact-form .form-control {
    font-size: 12px !important;
}
/*
* Mobile responsive 
*/
@media (max-width: 858px){
    .desktop-header {
        display: none;
    }
    .mobile-header {
        display: block;
    }
}