@import url('https://fonts.googleapis.com/css?family=Lato:300,400');
/*Serif Fonts: */ 
@import url('https://fonts.googleapis.com/css?family=Lora|Playfair+Display:400,700,700i');
 
hr {
    color: rgba(223,190,106,0.1);
    background-color:rgba(223,190,106,0.1);
    border:rgba(223,190,106,0.1) solid .5px;
}
body {
    background:#231f20;
    color:white;
    font-family: 'Lato', sans-serif;
    font-weight:300;
}
.body-content {
    padding-top:270px;
    padding-left:calc(300px + 1em);
    padding-bottom:100px;
}

a{
    display: inline-block;
    color: white;
    text-decoration: none;
    position: relative;
  }
  a:hover {
      text-decoration: none;
      outline:none;
      color:#fff;
  }
  a::after{
    content: "";
    background: rgba(223,190,106,0.4);
    width: 100%;
    height: 20%;
    position: absolute;
    bottom: -4px;
    left: 0px;
      transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  }
  
  a:hover::after{
      height: calc(100% + 8px);
      color:#fff;
  }
  
  
.navbarx {
    position:fixed;
    display: inline-block;
    background:transparent;
    height:100%;
    padding:1em;
    max-width: calc(300px + 1em);
}
.navbtn {
    display: block;
    background: transparent;
    text-transform: uppercase;
    font-weight: 400;
    font-style: normal;
    font-size: 0.700rem;
    letter-spacing: 0.3em;
    transition: all .5s;
    color: rgba(223,190,106,0.7);
    border-radius: 0;
    padding: 15px 80px;
    padding-left:.625rem;
    background: linear-gradient(270deg, rgba(223,190,106,0.8), rgba(146,111,52,0.8), rgba(34,34,34,0), rgba(34,34,34,0));
    background-position: 1% 50%;
    background-size: 300% 300%;
    text-decoration: none;
    border: none;
    border: 1px solid rgba(223,190,106,0.3);
    margin:.625rem;
    width:270px;
  }
  
  .navbtn::after {
      display: none;
  }
  .navbtn:hover, .active {
    transition: all 0.35s;
    color: white;
    border: 1px solid rgba(223,190,106,0);
    color: white;
    background-position: 150% 50%;
  }
  .active {
    cursor: default;
    pointer-events: none;
    -webkit-touch-callout: none; 
      -webkit-user-select: none; 
       -khtml-user-select: none; 
         -moz-user-select: none; 
          -ms-user-select: none; 
              user-select: none;

  }
  .navbtn:active  {
      transition: none;
    background-position: 151% 50%;
  }
  #mainlogo {
       display: inline-block;
       margin:0 auto;
       transition: .25s width;
       padding:.625rem;
       width:400px;

    }

  .quickinfo {
      text-align: left;
      padding-top:2em;
      position: fixed;
      min-width:100%;
      background:#141213;
      height:230px;
      vertical-align:middle;
  }
  .quickinfo #contact span {
      cursor: default;
  -webkit-touch-callout: none; 
    -webkit-user-select: none; 
     -khtml-user-select: none; 
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none; 
  }
  .quickinfo h3 {
      display: inline;
  }
  .quickinfo a::after {
        height:5px;
  }
  .quickinfo #contact {
      margin-left:70%;
      display: block;
  }
  .menu {
      list-style: none;
      text-align: left;
  }
.storybox {
    width:73vw;
    margin-left:2vw;
    z-index: inherit 10000;
}
.storybox h1 {
    border-left:1px solid #fff;
    padding-left:15px;
    padding-top:.5em;
    margin-bottom:1em;
    font-family: 'Playfair Display', serif;
    font-weight:400;
}

.social-bar {
    padding-top:2em;
    display: block;
    position: absolute;
    margin: 0 auto;
    text-align: center;
    margin-left:40%;
}

    .social-bar div {
        margin: 0 1rem;
        text-align:center;
        display: inline-block;
        padding: 1rem;
        transition: all 0.3s ease;
        color: white;
        font-size: larger;
        transform: translateX(0%);
    }
        .glossybutton {
            padding:1em;
            text-align: center;

            cursor: pointer;
            letter-spacing: 0.2125rem;
            overflow: hidden;
            position: relative;
            transition: background 5s cubic-bezier(0.19, 1, 0.22, 1), border 1s cubic-bezier(0.19, 1, 0.22, 1), color 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            user-select: none;
            display: block;
            border:1px solid rgba(223,190,106,0.4) /* rgba(17,37,10,1) -damiani green */;
        }
        
            .glossybutton a {
                text-decoration: none;
            }
            .glossybutton a::after {
            display: none;
            }
            .glossybutton .mask {
                background-color: #fff;
                background-color: rgba(255, 255, 255, 0.5);
                height: 100px;
                position: absolute;
                transform: translate3d(-120%, -50px, 0) rotate3d(0, 0, 1, 45deg);
                transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
                width: 300px;
            }
        
            .glossybutton .shift {
                display: inline-block;
                transition: all 1.1s cubic-bezier(0.19, 1, 0.22, 1);
            }
        
            .glossybutton:hover {
                background-color: rgba(255, 255, 255, 0.05);
                border-color: rgba(223,190,106,0.7);
                transition: background 0.1s;
            }
        
                .glossybutton:hover a {
                    color: #fff;
                }
        
                .glossybutton:hover .mask {
                    background-color: #fff;
                    transform: translate3d(120%, -100px, 0) rotate3d(0, 0, 1, 90deg);
                }
        
                .glossybutton:hover .shift {
                    transform: translateX(5px);
                }
                .social-bar .glossybutton:hover .shift {
                    transform:scale(0.9);
                }
            .glossybutton:active {
                background-color: rgba(255, 255, 255, 0.4);
            }
        
                .glossybutton:active a {
                    color: #202020;
                }
        
#footer {
    font-family: 'Lora', serif;
    font-weight:300;
    font-size:smaller;
    text-align: center;
    bottom:0;
    display: none;
    position: relative;
    color:rgba(223, 190, 106, 0.4);
    cursor: default;
    -webkit-touch-callout: none; 
      -webkit-user-select: none; 
       -khtml-user-select: none; 
         -moz-user-select: none; 
          -ms-user-select: none; 
              user-select: none; 
}
input[type="text"], input[type="password"], input[type="email"], input[type="number"], select , textarea {
        width:100%;
        display: block;
        background: transparent;
        font-weight: 400;
        font-style: normal;
        font-size: 1rem;
        transition: all .5s;
        color: white;
        border-radius: 0;
        padding: 15px 80px;
        padding-left:.625rem;
        background: linear-gradient(270deg, rgba(180, 180, 180, 0.8), rgba(100, 100, 100, 0.8), rgba(34,34,34,0), rgba(34,34,34,0));
        background-position: 1% 50%;
        background-size: 300% 300%;
        text-decoration: none;
        outline:none;
        border: none;
        border: 1px solid rgba(180,180,180,0.3);
        margin:0;
      }
      
      input[type="text"]::after, input[type="password"]::after, input[type="email"]::after, input[type="number"]::after, select::after , textarea::after {
          display: none;
          
      }
      input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, input[type="number"]:hover, select:hover , textarea:hover {
        transition: all 0.15s;
        color: white;
        border: 1px solid rgba(180,180,180,0);
        color: white;
        background-position: 99% 50%;
        outline: none;
      }
      input[type="text"]:focus, input[type="text"]:focus:valid, input[type="password"]:focus,input[type="password"]:focus:valid, input[type="email"]:focus,input[type="email"]:focus:valid, input[type="number"]:focus, input[type="number"]:focus:valid, select:focus,select:focus:valid, textarea:focus, textarea:focus:valid {
        background-position: 151% 50%;
        border-top:none;
        border-right:none;
        border-left:none;
        border-bottom:1px solid rgba(180,180,180,0.3) ;
      }
      input[type="text"]:valid, input[type="password"]:valid, input[type="email"]:valid, input[type="number"]:valid, select:valid, textarea:valid {
        background-position: 150% 50%;
        border:1px solid rgba(180,180,180,0);
      }
      label {
        color: rgba(180,180,180,0.6);
        position: absolute;
        pointer-events: none;
        font-size:1.3rem;
        left: 5px;
        top: 10px;
        transition: 0.2s ease all;
        -moz-transition: 0.2s ease all;
        -webkit-transition: 0.2s ease all;
    }
    input[type="text"]:focus ~ label, input[type="text"]:valid ~ label{
        left: -20%;
    }
    input[type="email"]:focus ~ label,input[type="email"]:valid ~ label {
        left: -21%;
    }
     textarea:valid ~ label, textarea:focus ~ label{
        left:-27%;
     }
    .group {
        position: relative;
        margin: 10px auto 2em;
        max-width: 350px;
        
    }
    
.box {
    padding:2em;
    position: relative;
    background: rgba( 17, 37, 10, .4);
    border:2px solid rgba(223,190,106,0.8);
}
.box #date {
    font-size:1.5rem;
}
.box::after {
    display: none;
}
.aboutus img {
    filter:grayscale(70%);
    padding:5px;
    border:1px grey solid;
    border-radius: 4px;
}
.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
}

/* Create four equal columns that sits next to each other */
.column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
}

.column img {
    margin-top: 8px;
    vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}