:root {
  --gold:#b6ab77;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v6/IQHow_FEYlDC4Gzy_m8fcoWiMMZ7xLd792ULpGE4W_Y.woff2) format('woff2');
}

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

* {
    padding:0;
    margin:0;
    box-sizing: border-box;
}

.fcw {
  float:left;
  clear:left;
  width:100%;
}

#burger,
#mobnav,
#phone,
#mobile,
#email,
#wa,
#mobnav .subnav,
.subsub {
  display:none;
}

body {
    font-size:62.5%;
    font-family: 'Montserrat', sans-serif;
}

header {
    background-color:#fff;
    width:100%;
}

  .social-btns {
    float:left;
    padding-left:4em;
    padding-top:3.5em;
  }
  
    .social-btns a {
      float:left;
      width:23px;
      margin-right:0.7em;
    }
    
      .social-btns a img {
        max-width:100%;
        display:block;
      }

    header nav {
      /*border-top:1px solid #ccc;*/
      border-bottom:1px solid #ccc;
      text-align: center;
      clear:both;
    }
  
       header nav ul {
        list-style: none;
        display:block;
        width:100%;
      }
      
        #mainnav li {
          display:inline-block;
          position:relative;
        }
        
          #mainnav li a {
            color:#000;
            text-decoration:none;
            text-transform:uppercase;
            padding:1.2em 2em;
            float:left;
            position:relative;
            z-index:11;
          }
          
            #mainnav li a:hover,
            #mainnav li a.active{
              color:#b6ab77 !important;
            }

            #mainnav li a::after {
              content:" ";
              display:block;
              width:0;
              height:1px;
              background-color:var(--gold);
              margin-top:2px;
              transition: all 0.5s ease-in-out;
            }

              #mainnav li a:hover::after {
                width:100%;
              }
            
        #mainnav ul {
          position:absolute;
          z-index:10;
          padding-top:4em;
          display:none;
          /* border:1px solid #ccc; */
          background-color:#fff;
        }
        
          #mainnav ul li {
            float:left;
            clear:left;
            width:100%;
            border-bottom:1px solid var(--gold);
            background-color:#f6f6f6;
          }
          
            #mainnav ul li a {
              float:left;              
            }
            
              #mainnav .subnav li a:hover {
                background-color:#b6ab77; /* gold*/
                color:#fff !important;
                width:100%;
              }

              #mainnav .subsub {
                padding-top:0;
                left:100%;
                top:0;
              }
            
        #mainnav li:hover > ul {
          display:block;
          min-width:180px;
          text-align: left;
        }

    #logo {
      margin:0 auto;
      width:290px;
      max-width:90%;
      display:block;
      padding:2em 0;
    }
  
    #logo img {
      width:290px;
      max-width:100%;
      display:block;
    }
    
    .contact-details {
      float:right;
      padding-top:1.8em;
      padding-right:3em;
    }
    
    .tel-num,
    .tel-num2{
      float:right;
      clear:right;
      font-size:1.2em;
      padding-bottom:.5em;
    }
    
    .email {
      float:right;
      font-size:1.2em;
    }
    
      .tel-num span,
      .tel-num2 span,
      .email span{
        color:#b6ab77; /* gold*/
      }
      
      .email {
        clear:right;
        margin-bottom:1em;
      }
      
.white-btn {
  font-size:1.4em;
  text-transform: uppercase;
  font-weight:normal;
  padding:1em 3em;
  border:1px solid #ccc;
  color:#000;
  text-decoration: none;
}

  .white-btn:hover {
    background-color:#b6ab77; /* gold*/
    color:#fff;
    border:1px solid #b6ab77;
  }
    
footer {
  float:left;
  clear:both;
  border-top:1px solid #ccc;
  padding:4em;
  width:100%;
}

li li {
  font-size:1em;
}

.copyright {
  float:right;
  clear:right;
  color:#aaa;
  margin-top:2em;
}

  .copyright a {
    color:#aaa;
  }

  #flogo {
    width:290px;
    float:left;
    margin-left: 5em;
    margin-top: 3em;
  }
  
    #flogo img {
      max-width:100%;
      display:block;
    }
  
  .flogos,
  .flogos2{
    float:right;
  }
  
    .flogos2 img {
      width:90px;
      display:block;
    }
  
  .f-logo {
    float:right;
    clear:right;
    max-width:50px;
    max-height:50px;
    margin:0.5em;
  }
  
  #close {
    float:left;
  }
  
  #dorsia {
    width:102px;
    float:left;
    border:1px solid #ccc;
    margin:0 1.5em;
  }
  
    #dorsia img {
      max-width:100%;
      display:block;
    }
    
  .footer-nav {
    float:right;
    width:50%;
  }
  
    .footer-nav div {
      float:left;
      width:calc(100% / 3.5);
    }
  
    .footer-nav a {
      float:left;
      clear:left;
      padding:0.5em 0;
      width:100%;
      text-decoration: none;
      color:#000;
      text-transform: uppercase;
    }
    
      .footer-nav a:hover {
        color:#b6ab77; /* gold*/
      }

.head {
  position:relative;
  text-align: center;
  margin-bottom:2.5%;
}

  .head h1,
  .head h2 {
    position:absolute;
    color:#fff;
    text-shadow:0 0 5px #585858;
    display:block;
    margin:0 auto;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    letter-spacing: 0.05em;
    border-bottom:none;
    font-size:3em;
    text-transform:uppercase;
  }

  .head img {
    width:100%;
  }

h1.hide,
h2.hide {
  font-size:0;
}

.cookies {
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background-color:#333;
  padding:2em;
  color:#fff;
  display:grid;
  grid-template-columns: 1fr 200px;
  grid-gap:2em;
  z-index:100;
}

  .cookies h2 {
    font-size:2.6em;
    text-transform: uppercase;
    margin-bottom: 0.25em;
  }

  .cookies p a {
    color:Var(--gold);
  }

  .cookies .btn {
    background-color:var(--gold);
    color:#333;
    padding:1em 2em;
    text-decoration: none;
    text-align:center;
    font-size:1.6em;
    text-transform: uppercase;
    line-height: 1;
    margin:0;
  }

    .cookies .btn:hover {
      background-color:#fff;
    }

/* Popup */

.popup {
  position:fixed;
  z-index:50;
  text-align: center;
  width:100%;
  height:100%;
  left:0;
  top:0;
  background-color:rgba(0,0,0,0.5);
}

  .popup .text {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width:650px;
    max-width:100%;
    text-align: center;;
    background-color:#000;
    padding:2.5%;
  }

    .popup .text h2 {
      font-size:3em;
      font-weight: normal;
      text-transform: none;
      letter-spacing: 0;
      margin-bottom:1em;
      color:#fff;
      text-transform: uppercase;
    }

    .popup .text p {
      font-size:1.4em;
      margin-bottom:1em;
      color:#fff;
    }

    #hide {
      position:absolute;
      right:1em;
      top:1em;
      font-size:2em;
      color:#fff;
      font-weight:bold;
    }

    #proceed {
      display:inline-block;
      color: #fff;
      background-color:var(--gold);
      padding: 1em 4em;
      text-transform: uppercase;
      text-decoration: none;
      letter-spacing: 0.1em;
      font-weight: bold;
    }
      
@media screen and (max-width:880px) {
  
  #mainnav,
  .contact-details,
  .social-btns{
    display:none;
  }
    
  #burger,
  #mobile,
  #email,
  #phone,
  #wa {
    display:block;
  }
  
  #mobnav li a.tri {
    position:absolute;
    float:none;
    clear:none;
    right:0;
    top:0;
    width:6em;
    border-bottom:0;
  } */
  
    .tri img {
      float:left;
      width:23px;
      height:11px;
      display:block;
    }

  .mobbtns {
    float:left;
    clear:left;
    width:100%;
    text-align: center;
    margin-bottom:1em;
  }
  
  #burger,
  #email,
  #phone,
  #mobile,
  #wa {
    height:28px;
    width:28px;
    display:inline-block;
    margin:0.5em 1em;
  }
  
    .mobbtns a img {
      display:block;
      max-width: 100%;
      height:28px;
      width:28px;
    }

  #wa {
    position: fixed;
    right:2%;
    bottom:2%;
    width:35px;
    height:35px;
    z-index:101;
  }

    #wa img {
      width:100%;
      height:100%;
    }
    
  #mobnav li {
    display:block;
    position:relative;
    width:100%;
    float:left;
    clear:left;
  }
  
    #mobnav li a {
      float:left;
      clear:left;
      width:100%;
      color:#000;
      text-decoration:none;
      text-transform:uppercase;
      padding:1.6em 2em;
      position:relative;
      z-index:11;
      display: block;
      border-bottom:1px solid #ccc;
    }
    
      #mobnav .subnav {
        float:left;
        clear:left;
        width:100%;
        background-color:#eee;
      }
  
  header nav {
    float:left;
    width:100%;
    border-bottom:0;
  }
  
  #flogo {
    display:block;
    margin:2em auto;
    float:none;
    max-width:90%;
  }
  
  .flogos,
  .flogos2{
    display:none;
  }
  
  .footer-nav {
    float:none;
    margin:0 auto;
    padding-top:3em;
    display:block;
    clear:both;
    width:75%;
  }
  
    .footer-nav a {
      padding:0.5em;
    }

    .cookies {
      grid-template-columns: 1fr;
    }
}

@media screen and (max-width:550px) {
  
  footer {
    padding:4em 0;
  }
  
  .footer-nav {
    width:100%;
  }
  
    .footer-nav div {
      float:left;
      clear:left;
      width:100%;
    }
  
    .footer-nav a {
      display:block;
      width:100%;
      float:left;
      clear:left;
      padding:2em 1em;
      text-align: center;
      border-bottom:1px solid #ccc;
    }
  .copyright {
    padding:0 1em;
    text-align: center;
    line-height: 1.6;
  }

  .head h1,
  .head h2 {
    font-size:1.8em;
  }
}