/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
/*  border: 0;*/
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}






/*      default css*/
* {
    box-sizing: border-box;
/*    border: 1px solid red;*/
} 


.wrapper {
    margin: auto;
} 


.title {
    font-size: 1.85em;
    padding-left: 20px; 
    padding-top: 3px;   
    font-family: Raleway, sans-serif;
    font-weight: 600;
}


.highlight {
    font-size: 1.7em;
}



h2 {
    font-size: 1em;
    font-family: Raleway, sans-serif;
    font-weight: 600;
}


.image-title {
    font-size: 1.3em;
    font-family: Raleway, sans-serif;
    font-weight: 600;
}


body {
    font-family: "Crimson Pro", serif;
    padding-top: 62px;   
    padding-bottom: 100px;
}


html, body {
    height: 100%;
}

.container {
    min-height: 100%;
}

.wrapper {
    overflow: auto;
    padding-bottom: 120px;
}

.footer {
    position: relative;
    height: 100px;
    margin-top: -100px;
    clear: both;

    background-color: #F2ECE9; 
    text-align: center;
    padding: 15px; 
    font-family: "Crimson Pro", serif;
    font-size: .9em; 
    line-height: 1.2;
}


.footer a {
    text-decoration: none;
}


.footer a:link, .footer a:visited {
    color: #0D0806; 
/*    #0D0806 = black color */
}


.footer a:hover, .footer a:active {
    color: #F23C13;
}



#aitool a:link {
    text-decoration: underline;
    color: #0D0806; 
}


#aitool a:hover, #aitool a:active {    
    text-decoration: none;
    color: #F23C13;
}




/*navigation styles start here*/
.navbar {
    text-align: center;
    padding: 15px;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;  
}


header {
    background: rgba(242, 236, 233, .9);
    text-align: center;
    position: sticky;
    z-index: 999;
    width: 100%;
}


nav {
    background: rgba(242, 236, 233, .9);
    position: absolute;
    text-align: left;
    top: 100%;
    left: 0;
    width: 100%;
    transform: scale(1, 0);
    transform-origin: top;
    transition: transform 400ms ease-in-out;
}


.nav-toggle {
    display: none;
}


.nav-toggle-label {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 1em;
    height: 100%;
    display: flex;
    align-items: center;
}


.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
    display: block;
    background: #A7BF73;    
    height: 2px;
    width: 1.5em;
    border-radius: 2px;
    position: relative;
}


.nav-toggle-label span::before,
.nav-toggle-label span::after {
    content: "";
    position: absolute;
}


.nav-toggle-label span::before {
    bottom: 7px;
}


.nav-toggle-label span::after {
    top: 7px;
}


nav ul {
    margin: 0;
    padding-top: 10px;
    list-style: none;
}


nav li {
    margin-bottom: 1em;
    margin-left: 1em;
}


nav a {
    color: #F23C13;
    text-decoration: none;
    font-size: 1rem;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 150ms ease-in-out;
}


nav a:hover {
    color: #0D0806;
}


.nav-toggle:checked ~ nav {
    transform: scale(1, 1);
}


.nav-toggle:checked ~ nav a {
    opacity: 1;
    transition: opacity 250ms ease-in-out 250ms;
}


.wrapper {
    max-width: 800px; 
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(5, 1fr);    
}


.item1 {
    grid-column: 1/6;
    grid-row: 1/2;
}


.item2 {
    grid-column: 1/2;
    grid-row: 2/3;
}

.item3 {
    grid-column: 2/3;
    grid-row: 2/3;
}

.item4 {
    grid-column: 3/4;
    grid-row: 2/3;
}

.item5 {
    grid-column: 4/5;
    grid-row: 2/3;
}


.item6 {
    grid-column: 5/6;
    grid-row: 2/3;
}


.item7 {
    grid-column: 1/6;
    grid-row: 3/4;
}


.item8 {
    grid-column: 1/2;
    grid-row: 4/5;
}


.item9 {
    grid-column: 2/3;
    grid-row: 4/5;
}


.item10 {
    grid-column: 3/4;
    grid-row: 4/5;
}


.item11 {
    grid-column: 4/5;
    grid-row: 4/5;
}


.item12 {
    grid-column: 5/6;
    grid-row: 4/5;
}


.item13 {    
    grid-column: 1/6;
    grid-row: 5/6;
}


.item14 {
    grid-column: 1/6;
    grid-row: 6/7;
}


.image1, .image13, .image14 {
    max-width: 100%; 
    max-height: 100%;      
}

.image-img1, .image-img13, .image-img14 {    
    max-width: 100%;
    max-height: 100%;
}


.image2, .image8 {
    position: relative;
    width: 100%;
    height: auto;
}

.image-img2, .image-img8 {
    display: block;
    width: 100%;
}

.image3, 
.image4, 
.image5, 
.image6, 
.image9, 
.image10, 
.image11, 
.image12 {
    position: relative;
    width: auto;    
}


.image-img3, 
.image-img4, 
.image-img5, 
.image-img6, 
.image-img9, 
.image-img10, 
.image-img11, 
.image-img12 {
    display: block;
    width: 100%;
}


.image7 {
    position: relative;
    width: 100%;    
}

.image-img7 {
    display: block;
    width: 100%;
}

.image1,
.image2,
.image3, 
.image4, 
.image5, 
.image6,
.image7,
.image8, 
.image9, 
.image10, 
.image11, 
.image12,
.image13,
.image14 {
    text-align: center;
} 


.image-description {
    font-size: 5px;
    color: white;
}



.modal {
    padding: 1em;
    max-width: 50ch;
    border: 0;
    box-shadow: 0 0 1em rgba(0, 0, 0, .3);
    & > * {
        margin: 0 0 .5rem 0;
    }
    animation-name: modalopen;
    animation-duration: 1s;
}


.modal::backdrop {
    background: linear-gradient(45deg, #F23C13, #0A7ABF);
    opacity: .4;

}

@keyframes modalopen {
    from {opacity: 0}
    to {opacity: 1}
}


.close-button {
    float: right;
    margin-right: 15px;
    background-color: white;
    color: #0D0806;
    border: 1.5px solid #0D0806;
}


.close-button:hover {
    cursor: pointer;
    background-color: #0D0806;
    color: white;
}


.modal-header {
    padding: 15px;
    font-weight: bold;
    font-size: 1.7em;
}


.modal-body {
    padding: 0 15px 15px 15px;
}



@media screen and (min-width: 800px) {
    .title {
        grid-column: 1/5;
        font-size: 5em;
        padding: 20px 20px; 
    }

    .highlight {
        font-size: 3.5em;
    }


    h2 {
        font-size: 1.2em;
            }


    .image-title {
        font-size: 3em;        
    }


    body {
        padding-top: 165px;
    }   


    .nav-toggle-label {        
        display: none;
    }


    header {
        display: grid;
        grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr;
    }


    nav {
        all: unset;
        grid-column: 2/4;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    nav a {
        opacity: 1;
        position: relative;
    }

    nav a::before {
        content: "";
        display: block;
        height: 1px;
        background: #0D0806;
        position: absolute;
        bottom: -.75em;
        left: 0;
        right: 0;
        transform: scale(0, 1);
        transition: transform ease-in-out 250ms;
    }


    nav a:hover::before {
        transform: scale(1, 1);
    }

    nav ul {
        display: flex;
        justify-content: flex-end;
    }

    nav li {
        margin-left: 2em;
        margin-bottom: 0;
    }

    .navbar {
        text-align: center;
        padding: 15px;

        position: fixed;
        top: 0;
        left: 0;
        width: 100%;  
    }

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

    .navbar li {
        display: inline-block;
        margin: 0 10px;
    }

    .navbar a {
        text-decoration: none; 
    }
}


/*about page*/

#col-grid1 {
    grid-column: 1/6;
    padding: 50px 50px 0px 50px;
}


#col-grid2 {
    grid-column: 1/6;
    padding: 0px 50px;   
}


#follow-up {
    grid-column: 1/6;
    background-color: #0D0806;
    color: white;
    padding: 2px 10px;
    margin: 30px 58px;
}



@media screen and (min-width: 800px) {
    .wrapper {
        max-width: 1200px; 
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }
    
    #col-grid1 {
        grid-column: 2/5;
        padding: 50px 130px 0px 130px;
    }


    #col-grid2 {
        grid-column: 2/5;
        padding: 0px 130px;
    }


    #follow-up {
        grid-column: 2/5;        
        background-color: #0D0806;
        color: white;
        padding: 2px 4px;
        margin: 30px 130px;
    }
}


@media screen and (min-width: 800px) {
    .wrapper {
        max-width: 1200px; 
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    /*    grid-template-rows: repeat(6, 1fr);*/
        grid-auto-rows: auto auto auto auto auto auto;
    }


    .item1 {
        grid-column: 1/6;
        grid-row: 1/2;
    }


    .item2 {
        grid-column: 1/3;
        grid-row: 2/3;
    }

    .item3 {
        grid-column: 1/2;
        grid-row: 3/4;
    }

    .item4 {
        grid-column: 2/3;
        grid-row: 3/4;
    }

    .item5 {
        grid-column: 1/2;
        grid-row: 4/5;
    }

    .item6 {
        grid-column: 2/3;
        grid-row: 4/5;
    }


    .item7 {
        grid-column: 3/4;
        grid-row: 2/5;
    }


    .item8 {
        grid-column: 4/6;
        grid-row: 2/3;
    }


    .item9 {
        grid-column: 4/5;
        grid-row: 3/4;
    }


    .item10 {
        grid-column: 5/6;
        grid-row: 3/4;
    }


    .item11 {
        grid-column: 4/5;
        grid-row: 4/5;
    }


    .item12 {
        grid-column: 5/6;
        grid-row: 4/5;
    }


    .item13 {    
        grid-column: 1/6;
        grid-row: 5/6;
    }

    .item14 {
        grid-column: 1/6;
        grid-row: 6/7;
    }
}


@media screen and (min-width: 800px) {

    .image1, .image13, .image14 {
        position: relative;
        width: 1200px;   
    }

    .image-img1, .image-img13, .image-img14 {
        display: block;
        width: 100%;
    }


    .image2, .image8 {
        position: relative;
        width: auto;
    }

    .image-img2, .image-img8 {
        display: block;
        width: 100%;
    }


    .image3, 
    .image4, 
    .image5, 
    .image6, 
    .image9, 
    .image10, 
    .image11, 
    .image12 {
        position: relative;
        width: auto;    
    }


    .image-img3, 
    .image-img4, 
    .image-img5, 
    .image-img6, 
    .image-img9, 
    .image-img10, 
    .image-img11, 
    .image-img12 {
        display: block;
        width: 100%;
    }


    .image7 {
        position: relative;
        width: auto;    
    }

    .image-img7 {
        display: block;
        width: 100%;
    }


    .image-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .6);
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity .5s;
    }


    .image-overlay--blur {
        backdrop-filter: blur(5px);
    }


    .image-overlay > * {
    /*    transform: translateY(20px);*/
        transition: transform .5s;
    }


    .image-overlay:hover {
        opacity: 1;
    }


    .image-overlay:hover > * {
        transform: translateY(0);
    }


    .image-description {
        font-size: 1.25em;
        margin-top: .25em;
    }
}