html {
    background-color: #7b8a6a;
    height: 100vh;
}

body {
    font-family: "lora", serif;
    background-image: linear-gradient(#3a3f42 45%, #1c1c1c);
    font-size: 20px;
    line-height: 1.5em;
    cursor: url("../images/cursor.png") 5 5, default;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: "Lexend Peta", sans-serif;
}

h1,
h2 {
    line-height: 1.2em;
    letter-spacing: -1px;
}

a:link,
a:visited{
    color: #5c0104;
    text-decoration: underline;
    font-weight: bold;
}
a:hover,
a:focus {
    color: #5c0104;
    border-bottom: 3px solid #8ec6c3;
    text-decoration: none;
    transition: 0.3s ease-out;
}
a:active {
    color: #5c0104;
    text-decoration: none;
    font-weight: bold;
}

/*BUTTONS*/

.button,
.button:link, 
.button:visited,
.button.active {
    color: #fff;
    background-color: #5c0104;
    padding: 1em 0;
    margin-top: 1em;
    width: 100%;
    max-width: 400px;
    display: inline-block;
    text-align-last: center;
    border-radius: 8px;
    text-decoration: none;
}
.button:hover,
.button:focus {
    background-color: #8ec6c3;
    color: #000;
    transition: 0.3s ease-out;
}

/*IMAGES*/

img {
    margin: 0;
    padding: 0;
    max-width: 100%;
    height: auto;
}

.left-align {
   float: left; 
   margin: 1em 1em 1em 0;
}

.right-align {
    float: right;
    margin: 1em 0 1em 1em;
}

/*figure {
    outline: 3px solid #444;
    padding: 0;
    box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
}

figure img {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    display: block;
}

figcaption {
    color: #fff;
    background-color: #444;
    text-align: center;
    font-size: 0.7em;
    line-height: 1em;
    font-style: italic;
    margin: 0;
    padding: 0.5em;
}*/

/*TABLE*/

table {
    border-collapse: separate;
    border-spacing: 0.5em;
    width: 100%;
}

table th:first-child,
table td:first-child {
    width: 30%;
}

table th:last-child,
table td:last-child {
    width: 70%;
}

table caption {
    font-family:  "Lexend Peta", sans-serif;
}

th {
    font-family:  "Lexend Peta", sans-serif;
    font-size: 1.25em;
    color: #f6f1e6;
    background-color:rgba(92, 1, 4, 0.6);
    padding: 10px;
}

tr {
    font-size: 1.2em;
    line-height: 1.25em;
}

td {
    vertical-align: top;
    color: #000;
    background-color: rgba(123, 138, 106, 0.36);
    padding: 0.5em;
}

.table_replacement {
    display: none;
}


/*FORMS*/

label {
    font-family: "Lexend Peta", sans-serif;
    text-align: left;
    float: left;
    width: 25%;
}

.inputs {
    width: 70%;
    padding: 0.5em;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgba(197, 197, 197, 0.7);
    border: 0;
}

input[type="submit"] {
  box-shadow: none;
  border: none;
}

.beehiiv-wrap {
    width: 100%;
    max-width: 420px;
    margin: 1.5em auto 0 auto;
}


/*WRAPPER*/

#wrapper {
    max-width: 1280px;
    margin: 0 auto;
}

#header_nav {
    width: 100%;
    z-index: 99;
    box-shadow: 0 5px 10px rgba(0,0,0,0.25);
}

header {
    background-image: url(../images/headerbackground2.jpg);
    background-repeat: repeat-x;
    background-size: auto 100%;
    min-height: 140px;
    padding: 1em;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*LOGO*/

.logo {
    text-align: center;
}

.logo img {
    max-width: 100%;
    height: auto;
    margin: 0;
}

.logo a{
    border-bottom: none;
}

/* NAVIGATION*/

nav {
    font-size: 0.8em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background-color: #7b8a6a;
    padding: 1em;
    text-align: center;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
    box-sizing:border-box;
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
}

.primary_navigation {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 999;   
}

nav ul {
    margin: 0;
    padding: 0;
}

nav li {
    display: inline;
    margin-right: 3.5em;
}

nav li:last-child {
    margin-right:0;
}

nav a:link,
nav a:visited {
    color:#fff;
    text-decoration: none;
}
nav a.active {
    color:#5c0104;
}
nav a:hover,
nav a:focus {
    color: #5c0104;
    border-bottom: 3px solid #8ec6c3;
    transition: all 0.25s ease;
}

.mobile_menu {
    font-family: "Lora", serif;
    font-weight: 600;
    text-decoration: none;
    border-bottom: none;
    color: #fff;
    background-color:#7b8a6a;
    text-align: center;
    padding: 1em 0;
    display: none;
}


nav input[type=checkbox] {
     display: none;
}

nav input[type=checkbox]:checked~#menu {
     display: block;
    }




/*CONTENT*/

main {
    background-color: #f2e6D0;
    background-image: url(../images/brandicon.png);
    background-repeat: no-repeat;
    background-position: bottom 20px left 20px;
    width: 100%;
    min-height: 300px;
    margin-bottom: 1em;
    padding-top: 30px;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 30px;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
    box-sizing:border-box;
}

.main_with_aside {
    width: 75%;
    padding: 30px;
    float: left;
    background-image: url(../images/cornerbackground.png);
    background-repeat: no-repeat;
    background-position: top right;
}

aside {
    background-color: #f2e6D0;
    margin-bottom: 1em;
    padding: 20px;
    width: 23.5%;
    min-height: 250px;
    float: right;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
    box-sizing:border-box;
}

.hero-section {
    background-image: url('../images/heroimage1.jpg');
    background-size: cover;
    background-position: center;
    min-height: 650px;
    width: 100%;
    padding: 0;
    text-align: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}   


.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section p {
    margin: 0.3em 0;
    color: #000;
    font-weight: normal;
}

.hero-section-content {
    width: 100%;
    padding-top: 3em;
    padding-bottom: 2em;
    background: linear-gradient(to bottom, rgba(242, 230, 208, 0.0), rgba(242, 230, 208));
}

section {
    scroll-margin-top: 140px;
}


/*ENEWSLETTER ASIDE*/

.enewsletter-aside {
    background-color: #7b8a6a;
    width: 100%;
    min-height: 100px;
    text-align: center;
    float: none;
    color: #f6f1e6;
}


/*FOOTER*/

footer {
    color: #f6f1e6;
    font-size: 0.8em;
    text-transform: uppercase;
    background-color: #7b8a6a;
    padding: 1em;
}

footer h1,
footer h2,
footer h3,
footer h4 {
    text-align: center;
}

footer a:link, 
footer a:visited,
footer a:active {
    color:#5c0104;
    text-decoration: none;
}

footer a:hover,
footer a:focus {
    color:#8ec6c3;
    text-decoration: underline;
    border-bottom: none;
}

footer nav {
    background-color: #7b8a6a;
    box-shadow: none;
}

/* CUSTOM STYLES*/

hr {
    border: none;
    height: 2px;
    background: linear-gradient(to right, transparent, #5c0104, transparent);
    margin: 2em 0;
}


.clearfix {
    clear: both;
}

.centered-content-box {
    margin: 0 auto;
    text-align: center;
}

.content-column {
      -webkit-column-count: 2;
      -moz-column-count: 2;
    column-count: 2;
    column-gap: 1.5em;
      -webkit-column-gap: 1.5em;
      -moz-column-gap: 1.5em;
}

 a i:hover{
    transition: transform 0.5s ease-out;
    transform: rotate(25deg)scale(1.1,1.1);
}

.box_drop_shadow {
    box-shadow: 5px 10px 20px rgba(92, 1, 4, 0.76);
}

#form-status {
  margin-top: 15px;
  font-family: 'Lora', serif;
  font-size: 1rem;
  text-align: center;
}

#form-status.form-success {
  color: #000;
  font-weight: bold;
}

#form-status.form-error {
  color: #c62828;
  font-weight: bold;
}



/*MEDIA QUERIES*/

@media screen and (max-width: 1024px) {  
   .content-column {
       -webkit-column-count: 1;
       -moz-column-count: 1;
      column-count: 1;
    } 
    main {
        padding: 40px;
        clear: both;
    }
    
    .main_with_aside {
        width: 100%;
        padding: 40px;
        clear: both;   
    }
    
    aside {
        width: 100%;
        padding: 40px;
        clear: both;
    }
}

@media screen and (max-width: 768px) {    
    label {
        width: 100%;
        clear: both;
    }
    
    .inputs {
        width: 100%;
    }
    
    #menu {
        display: none;
    }
    
    .mobile_menu {
        display: block;
        box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    }
    
    .primary_navigation {
        padding: 0;
    }
    
    .primary_navigation ul{
        padding: 0;
    }
    
    .primary_navigation li{
        display: block;
        margin-right: 0;
        margin-left: 0;
        margin: 0 auto;
        padding: 0.5em;
    }
    
    .primary_navigation li:active {
        color: #000;
        background-color: #8ec6c3;
    }
    
    .primary_navigation a:active {
        color: #fff; 
    }
    
    .left-align {
        float: none; 
        margin: 0 auto;
     }

    .right-align {
        float: none;
        margin: 0 auto;
     }
}

@media screen and (max-width: 480px) {
    body {
        font-size: 16px;
    }
    
    main {
        padding: 20px;
    }
    
    .main_with_aside {
        padding: 20px;
    }
    
    aside {
        padding: 20px;
    }
    
    .hero-section {
        min-height: 450px;
    }
    
    table {
        display: none;
    }
    
    .table_replacement {
        display: block;
        text-align: center;
        padding: 0.5em;
        background-color: rgba(205, 205, 205, 0.7);
    }
    
    .table_replacement h3{
        margin-bottom: -15px;
    }
}