/*#region Masterpage*/

* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url('../images/Multiful-AG-01.png');
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    min-width: 100vw;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    overflow-x: hidden;
    font-family: Alef;
}

a {
    color: rgba(255,255,255,255);
    text-decoration: none;
}
a:visited {
    color: rgba(255,255,255,255);
}

/* #region header*/
header {
    max-width: 100vw;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
}

header img {
    margin-left: auto;
    margin-right: auto;
    width: 35%;
}
header nav {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

    header nav ul {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        list-style: none;
    }
    header nav ul li::before {
        content: "■";
        color: #d9a06c;
        font-weight: bold;
        height: 2em;
        font-size: 2em;
        display: inline-block;
        width: 1em;
        /*margin-left: -2em;*/
    }

/* #endregion*/

/* #region footer */
footer {
    background-image: url('../images/Multiful-lijn.png');
    background-repeat: no-repeat;
    background-size: 100vw;
    height: 450px;
    max-width: 100vw;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    padding-left: 10%;
}

    footer > div {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr 1fr 1fr;
    }

        footer > div > div {
            width: 100%;
        }
            /*footer > div > div:nth-child(1) {
                background-color: green;
            }*/
    footer > div > div:nth-child(2) {
        /*background-color: red;*/
        display: grid;
        grid-template-columns: 1fr 2fr;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 5%;
    }

        footer > div > div > div {
            display: grid;
            grid-template-columns: 1fr;
        }

            footer > div > div > div > div {
                display: grid;
                grid-template-columns: 1fr 1fr;
            }

footer > div > a {
    width: 80%;
}
footer > div > a > img {
    width: 100%;
}
/* #endregion*/

/*#endregion*/

/* #region Categorypages */
.titleSection {
    display: flex;
    justify-content: center;
    align-items: center;
}
.titleSection > span {
    color: rgba(255,255,255,255);
    text-align: center;
    border-bottom: 2px solid rgba(255,255,255,255);
    font-size: 2em;
}

.imagesSection {
    display: flex;
    justify-content: center;
    align-items: center;
}

.imagesDiv {
    width: 60%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 20px;
}

.imagesDiv > div {
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.imagesDiv > div > a {
    width: 90%;
    height: 90%;
    position: relative;
}
.imagesDiv > div > a img {
    height: 100%;
    width: 100%;
}
    .imagesDiv > div > a > div {
        height: 100%;
        width: 100%;
        background-color: rgb(255, 187, 0, 0.5);
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0%;
        left: 0%;
        opacity: 0;
        transition: opacity .2s ease-in;
    }
        .imagesDiv > div > a > div:hover {
            opacity: 1;
            transition: opacity .2s ease-in;
        }
/* #endregion*/
        /*#region login.aspx*/
        .uitlijning {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .uitlijning > div {
        background-color: rgb(24, 26, 27);
        padding: 2%;
        border-radius: 20px;
        border: darkgoldenrod solid;
        color: antiquewhite;
        width: 100%;
    }

.txts {
    border: none;
    border-radius: 20px;
    padding: 2%;
    text-indent: 5px;
}

.lbls {
    display: inline-block;
    vertical-align: top;
}

.btnlogin {
    color: darkgoldenrod;
    border: none;
    cursor: pointer;
    font-size: 1em;
    transition: color 0.2s ease-out;
    background-color: transparent;
}

    .btnlogin:hover {
        transition: color 0.2s ease-out;
        color: gold;
    }

.validator {
    color: red;
}
/*#endregion*/

/*#region ProjectInfo.aspx*/

#projectInfoSection {
    color: rgba(255,255,255,255);
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 100vw;
}
#projectInfoSection > div {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
}
    #projectInfoSection > div > div {
        display: grid;
        grid-template-columns: 1fr;
    }
#projectInfoSection > div:first-child > div {
    width: 80%;
}
#projectInfoSection > div:first-child > div > div:first-child{
    display: flex;
    justify-content: center;
    align-items: center;
}
    #projectInfoSection > div:first-child > div > div:first-child > input {
        background-color: #121212;
        box-shadow: none;
        color: #d9a06c;
        border: solid gray 2px;
        margin: 2%;
        padding: 2% 5%;
        font-weight: bold;
        transition: box-shadow 0.2s ease-in;
        border-radius: 10px;
        cursor: pointer;
    }

        #projectInfoSection > div:first-child > div > div:first-child > input:hover {
            box-shadow: black 5px 5px 5px 0px;
            transition: box-shadow 0.2s ease-in;
        }
#projectInfoSection > div:first-child > div > img {
    margin-left: auto;
    margin-right: auto;
}
/*#projectInfoSection > div:first-child {
    background-color: yellow;
}
#projectInfoSection > div:last-child {
    background-color: orange;
}*/
    #projectInfoSection > div:first-child > div > div:last-child {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        max-width: 100%;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        background-color: lightgray;
    }
    #projectInfoSection > div:first-child > div > div:last-child > div {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
        #projectInfoSection > div:first-child > div > div:last-child > div > input {
            width: 80%;
            box-shadow: none;
            margin: 2%;
            padding: 2%;
            transition: box-shadow 0.2s ease-in;
        }
            #projectInfoSection > div:first-child > div > div:last-child > div > input:hover {
                box-shadow: black 5px 5px 15px 0px;
                transition: box-shadow 0.2s ease-in;
            }

    #projectInfoSection > div:first-child > div > div:nth-child(2) {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #projectInfoSection > div > div > div > img {
        max-height: 750px;
        max-width: 100%;
        height: 100%;
        background-color: gray;
    }
    #projectInfoSection > div > div > div > input[type=image] {
        height: 200px;
        max-width: 100%;
    }
    #projectInfoSection > div:last-child > div > h2 {
        text-align: center;
        max-width: 80%;
    }
    #projectInfoSection > div:last-child > div > div {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 3%;
        max-width: 80%;
    }
/*#endregion*/