*{
  font-family: 'Open Sans', sans-serif;
}

#edit-preview{
    display:none;
}

.w-64 {
  width: 16rem;
}

.view-id-jobs a:hover{
    text-decoration:none;
}


.clickable {    
    cursor:pointer;
}
    
.hiddendiv{
    display:none;
}

/*.clickable:focus + .hiddendiv{*/
/*    display:block;  */
/*}*/


.job_section{
    padding:1rem;
}

.job_section ul {
    list-style: circle;
    margin: 0.5rem 1rem;
}
.job_section a{
      text-transform: uppercase;
    border: 2px solid black;
    padding: 0.5rem 2rem;
    background: transparent;
    font-size: 1.25rem;
    line-height: 1.75rem;
    
}
.job_section .job_section_label{
    font-weight:bold;
}
.job_section table{
    margin:2rem;
}



.image {
    position: relative;
    width: 100%;
}

.image__img {
    display: block;
    width: 100%;
}

.image__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-family: 'Quicksand', sans-serif;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
}

.image__overlay--blur {
    backdrop-filter: blur(5px);
}

.image__overlay--primary {
    background: #009578;
}

.image__overlay > * {
    transform: translateY(20px);
    transition: transform 0.25s;
}

.image__overlay:hover {
    opacity: 1;
}

.image__overlay:hover > * {
    transform: translateY(0);
}

.image__title {
    font-size: 2em;
    font-weight: bold;
}

.image__description {
    font-size: 1.25em;
    margin-top: 0.25em;
}

 #mainnav{
    padding-top:20px;
 }

  nav ul ul{
    position: absolute;
    /*top: 80px;*/
    opacity: 0;
    visibility: hidden;
    transition: top .3s;
    background: #f4f4f4;
  }
  nav ul ul ul{
    /* border-top: none; */
  }
  nav ul li:hover > ul{
    /*top: 60px;*/
    margin:0 0 0 0 ;
    opacity: 1;
    visibility: visible;
  }
  nav ul ul li{
    position: relative;
    margin: 0px;
    /* width: 150px; */
    float: none;
    display: list-item;
    padding:0.3rem;
    font-size:0.8rem;
    
  }

  nav ul ul li:hover{
    text-decoration:underline;
  }
  
  #mainbtn{
      display:none;
  }



#job_needs{
    display:flex;
     flex-wrap: wrap;

}

#job_needs ul {
    list-style: none;
    flex-grow: 100;
    flex-shrink: 50;
}

@media all and (max-width: 850px) {
    
     .form-item-mail{
    width: 100% !important;
    padding:0 1rem;
  }
    
    .contact-message-contact-form .form-wrapper{
        width:100%;
    }
.job_section table{
    margin:1rem 0 0 0;
}

#job_needs{

    flex-direction: column;


}

    .image__overlay {
    opacity: 1;
     background: rgba(0, 0, 0, 0.4);
}
    .image__overlay > * {
    transform: translateY(0);
}
    .benefits p, .job_section p, .job_section div{
        font-size: 0.75rem;
        padding:0.25rem;
    }
.image__title {
    font-size: 1.25em;
    font-weight: bold;
    
}
.image__overlay--blur {
    backdrop-filter: blur(2px);
}

.image__description {
    font-size: 1em;
    margin-top: 0.25em;
}
 
 .text-2xl{
     font-size:1rem !important;
 }
 

 
 .text-6xl{
     font-size:1.75rem !important;
 }
    
 #mainbtn{
      display:block;
      width:100%;
      padding-left:2rem;
      
  }
  #mainbtn p{
       text-align:end;
  }
 #mainnav{
     display:none;
 }
 
 [id^=btn]:checked + #mainnav{
    /*background-color: aqua;*/
 }
 
 [id^=btn]:checked + #mainnav li{
    text-align:end;
 }
 
 #mainnav,#block-enerdel-main-menu{
        width:100%;
  }
 
 [id^=btn]:checked + #mainnav, [id^=btn]:checked + #block-enerdel-main-menu{
    display: block;
    
    width:100%;
  }
  
  [id^=btn]:checked + #mainnav ul.menu{
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
    position: relative !important;
    
  }
  nav ul ul{
     background-color: white;
  }
  
  nav ul ul li{
      padding:0 !important;
  }
  
  #primarynav{
      width:100%;
      text-align:end;
      position:relative;
    
  }
  
  /*nav ul{*/
  /*  margin-right: 0px;*/
  /*  float: left;*/
   
  /*}*/
  /*nav .logo{*/
  /*  padding-left: 30px;*/
  /*  width: 50%;*/
  /*}*/
  /*.show + a, nav ul{*/
  /*  display: none;*/
  /*}*/
  /*nav ul li,nav ul ul li{*/
  /*  display: block;*/
  /*  width: 100%;*/
  /*}*/
  /*nav ul li a:hover{*/
  /*  box-shadow: none;*/
  /*}*/
  /*nav .show{*/
  /*  display: block;*/
  /*  color: white;*/
  /*  font-size: 16px;*/
  /*  padding: 0 15px;*/
  /*  line-height: 50px;*/
  /*  cursor: pointer;*/
  /*}*/
  /*.show:hover{*/
  /*  color:white;*/
  /*}*/
  /*nav .icon{*/
  /*  display: block;*/
  /*  color: white;*/
  /*  position: absolute;*/
  /*  top: 0;*/
  /*  right: 40px;*/
  /*  line-height: 50px;*/
  /*  cursor: pointer;*/
  /*  font-size: 18px;*/
  /*}*/
  /*nav ul ul{*/
  /*  top: 70px;*/
  /*  border-top: 0px;*/
  /*  float: none;*/
  /*  position: static;*/
  /*  display: none;*/
  /*  opacity: 1;*/
  /*  visibility: visible;*/
  /*}*/
  /*nav ul ul a{*/
  /*  padding-left: 40px;*/
  /*}*/
  /*nav ul ul ul a{*/
  /*  padding-left: 80px;*/
  /*}*/
  /*nav ul ul ul li{*/
  /*  position: static;*/
  /*}*/
  
  /*nav ul ul li{*/
  /*  border-bottom: 0px;*/
  /*}*/
  /*span.cancel:before{*/
  /*  content: '\f00d';*/
  /*}*/
}



  form{
    display: flex;
    flex-wrap: wrap;
    
  }

  form label{
    text-transform:uppercase;
    font-size:0.8rem;
    
  }
  form input, form textarea{
    margin-top:10px;
    padding:0.8rem;
    border-radius:5px;
    border: 1px solid black;
  }


  .form-wrapper, .form-item-mail{
    width: 50%;
    padding:0 1rem;
  }

  .form-wrapper input, .form-item-mail input{
    width:100%;
  }
  
  .form-submit{
    font-size:0.8rem;
  }

  .form-actions, .field--widget-string-textarea{
    width: 100%;
  }
  .form-actions input{
    width:auto;
    background:#e3dbdd;
    text-transform:uppercase;
    padding:.5rem 1rem;
  }

  .field--name-langcode{
    display:none;
  }

  .field-content a{
    text-decoration:underline;
  }

  .view-jobs{
    
  }

  .jobrow{
    background-color:#f2f3f3;
    text-align: center;
    padding: .75rem 0;
  }
  
  .jobrow:nth-child(even){
    background-color: white;
  }

  .jobrow .jobtitle{
    font-size:1.5rem;
  }

  .jobrow .jobdatefield{
    padding-right: 0.5rem;
    border-right: 1px solid black;
  }

  .jobrow .jobtypefield{
    padding-right: 0.5rem;
    border-right: 1px solid black;
  }

  .jobtypelabel, .joblocationlabel{
    padding-left: 0.5rem;
  }

  .jobrow .jobdatefield, .jobrow .jobtypefield, .jobrow .joblocationfield {
    font-weight: bold;
  }
  .joblink svg, .joblink a{
    display: block;
    margin: auto auto;
    width: 30px;
  height: 30px;
  }