/* 
815x 627px
*/

#CEO-page{
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    margin-top: var(--dim-navbar-margin);
    gap: var(--dim-gap);
    width: var(--dim-page-width-large);
    
} 


/* -----------------CEO Page------------------- */

#CEO-image-box{
    display: flex;
    flex-direction: column;
    order: 1;
    grid-row: span 2;
    margin: auto;
}

#CEO-image-box img{
    max-height: 725px;                 /* setting the maximum size limit for image */
    max-width: 100%;                   /* setting the minimum size limit for image */

    padding: var(--dim-padding);
    padding-bottom: 0;

    margin: auto;
}

#CEO-image-box span{
    font-size: var(--ft-size-s3);
    padding: calc(var(--dim-padding) * 0.5) 0;

    margin: auto;
    margin-top: 0;
}

/* ---- */

#CEO-text{
    order: 0;
    padding: var(--dim-padding);
    margin: auto;
}

/* ---- */

#CEO-publications{
    order: 2;
    padding: var(--dim-padding);
}

#CEO-publications h3{
    margin-top: 0;
}

#CEO-publications ol{
    padding-left: 1.1em;
    margin: 0;
}

#CEO-publications ol li{
    /* margin-top: 0.75em; */
}

#CEO-publications ol li a p{
    display: inline;
    color: black;
}

#CEO-publications ol li a .ref{
    text-decoration: underline;
    font-size: 0.75em;
}

/* ------------------------------------ */


.tool-page img{
    max-width: 60%;
    max-height: 650px;
}

/* ------------------------------------ */

/* move publication down on the page */
@media screen and (max-width: 1400px){
    #CEO-page{
        gap: 0;
    }

    #CEO-page #CEO-image-box{
        grid-row: span 1;
    }

    #CEO-page #CEO-image-box img{
        max-width: min(100% ,420px); 
    }

    #CEO-page #CEO-publications{
        grid-column: span 2;
    }
    
}

/* make the view on the tool pages vertical */
@media screen and (max-width: 1150px) {

    .tool-page{
        flex-direction: column !important;
    }

    .tool-page img{
        max-width: min(100% ,732px); 
    }

}

/* make the ceo page all vertical*/
@media screen and (max-width: 960px) {
    #CEO-page{
        display: block !important;
    }
}