/*  ----- Page layout blocks -----  */
html {
    background-color: rgb(76,76,76);
    background-color: rgba(76,76,76,1);
}
header {
  margin: 0;
  padding: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  width: 100%;
  height: 15vmin;
  font-family:"Calibri", sans-serif;
  border-bottom: 1px solid white;
  font-size: 1vmin;
  display:flex;
  align-items:center;
  justify-content:center;
}

body {
    font-family:"Calibri", sans-serif;
    min-height: 100%;
    margin-bottom: -250px;
    margin: 0;
    padding: 0;
    background-color: rgb(256, 256, 256);
    background-color: rgba(256, 256, 256, 1);
    font-size: 18px;
}


.flex-container {
  display: flex;
  flex-direction: row;
}

.flex-left {
  width: 40%;
  margin: 5px;
  padding: 5px;
}

.flex-right {
  width: 60%;
  margin: 5px;
  padding: 5px;
}
.flex-right-centered {
  width: 60%;
  margin: 5px;
  padding: 5px;
  display:flex;
  align-items:center;
}

footer {
  margin: 0;
  padding: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 250px;
  font-family:"Calibri", sans-serif;
  display:flex;
  color: white;
  font-size: 2vmin;
}

.push {
  height: 250px;  
}

.header-img {
    height: 15vmin;
    width: auto;
}

.header-phone {
    margin-left:5vmin;
}

.footer-img {
    width: 100%;
    height: auto;
}

.home-article {
    margin: 1%;
    margin-right:10%;
    margin-left:10%;
    padding: 5%;
    border:1px solid  rgb(173,31,36);
}

.sub-article {
    margin: 1%;
    margin-right:10%;
    margin-left:10%;
    padding: 5%;
    border:1px solid rgb(173,31,36);
}


.home-image {
    width:100%;
    height:500px;
}

nav{
    color: white;
    display:flex;
    align-items:center;
}

nav a {
    text-decoration: none;
    color: white;
    padding: 5vmin;
    cursor:pointer;
}

nav a:hover{
    text-decoration: none;
    color: white;
    background-color: rgb(173,31,36);
}

.footer-nav {
    text-decoration: none;
    color: white;
    cursor:pointer;
}

.footer-nav:hover {
    text-decoration: none;
    color: rgb(173,31,36);
}

.current {
    background-color: rgb(173,31,36);
}

.footer-box {
    height:25%;
    Width:25%;
    word-break: normal;
    
}

.header-box-right {
    height:100%;
    Width:80%;
    align-items:center;
    align-content:center;
    justify-content:center;
}

.header-box-left {
    height:100%;
    Width:20%;
}

.footer-ul { 
    list-style: none; 
    margin: 0;
    padding: 0;
}

.footer-ul-right {
    clear:right;
    list-style: none; 
    margin: 0;
    padding: 0;
    padding-right:5%;
    text-align:right;
}

.linked-in {
    float:right;
    width:5vmin;
    height:auto;
    padding-right:5%;
}

.img-box1 {
    width:25%;
    height:15vw;
    border:1px solid rgb(173,31,36);
    background-image: url(https://mardac.com/img/JonCMeyers_Mardac_0227.jpg);
    background-repeat:no-repeat;
    background-position: center center;
    background-size:100%;
}
.img-box2 {
    width:25%;
    height:15vw;
    border:1px solid rgb(173,31,36);
    background-image: url(https://mardac.com/img/JonCMeyers_Mardac_0149.jpg);
    background-repeat:no-repeat;
    background-position: center center;
    background-size:200%;
}
.img-box3 {
    width:25%;
    height:15vw;
    border:1px solid rgb(173,31,36);
    background-image: url(https://mardac.com/img/Mrdac01132.jpg);
    background-repeat:no-repeat;
    background-position: center center;
    background-size:100%;
}
.spacer-box {
    width:6.25%;
    height:15vw;
}

.box-nav {
    display:flex;
    align-items:center;
    align-content:center;
}

.div-fore {
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    align-items:center;
    align-content:center;
    color:white;
}

.page-nav {
    color: white;
    text-decoration:none;
    cursor:pointer;
}

.page-nav:hover {
    color: rgb(173,31,36);
    text-decoration:none;
}

.bio-box {
    margin: 1%;
    margin-right:10%;
    margin-left:10%;
    padding: 5%;
    border:1px solid rgb(173,31,36);
    
}

.bio-img {
    height:20vmin;
    width:auto;
    border:1px solid rgb(173,31,36);
    margin-right:5%;
}

.inner-box {
    display:flex;
    align-items:flex-start;
    align-content:flex-start;
    justify-content:flex-start;
}

.contact-box {
    height:100%;
    display:flex;
}

.contact-spacer {
    width:20%;
}

.contact-left {
    width:20%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    align-content:flex-start;
    justify-content:flex-start;
    margin-top:1%;
    margin-bottom:1%;
}

.contact-right {
    width:40%;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
}

.contact-info {
    width:100%;
    height:5vmin;
    border:1px solid black;
    outline:none;
    padding-left:25px;
    padding-right:25px;
    border-radius:50px;
    font-family:"Calibri", sans-serif;
}
.contact-right textarea {
    height:20vmin;
    padding-top:2%;
    border-radius:20px;
}

.contact-info:focus {
    border:2px solid rgb(173,31,36);
}

.contact-info::placeholder {
    font-size: 12px;
    align-items:center;
    align-content:center;
    justify-content:center;
}

.contact-right button {
    display:flex;
    align-items:center;
    padding:2%;
    color:white;
    border:none;
    border-radius:20px;
    background-color:rgb(173,31,36);
    font-size: 18px;
    cursor:pointer;
    margin-bottom:2%;
}

.left-border {
    border-left: 3px solid rgb(173,31,36);
    padding-left:2%;
}

.contact-logo {
    height: 12vmin;
    width: auto;
}

@media (max-width: 1400px) {
    .header-img {
        display:none;
    }
    .header-box-left {
        display:none;
    }
    .header-box-right {
        width:100%;
    }
    .contact-spacer {
        display:none;
    }
    .contact-box {
        display:inline;
    }
    .contact-right {
        margin-left:25%;
    }
    .contact-left {
        margin-left:25%;
    }
    
    nav a {
    padding: 4vmin;
    }

}
.back-div {
    text-align:center;
    display:flex;
    align-items:center;
    align-content:center;
    justify-content:center;
}

.back {
    display:flex;
    align-items:center;
    padding:20px;
    color:white;
    border:none;
    border-radius:20px;
    background-color:rgb(173,31,36);
    font-size: 18px;
    cursor:pointer;
    margin-bottom:2%;
    text-decoration:none;
}

.email {
    text-decoration:none;
    cursor:pointer;
    color:white;
}

.email:hover {
    text-decoration:none;
    color:white;
    color: rgb(173,31,36);
}