/*Header*/
.bg-opacity{
    /*position: relative;*/
    /*background-color:rgba(0,0,0,0.4);*/
   /* margin-top: -10%;*/
    width:100%;
    height:105%;
  
  }
  .headerText
  {
    margin-top: 20%;
    position: absolute;
    width: 100%;
    -webkit-text-stroke-width: 1px;
    text-shadow: 2px 2px #000;
  }
  
  .bg-opacity::before{
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 105%;
    z-index: -1;
    background:       url("../img/IMG_5354.JPG")  no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
  }
 
    .bg-opacity h1 {
      text-align:center;
      text-transform:uppercase;
      color:#fff;
      letter-spacing:1px;
      font-weight:400;
      font-size:4vw;
      width:70%;
      margin:auto;
    }
    .bg-opacity h1 .lines {
        margin-top: 10px;
        font-size:2.5vw;
        color:#fff;
        word-spacing:1px;
        font-weight:normal;
        letter-spacing:2px;
        text-transform: uppercase;
        font-weight:500;
    
        display: grid;
        grid-template-columns: 1fr max-content 1fr;
        grid-template-rows: 27px 0;
        grid-gap: 20px;
        align-items: center;
        margin-top: 5%;
    }
    
    .bg-opacity h1 .lines:after,.bg-opacity h1 .lines:before {
        content: " ";
        display: block;
        border-bottom: 1px solid #fff;
        border-top: 1px solid #fff;
        height: 5px;
        background-color:transparent;
    }

/*
  .bg-opacity h1{
      color: white;
      margin-left: 35%;
      font-size:5vw;
       font-weight: bold;
      text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
  }
  .bg-opacity h2
  {
    color: white;
    margin-left: 60%;
    margin-top: 3%;
    font-size:3vw;
     font-weight: bold;
      text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
  }
  */
  
  .typewriter {
      
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    /*border-right: .15em solid #eee; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    /*margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em; /* Adjust as needed */
    animation: 
      typing 3.5s steps(40, end),
      blink-caret .75s step-end infinite;
  }
  @media (max-width: 1350px) {
    .headerText
    {
        margin-top: 30%;
        position: absolute; 
        width: 100%;

    }
   
  }
  @media (max-width: 920px) {
    .bg-opacity::before {
        background-attachment: scroll; 
      }
    .headerText
    {
        margin-top: 80%;
        position: absolute; 
        width: 100%;

    }
  }
  @media (max-width: 800px) {
   
    .bg-opacity{
      background-size: 100% 100%;
      height: 105%;
      position: absolute;
    }
    #contact
    {
      height: 60% !important;
    }
    .headerText
    {
        position: absolute;
        width: 100%;
        margin-top: 100%;
    }
    .bg-opacity {
        position: initial;
    }

    .bg-opacity::before {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
        clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
    }
    
  }
  @media (max-width: 550px) {
    .headerText
    {
        margin-top: 80%;
    }
   }
  @media (max-width: 300px) {
    .headerText
    {
        margin-top: 140%;
    }
   }

   .container {
    width: 100%;
   }

  /*Header End*/