* {
    padding: 0;
    margin: 0;
}

html,
body {
    height: 100%;
    background-color: #16161d;
    scroll-behavior: smooth;
    color: #ddd;
}

.welcomeText {
    font-size: 6vw;
    font-family: 'Oswald', sans-serif;
    line-height: 105%;
    padding: 0px;
    margin: 0px;
    color: #a5a097;
    background-color: transparent;
    font-weight: 500;
}

.buttonRow {
    text-align: center;
    padding: 25px;
}

.allLinks {
    padding: 25px;
}

.btn {
    color: #ddd;
    font-family: 'Alata', sans-serif;
    background: #904e55;
    margin: 5px;
    padding: 10px;
    margin-bottom: 50px;
    margin-top: 30px;
}

.btn:hover {
    color: #16161d;
    background: #ddd;
}

.link {
    font-size: 2.5em;
    font-family: 'Oswald', sans-serif;
    line-height: 105%;
    padding: 10px;
    margin-top: 20px;
    color: #a5a097;
    text-decoration: none;
    margin-bottom: 500px;
}

.link:hover {
    color: #904e55;
}

.link:active {
    color: #ddd;
}

.portfolio {
    color: #ddd;
}

.sorted {
    float: left;
    display: none;
    opacity: 0;
    border: #16161d 5px solid;
    border-radius: 20px;
}

.show {
    display: block;
    height: 25vw;
    opacity: 1;
}

img {
    height: 25vw;
    max-width: 25vw;
    border: 0;
}

.container-fluid {
    padding: 0;
}

.row {
    padding: 0;
    margin: 0;
    /* justify-content: center; */
}

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

.col-12, .col-sm-6, .col-md-6, .col-lg-3 {
    padding: 0;
}

.backgroundImage {
    background-position: center;
    background-repeat: no-repeat;
}

.overlay {
    position: relative;
}

.overlay:hover .overlayText {
    display: block;
    background: rgb(22, 22, 29, .5);
    border-radius: 15px;
}

.overlay .overlayText {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    color: #ddd;
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    text-align: center;
    padding-top: 45%;
    opacity: 1;
}

.mainTextBox {
    text-align: left;
    width: 80pc;
    display: block;
    margin-left: 9pc;
    margin-right: 9pc;
    padding: 40px;
    margin-top: 40px;
}

.mainText {
    font-size: 1.75em;
    font-family: 'Alata', sans-serif;
    line-height: 125%;
    padding: 0px;
    margin: 0px;
    color: #ddd;
    background-color: transparent;
}

h5 {
    font-size: 4em;
    font-family: 'Oswald', sans-serif;
    line-height: 105%;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0px;
    color: #16161d;
    background-color: transparent;
    font-weight: 500;
}

.aboutLink {
    color: #904e55;
    text-decoration: none;
    background-color: transparent;
}

.aboutLink:hover {
    color: #16161d;
}

.aboutLink:active {
    color: #ddd;
}

.mainTextDiv {
    padding-bottom: 20px;
    margin-top: 40px;
    margin-bottom: 20px;
}

.about-image {
    margin: 10px;
    border: 5px solid #ddd;
    border-radius: 15px;
}

.logo_div {
    text-align: center;
}

.logo {
    height: auto;
    width: 50vw;
    padding-bottom: 30px;
}

.falinks {
    display: block;
    text-align: center;
}

.fa {
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px;
    margin-bottom: 35px;
    font-size: 1.5em;
    width: 45px;
    text-align: center;
    text-decoration: none;
    border-radius: 15%;
}

.fa:hover {
    text-decoration: none;
    background: #904e55;
    color: #ddd;
}

.fa:active {
    text-decoration: none;
    background: #ddd;
    color: #16161d;
}

.fa-twitter, .fa-instagram, .fa-github, .fa-linkedin, .fa-dribbble, .fa-behance {
    background: #a5a097;
    color: #16161d;
}

.fa-angle-double-left {
    background: #904e55;
    color: #ddd;
}

.fa-angle-double-left:hover {
    text-decoration: none;
    background: #16161d;
    color: #a5a097;
}

.fa-angle-double-left:active {
    background: #ddd;
    color: #16161d;
}

.fa-images {
    color: #ddd;
    font-size: 48px;
}

.page-footer {
    width: 100%;
    position: absolute;
    padding-bottom: 100px;
    margin-top: 80px;
}

.galleryRow {
    align-items: center;
    text-align: center;
    padding-left: 10%;
    padding-right: 10%;
}

.gallery {
    width: 18vw;
    margin: 5px;
    height: 18vw;
    border: 5px solid #ddd;
    border-radius: 20px;
}

.formDiv {
    /* background-color: #5f6366; */
    background-color: #16161d;
    color: #d9d4c0;
}

.card {
    background-color: transparent;
    border: 0px solid #ddd;
    padding: 10px;
    margin-bottom: 100px;
}

.form-group {
    padding: 10px;
    border-radius: 0px;
}

.form-control {
    background-color: transparent;
    border: 1px solid #a5a097;
    border-radius: 0px;
    color: #ddd;
}

.form-control::-webkit-input-placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    font-family: 'Public Sans', sans-serif;
    color: #ddd;
    opacity: 1;
    font-weight: 200;
    /* Firefox */
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #ddd;
}

::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #ddd;
}

.form-control::-webkit-input-placeholder {
    font-family: 'Public Sans', sans-serif;
    color: #ddd;
}

.required {
    padding: 5px;
    color: #d9d4c0;
}

.buttonDiv {
    display: flex;
    justify-content: center;
}

.btn-success {
    border-color: #904e55;
}

@media only screen and (max-width: 991px) {

    .col-12, .col-sm-6, .col-md-6, .col-lg-3 {
        height: 50vw;
    }

    img {
        height: 50vw;
        max-width: 50vw;
        border: 0;
    }

    .link {
        padding-left: 0px;
    }

    .mainTextBox {
        padding: 15px;
    }
    
    .contactMsgRow {
        height: 5px;
    }

    .form-group {
        height: 6em;
    }

    .btn {
        height: 4em;
        width: 6em;
    }
}

@media only screen and (max-width: 699px) {

    .col-12, .col-sm-6, .col-md-6, .col-lg-3 {
        height: 50vw;
    }

    img {
        height: 50vw;
        max-width: 50vw;
        border: 0;
    }

    .btn {
        color: #ddd;
        font-family: 'Alata', sans-serif;
        background: #904e55;
        margin: 4px;
        width: 80vw;
    }

    #myBtnContainer {
        padding: 20px;
    }

    .link {
        padding-left: 0px;
    }

    .form-group {
        height: 6em;
    }

    .mainTextBox {
        padding: 15px;
    }


}

@media only screen and (max-width: 575px) {
  
    .col-12, .col-sm-6, .col-md-6, .col-lg-3 {
        height: 99.9vw;
    }

    img {
        height: 99.9vw;
        max-width: 99.9vw;
        border: 0;
    }

    .link {
        padding-left: 0px;
    }

    .form-group {
        height: 6em;
    }

    .mainTextBox {
        padding: 15px;
    }

}

 /* div {
    border: 1px solid red;
}  */